HugoのAcademicテーマでポートフォリオサイトを作った話

はじめに

初めてのポートフォリオサイトを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 です。）
非表示にしたい項目は、

content/home/*.md

active = false

とします。

4.1 テーマ / フォントを設定

config/_default/params.toml

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/ に配置し、

themes/academic/layouts/partials/widgets/featurette.html

...
<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/ にアクセスすると、ビルドしたページが表示されます。

参考ページ

• Hugoでポートフォリオサイトを作ってみた

おわりに

ReactとかAngularとかしっかり勉強して、いつかフルスクラッチでオリジナルのポートフォリオサイトを作ってみたいです。