経歴書、毎回pdf出力して送ったりするの本当にだるいので、もうgithubにあげとこう
— tic40 (@tic40) 2018年2月24日
github pagesを使って自身の経歴を公開するポートフォリオサイトを作ろうと思い立った。 今回、Hugoという静的サイトジェネレータを使って構築したのでその手順を記しておく。
使用するツール
Jekyll と Hugo 両方使ってみてHugoの方が簡単だったのでHugoで構築する。
The world’s fastest framework for building websites.
世界最速
できあがったもの
完成イメージはこちら
構築方法
前提
手順
github に公開用のリポジトリ {USERNAME}.github.io を作成。 https://github.com/tic40/tic40.github.io
プロジェクト用のリポジトリ を作成。名前はなんでもいい https://github.com/tic40/hugo-tic40.github.io
プロジェクト用リポジトリをcloneしておく
hugoをインストールする
$ brew install hugo
$ hugo new site <site name>
- テーマを設定。submodule として登録しておく
$ cd <site name> $ git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke;\ $ echo 'theme = "ananke"' >> config.toml
- public ディレクトリを作成。submoduleとして登録する。
$ git submodule add -b master git@github.com:{USERNAME}/{USERNAME}.github.io.git public
こうしておくことで、public/ の変更をpush したときに、公開用リポジトリに変更をpushされるようになる。
- ローカルで動作確認
$ hugo server -D
*-Dオプションをつけるとドラフト状態の投稿も表示されるのでつけておくといい
デフォルトだと、1313ポートでローカルサーバーが立ち上がるので、ブラウザで確認できる。
- デプロイ
1コマンドでリリースできるようにスクリプトを作っておく
$ vi deploy.sh #!/bin/bash echo -e "\033[0;32mDeploying updates to GitHub...\033[0m" # Build the project. hugo # if using a theme, replace with `hugo -t <YOURTHEME>` # Go To Public folder cd public # Add changes to git. git add . # Commit changes. msg="rebuilding site `date`" if [ $# -eq 1 ] then msg="$1" fi git commit -m "$msg" # Push source and build repos. git push origin master # Come Back up to the Project Root cd ..
スクリプトに実行権限を付与
$ chmod +x deploy.sh
スクリプトを実行して公開
$ ./deploy.sh
githubにアクセスしてページが表示されればOK
記事を投稿する
記事ファイルの作成
$ hugo new posts/{title}.md
上記で作成されたファイルを編集して、deploy.shを実行すれば公開される。 *上記で作成した記事は、ドラフト状態(draft: true) になっているため、そのままでは本番に反映されない。公開時は draft: false にしておく
最新の詳しいドキュメントはこちらを参照