Hugoとは
- 静的なhtmlを生成する事ができる静的サイトジェネレータの1つ.
- Go言語で書かれてる.
- 記事を書くだけならGo言語を知らなくても良い.
- 記事はMarkdownで書ける.
- GitHubリポジトリ: https://github.com/gohugoio/hugo
.mdを削除した時に.htmlも同様に削除するオプション
hugo server -D --cleanDestinationDir
MacでHugoとGitHub Pagesを使ってのサイトの作り方
Hugoのコードの色選択
全文検索
見た目変更
このサイトだと/サイトのディレクトリ/themes/book-fork/assets/
の中の.scssファイルを操作する.
イラストの追加
- このサイトだと
/ブログのディレクトリ/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>
を追加する.
- svgファイルをどこからかダウンロードしてくる.
オススメは
Fontawesome
の
GitHubリポジトリ
から目当ての
svgファイル
を見つけて, curlとかで
/ブログのディレクトリ/content/fontawesome/
にダウンロードしてくる.
# GitHubのイラストだとこんな感じ.
curl -O https://raw.githubusercontent.com/FortAwesome/Font-Awesome/master/svgs/brands/github.svg
- このサイトだと
/ブログのディレクトリ/thems/book-fork/assets/custom.scss
に
.inline-svg {
display: inline-block;
height: 1.15rem;
width: 1.15rem;
top: 0.15rem;
position: relative;
}
を追加する.
- .mdファイルの中で
{{\% fontawesome github %}}
と使う.
- Reference: Using Font Awesome Icons in Hugo