Hugoとは

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

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

hugo server -D --cleanDestinationDir

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

こちら

Hugoのコードの色選択

• https://help.farbox.com/pygments.html
• Chroma Style Gallery

全文検索

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

# GitHubのイラストだとこんな感じ.
curl -O https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/brands/github.svg

2. このサイトだと/ブログのディレクトリ/thems/book-fork/assets/custom.scssに

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

を追加する.

3. .mdファイルの中で

{{\% fontawesome github %}}

と使う.

4. Reference: Using Font Awesome Icons in Hugo