ポートフォリオを新しくした
モチベーション
- 実はHugo Academicで作ったポートフォリオサイトをGitHub Pagesで公開していたのだけど,Academicのバージョンアップで仕様が大きく変わってページ更新が出来なくなってしまい,Strikinglyでずっとやり過ごしてた.
- 古いページがずっと残ってたり,サイトが乱立してる状況が好ましくなかったので,思い切ってリニューアルした.
- Hugoの使い方が忘却の彼方だったのでその辺りについてのメモ.
新しいサイト
ここ
Hugo
Go言語で作られた,静的サイトジェネレータ. コマンド叩いて設定書いてMarkdownファイル追加するだけでおしゃれなWebサイトができる.
WebサイトのホスティングばGitHub Pagesでできるので,WordPressとかみたいにCMS使わないので自前でサーバを(レンタルとかで)用意する必要が無い.GitとGitHubに慣れていない人には逆に面倒かもしれないけど…
Academic
Hugoで作れるサイトのテーマのひとつ.かっこいい. アカデミアの人を意識した感じの機能になっていて, PublicationやProjectのリスト,ページ検索,複数ユーザなど色んな機能がてんこ盛りになってる.
Academicは機能が多すぎてつらかった
検索機能が必要なほどサイトに置くコンテンツがまず無い. 記事書いたファイルをどこに置いたらいいか忘れる. ディレクトリ構造が複雑.などの理由で自分にはつらかった.
Minimal テーマを見つけた
デモサイトもかっこいい.とにかくすっきりしてて良さそうだった.
Hugoの使い方を思い出す
1年以上Hugoを触っていなかったので使い方をさっぱり覚えていなかった. 使ったコマンドをメモしておく. 参考にしたのはこのへんの記事:
新規Webサイトの作成:
$ hugo new site Webサイト名
Webサイトのコンパイルとホスト (ファイルが更新されると自動でコンパイルが走る):
$ hugo server -w
Minimalテーマのインストール:
$ git submodule add https://github.com/calintat/minimal.git themes/minimal $ git submodule init $ git submodule update
Minimalテーマ用の設定ファイルを拾ってくる:
$ cp themes/minimal/exampleSite/config.toml .
ディレクトリ構造は大体以下のようになる:
. ├─archetypes ├─content ├─data ├─layouts ├─resources │ └─_gen │ ├─assets │ └─images ├─static └─themes └─minimal
あとはconfig.toml
を編集したりcontent/
以下にMarkdownファイルを置いていくだけ.
Webサイトのデプロイについて
プロジェクトのルートディレクトリで,
$ hugo
を実行すると,public/
以下にコンパイルされたWebサイトのファイルが生成される.
Hugoのプロジェクトのファイルは当然Gitで管理するわけだけど,
GitHubのユーザ名.github.io
のリポジトリに生成したサイトをpushしないと公開できない.
そこで次のようにした.
まず,公開しないHugoのプロジェクトにはデプロイしたいpublic/
以下のファイルを含める必要が無いので.gitignore
を作ってそれにpublic/
を追加する.
併せて,次のスクリプトをHugoのプロジェクトのルートに追加した:
echo -e "Deploying updates to Github..." # Build the project hugo # Goto public folder and add changes to git cd public git add --all # 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.
やってることは,サイトをビルドしてからpublic/
以下でファイルの変更をcommitし,
リモートリポジトリにpushしてるだけ.
Travis CIとか使ってデプロイを自動化したい気持ちもあるけどそれはまた気が向いたときに.
おわり