修士以降の学生で研究に取り組んでいると、自分のプロジェクトやpublicationをまとめたシンプルなウェブページが欲しくなってくる。Wordpressやstrikinglyみたいなサービスが出ているが、オリジナルのWebページを作りたいときには制約が多かったり、機能が多すぎたりすることがある。
HugoはGo言語で記述された、 スゴイハヤイ静的ウェブジェネレータである。 記事やプロジェクトなどを Markdown記法 で記述することで投稿したり更新したりできるため、普段mdでノート取ってる方やQiitaの諸兄・諸姉には非常に使い勝手のいいWebジェネレータであると思う。
今回は Academic テーマをベースにオリジナルページを作成してみた。
ウェブサイトはこちら : web
https://gohugo.io/getting-started/quick-start/ チュートリアルはここから
brew install hugo
hugo new site yourSiteName
cd yourSiteName
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
ここでは、yourSiteNameプロジェクト内のthemeフォルダに、submoduleとしてテーマプロジェクトを追加している。 テーマプロジェクト内は基本的には生成したプロジェクトと同様の構造となっており、exampleもあるので改造しやすい。 プロジェクトを追加したときに生成されるconfig.tomlを書き換えてテーマをアクティブにする必要がある。
hugo new posts/my-first-post.md
config.tomlに以下の文言を追加して、
baseURL = "https://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "ananke"
hugo server -D
localhost:1337にアクセスすると、生成されたウェブサイトが見れる。たったこれだけでWEBサイトが完成してしまう。
インストールは、git submoduleでAcademicテーマをthemesフォルダに追加すればよい。exampleSiteの投稿（content）ツリーはこのようになっている。
├── exampleSite
│ ├── config.toml
│ ├── content
│ │ ├── home
│ │ │ ├── about.md
│ │ │ ├── contact.md
│ │ │ ├── hero.md
│ │ │ ├── posts.md
│ │ │ ├── projects.md
│ │ │ ├── publications.md
│ │ │ ├── publications_selected.md
│ │ │ ├── tags.md
│ │ │ ├── talks.md
│ │ │ └── teaching.md
│ │ ├── post
│ │ │ ├── _index.md
│ │ │ ├── faq.md
│ │ │ ├── getting-started.md
│ │ │ ├── managing-content.md
│ │ │ ├── migrate-from-jekyll.md
│ │ │ ├── widgets.md
│ │ │ └── writing-markdown-latex.md
│ │ ├── project
│ │ │ ├── deep-learning.md
│ │ │ └── example-external-project.md
│ │ ├── publication
│ │ │ ├── _index.md
│ │ │ ├── clothing-search.md
│ │ │ └── person-re-identification.md
│ │ ├── tags
│ │ │ └── academic
│ │ │ └── _index.md
│ │ └── talk
│ │ ├── _index.md
│ │ └── example-talk.md
トップページに現れるプロフィール画像や文言などもすべてmd記法で記述することが可能。
元のデザインも十分に良いのだが、自分風にカスタマイズしたい場合は、
static フォルダに、 custom.css という名前でcssファイルを作成partials/widjets などの要素・クラスを見ながら、custom.cssを書きかえこのあたりの細かい作業が（Hugo初めてだったので）Hard-Codedになってしまったのは大いに反省なのだが、上に書いてあるフォルダ内のデータをいじれさえすれば、Academicのpostパターンを崩すことなくオリジナルのポートフォリオサイトが作成できる。
作成したウェブサイトがこちら：web