はじめに
初めてのポートフォリオサイトをHugoのAcademicテーマで作ってみました。英語読むのつらいという方の参考になれば幸いです。
私のポートフォリオサイトはこちら
環境
- macOS Catalina 10.15.1
- Homebrew 2.1.15
(Homebrewのインストールはこちら)
1. Hugoのインストール
CLIで、
$ brew install hugo
$ hugo version
Hugo Static Site Generator v0.59.1/extended darwin/amd64 BuildDate: unknown
2. academic-kickstartリポジトリをfork
こちらのgithubリポジトリにアクセスし、右上の「fork」ボタンを押下します。すると、自分のアカウントに https://github.com/{username}/academic-kickstart というURLのリポジトリができます。
3. forkしたacademic-kickstartリポジトリをcloneし、ビルドしてみる
CLIで、
$ git clone https://github.com/{username}/academic-kickstart.git portfolio
$ cd portfolio
$ git submodule update --init --recursive
$ hugo
$ hugo server
http://localhost:1313/ にアクセスすると、現時点でのページが表示されます。
4. いろいろアレンジする
基本的に content/home/ の中のMarkdownファイルを書き換えることでコンテンツの作成が可能です。（Homeだけは、 content/authors/admin/_index.md です。）
非表示にしたい項目は、
active = false
とします。
4.1 テーマ / フォントを設定
theme = "{theme_name}"
...
font = "{font_name}"
と書き換えることでテーマやフォントを指定できます。指定できるテーマ / フォントは、 themes/academic/data/{themes or fonts}/ にあります。また、自作したTOMLを data/{themes or fonts}/ に置くことでカスタマイズすることも可能です。
4.2 ナビゲーションバーをカスタマイズ
config/_default/menus.toml を編集します。
4.3 Skillsのアイコンをカスタマイズ
skills.md では、基本的にFont Awesomeでアイコンを探して、 icon = "{icon_name}" とすることでアイコンを表示できるのですが、Font Awesomeにないアイコンは、 static/img/ に配置し、
...
<div class="col-12 col-sm-4">
{{ with .icon }}<div class="featurette-icon"><i class="{{ $pack }} {{ $pack_prefix }}-{{ . }}"></i></div>{{ end }}
{{ with .icon_path}}<div class="featurette-icon"><img class="fab" src="/img/{{.}}" width=60px></div>{{ end }} <!-- この行を追加 -->
<h3>{{ .name | markdownify | emojify }}</h3>
{{ with .description }}<p>{{ . | markdownify | emojify }}</p>{{ end }}
</div>
...
と書き換え、 icon_path = "{file_name}" とするといけます。
5. github.ioにデプロイ
githubに {username}.github.io という名前のリポジトリを作成します。
その後、CLIで、
$ hugo
$ cd public
$ git init
$ git add .
$ git commit -m "first commit"
$ git remote add origin https://github.com/{username}/{username}.github.io.git
$ git push -u origin master
とし、 https://{username}.github.io/ にアクセスすると、ビルドしたページが表示されます。
参考ページ
おわりに
ReactとかAngularとかしっかり勉強して、いつかフルスクラッチでオリジナルのポートフォリオサイトを作ってみたいです。