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
   

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

GitHub Actions による GitHub Pages への自動デプロイ #

1. YAML を作成する #

• 以下の YAML ファイルを master ブランチの .github/workflows/gh-pages.yml として Push すると自動で gh-pages で公開してくれるようになる．

  name: github pages
  
  on:
    push:
      branches:
        - master
  
  jobs:
    build-deploy:
      runs-on: ubuntu-18.04
      steps:
        - uses: actions/checkout@v2
          with:
            submodules: true
  
        - name: Setup Hugo
          uses: peaceiris/actions-hugo@v2
          with:
            hugo-version: '0.64.0'
  
        - name: Build
          run: hugo --minify
  
        - name: Deploy
          uses: peaceiris/actions-gh-pages@v3
          with:
            deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
            publish_dir: ./public
  

• References:
  • GitHub: peaceiris/actions-gh-pages
  • GitHub: peaceiris/actions-hugo

2. デプロイトークンを設定する #

• 以下のコマンドでデプロイトークン用の秘密鍵と公開鍵のペアを作成する．

  ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
  

• 出来上がった gh-pages.pub （公開鍵）を GitHub リポジトリの settings の Deploy keys に Allow write access オプションと共に登録する．
• 出来上がった gh-pages （秘密鍵）を GitHub リポジトリの settings の Secrets に ACTIONS_DEPLOY_KEY として登録する．

3. Reference #

• Qiita: GitHub Actions による GitHub Pages への自動デプロイ