Hugo(Academic) + Netlifyで無料のブログ構築

HugoとNetlifyでブログ構築したので備忘録。

なぜHugoとNetlifyなのか？

• 無料でできる（大事）
• ブログの執筆は書き慣れたMarkdownで気軽に行いたい
• いい感じのテンプレートがあった（Academic）
• NetlifyはCIがついていてデフォルトでHugoに対応している
• GitHubのプライベートリポジトリでも無料で使える

静的サイトジェネレータには他にもGatsbyとかHexoとかJekyllとかありますが、Go製だったのでHugoにしました。 HugoはGoの html/template と text/template をベースに作られてるらしいのでカスタムしやすそうだと思ったのも理由の一つです。

Hugoのインストール

まずは前準備

$ brew install hugo

テンプレートのインストール

こちらを参考に。

$ git clone https://github.com/sourcethemes/academic-kickstart.git My_Website

# サブモジュールの更新
$ cd My_Website
$ git submodule update --init --recursive

ローカルで確認してみる

$ hugo server
                   | EN
-------------------+-----
  Pages            | 36
  Paginator pages  |  0
  Non-page files   |  1
  Static files     |  5
  Processed images | 11
  Aliases          |  5
  Sitemaps         |  1
  Cleaned          |  0

Built in 468 ms
Watching for changes in /Users/jun/project/My_Website/{assets,content,data,static,themes}
Watching for config changes in /Users/jun/project/My_Website/config.toml, /Users/jun/project/My_Website/config/_default
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

http://localhost:1313 で確認

GitHubにpush

リポジトリはプライベートでもパブリックでもいいです。

$ rm -rf .git
$ git init

# hubコマンドを利用する場合（パブリックの場合は -p なし）
$ hub create -p
$ git remote -v
  origin  git@github.com:xxx/My_Website.git (fetch)
  origin  git@github.com:xxx/My_Website.git (push)

# 手動でリポジトリを作成する場合
$ git remote add origin git@github.com:nattokin/My_Website.git
$ git remote -v
  origin  git@github.com:xxx/My_Website.git (fetch)
  origin  git@github.com:xxx/My_Website.git (push)

$ git add .
$ git commit -m "first commit"
$ git push origin master

Netlify登録&デプロイ

ログイン

こちらからGitHubアカウントでログイン

リポジトリの選択

New Site from Git から対象のGitHub>リポジトリを選択します。

デプロイ

デフォルトのままでok。 設定ファイル netlify.toml の内容が優先されるので無視されます。

• Branch to deploy : master
• Build command : hugo
• Publish directory : public

Deploy site を押す。

デプロイ完了。リンク先で確認。

Academicの設定

基本設定の変更はこんな感じ

# config/_default/config.toml

# 最下部のコピーライトに表示されるやつ
- copyright = ""
+ copyright = "© 2020 nattokinxxxx All Rights Reserved."

# 言語設定
- defaultContentLanguage = "en"
- hasCJKLanguage = false  # Set `true` for Chinese/Japanese/Korean languages.
+ defaultContentLanguage = "ja"
+ hasCJKLanguage = true  # Set `true` for Chinese/Japanese/Korean languages.

# 記事のフィルタなどに使用するようだが自分しか投稿しないので不要
  [taxonomies]
    tag = "tags"
    category = "categories"
    publication_type = "publication_types"
-   author = "authors"

# config/_default/languages.toml

- [en]
-   languageCode = "en-us"
+　[ja]
+  languageCode = "ja"

# config/_default/params.toml

# サイトの文字サイズ
- font_size = "L"
+ font_size = "M"

# ヘッダーのdescription
- description = ""
+ description = "エンジニアのブログ"

まとめ

• Netlifyへのデプロイ周りはすごく簡単
• テンプレートのカスタマイズについては こちら