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>

を追加する.

  1. svgファイルをどこからかダウンロードしてくる. オススメはFontawesomeGitHubリポジトリから目当てのsvgファイルを見つけて, curlとかで/ブログのディレクトリ/content/fontawesome/にダウンロードしてくる.
# GitHubのイラストだとこんな感じ.
curl -O https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/brands/github.svg
  1. このサイトだと/ブログのディレクトリ/thems/book-fork/assets/custom.scss
.inline-svg {
  display: inline-block;
  height: 1.15rem;
  width: 1.15rem;
  top: 0.15rem;
  position: relative;
}

を追加する.

  1. .mdファイルの中で
{{\% fontawesome github %}}

と使う.

  1. Reference: Using Font Awesome Icons in Hugo