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

Wed, 01 Apr 2020 22:00:10 +0900

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登録&デプロイ

リポジトリの選択

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 = "&copy; 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へのデプロイ周りはすごく簡単
テンプレートのカスタマイズについてはこちら

Netlify | エンジニアのひきだし