最近，知らない場所で知らない人に自分が作ってきたものを紹介する機会が増えたんですが，毎回それをするのはコストがかかるし自分でも覚えてないものがあったりするので，そういうときに「これ見てください」って言って済ませられるように過去の制作物をまとめたポートフォリオを作りました．
Golangベースの静的なサイトジェネレーターとして知られるHugoを使って作ったポートフォリオサイトをGithub Pagesにデプロイしています．これについて書いた記事はすでにたくさんありますが，デプロイの手順が少し複雑だったので，自分用の備忘録として残しておこかと思います．
1. 公開用サイトを作成する
作業環境
macOS Mojave 10.14.6
Hugoのインストール
まずはhomebrewを使ってhugoをインストールします．
$ brew install hugo
サイトの生成
任意のディレクトリに移動して，以下のコマンドを叩きます．ちなみにhugoはサイト生成の速さを推しているらしく，信じられないくらい速く終わります．
$ hugo new site portfolio
テーマを適用する
hugoでは基本的にテーマと呼ばれるテンプレートのようなものをベースにサイトを作ります．今回はhugo-cardsテーマをsubmoduleとして登録します．そうすると，元からあったthemesディレクトリの中に色々なファイルが生成されます．
$ git submodule add https://github.com/bul-ikana/hugo-cards themes/hugo-cards
設定ファイルの編集
hugoでは設定ファイルが意外と重要です．ルートディレクトリにあるconfig.tomlを編集します．今回の変更点は以下の通りです．その他細かい設定は．テーマの開発者が公開しているドキュメントの通りに進めれば大丈夫だと思います．
baseUrlを
https://<アカウント>.github.io/blogにするtheme = "hugo-cards"で使用するテーマを指定するpiblishDirを
docsに変更する
ビルドされたファイル群が作業ディレクトリ直下のdocsディレクトリに保存されるように変更します．デフォルトだとpublicディレクトリが自動生成されます．canonifyurlsを
trueにする
相対パスではなくbaseurlを基点とした絶対パスに変更します．
baseURL = "https://te260ku.github.io/portfolio/"
languageCode = "en-us"
title = "Tetsuro Okuya"
theme = "hugo-cards"
publishDir = "docs"
canonifyurls = true
ローカルサーバーで動作確認
以下のコマンドを実行するとサーバーを建てることができます．ここで適用したテーマが正しく表示されているか確認します．
$ hugo server -D
公開用にビルドする
デプロイするファイル群を生成するには以下のコマンドを実行します．これも相変わらず爆速です．
$ hugo
すると，ルートディレクトリ配下にdocsというディレクトリが新たに追加されます．この中に公開に必要なファイルが入っています．
2. Github Pagesにデプロイする
ビルドまで終わったので，いよいよデプロイしていきます．githubで適当なリポジトリを作ったうえで，まずは作業ディレクトリの中身を丸ごとpushします．
$ cd portfolio
$ git init
$ git add .
$ git commit -m "initial commit"
$ git remote add origin リポジトリのURL
$ git push origin master
無事pushできたら，githubリポジトリのSettingsにあるGithub Pagesというエリアを確認します．先ほど生成されたdocsディレクトリを公開したいので，Sourceの項目をmaster branch / docs folderに変更します．
その後しばらくすると，https://ユーザー名.github.io/portfolio/にサイトがデプロイされていることを確認できます．github pagesは変更が反映されるまでに時間がかかることがあるので注意．
3. 記事の更新
今後何事もなければポートフォリオに掲載する作品は増えていくと思います．その際には以下のコマンドを実行して，生成されたファイルに記事の内容を記述し，上記の手順にしたがって再度リポジトリにpushすればサイトの内容が更新されます．ビルドするのを忘れずに．
$ hugo new <記事名>.md
4. おわりに
HugoとGithub Pagesを使うと，名刺代わりになるようポートフォリオサイトを秒速で作れる．