Hugo

Hugoとは

  • 静的なhtmlを生成する事ができる静的サイトジェネレータの1つ.
  • Go言語で書かれてる.
  • 記事を書くだけならGo言語を知らなくても良い.
  • 記事はMarkdownで書ける.
  • GitHubリポジトリ: https://github.com/gohugoio/hugo

.mdを削除した時に.htmlも同様に削除するオプション

hugo server -D --cleanDestinationDir

MacでHugoとGitHub Pagesを使ってのサイトの作り方

こちら

Hugoのコードの色選択

全文検索

Search for your Hugo Website

見た目変更

このサイトだと/サイトのディレクトリ/themes/book-fork/assets/の中の.scssファイルを操作する.

イラストの追加

  1. このサイトだと/ブログのディレクトリ/layouts/shortcodes/fontawesome.html

    <span class="inline-svg" >
    {{- $fname:=print "fontawesome/" ( .Get 0 ) ".svg" -}}
    {{- $path:="<path" -}}
    {{- $fill:="<path fill=\"currentColor\"" -}}
    {{ replace (readFile $fname) $path $fill | safeHTML }}
    </span>

    を追加する.

  2. svgファイルをどこからかダウンロードしてくる. オススメはFontawesomeGitHubリポジトリから目当てのsvgファイルを見つけて, curlとかで/ブログのディレクトリ/content/fontawesome/にダウンロードしてくる.

    # GitHubのイラストだとこんな感じ.
    curl -O https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/brands/github.svg
  3. このサイトだと/ブログのディレクトリ/thems/book-fork/assets/custom.scss

    .inline-svg {
    display: inline-block;
    height: 1.15rem;
    width: 1.15rem;
    top: 0.15rem;
    position: relative;
    }

    を追加する.

  4. .mdファイルの中で

    {{\% fontawesome github %}}

    と使う.

  5. Reference: Using Font Awesome Icons in Hugo