はじめに
RUNTEQアドベントカレンダー2021 4日目の記事です。
RUNTEQではアウトプットを推奨しています。で、大体はてなブログやWordPress, Notionが使われているんですが、Hugoという選択肢もあることを知ってほしい！
というわけで、当記事では、Hugoの布教活動を行っていきたいと思います。
ちなみに、当然ながらこのブログはHugoです。
ここが素敵
記事をローカルと同期できる
Qiitaでは自分が書いた記事はプラットフォームに依存しています。なので、バックアップを取るようなことはできません。
ですが、記事をコードで管理しておけば、手元の内容も常に最新にすることができます。
ちなみに、ZennではGitHubから記事を投稿することが可能です。
記事を書くことでGitHubの草を生やせる
GitHubで管理したい理由の1つですね。モチベーションが上がります。
カスタマイズができる
Notionじゃだめなの？の答えです。Notionも便利ですが、カスタマイズ性は制約があります。
ですが、Hugoなら技術次第ですがわりと可能です。技術がなくても「これやりたい」でググればある程度引っかかります。
ついでにカスタマイズ自体がネタになります（参考）
はやい、うまい、やすい
WordPressやRailsでブログを作るのに比べると、静的サイトなのでレスポンスが速いです。
また、サーバー代がかからないので、基本的に無料です。ドメイン代くらいです。
ロマン
自分だけのブログを手ずから育てる楽しみです。マイクラと似た感じだと思います。マイクラやったことないんですが。
ここは弱い
初期設定が煩雑
デプロイしてしまえばひたすらpushするだけでいいのですが、最初の設定が割と面倒です。
投稿画面がない
静的サイトなので、管理画面などありません。エディタを信じろ。
いつでもどこでも記事を書くというのには向いていないです。
画像投稿がしづらい
画像アップロード機能もないので、自分で画像を管理する必要があります。
私はGitHubにアップロードしてURLをコピペしています（GitHubに依存するので、あまりよくはなさそう）
検索機能が弱い
これはテーマに依存しますが、全文検索は基本的にないです。
自分で実装する必要があります。
ちなみに、これらはざっくりと静的サイトジェネレータの特徴です。
静的サイトジェネレータの中でも私がHugoを選んだのは、以下の理由からです。
では、少しでも興味を持った方は、せっかくなので始めてみましょう。
始めてみよう
前提
Hugoディレクトリを作成する
Quick Start | Hugoの通りです。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$ hugo new site blog # 好きなリポジトリ名にしてください
Congratulations! Your new Hugo site is created in /Users/k_end/private/blog.
Just a few more steps and you're ready to go:
1. Download a theme into the same-named folder.
Choose a theme from https://themes.gohugo.io/ or
create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".
Visit https://gohugo.io/ for quickstart guide and full documentation.
|
Hugoのリポジトリを作成します。これは一瞬で終わりますが、まだこの段階では中身は空っぽです。
1
2
3
4
|
$ cd blog
$ ls
. .. archetypes config.toml content data layouts static themes
|
Hugoでは作成時にGitの設定はされていないので、git initしておきます。ついでに、テーマも適用しておきます。
テーマを適用させるためには普通にcloneする方法もあるのですが、submoduleを使う方法を公式が推奨しています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
$ git init
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: git config --global init.defaultBranch <name>
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: git branch -m <name>
Initialized empty Git repository in /Users/k_end/private/blog/.git/
$ git submodule add https://github.com/zzossig/hugo-theme-zzo themes/zzo # themes/zzoはカレントディレクトリ配下に作成するディレクトリ
Cloning into '/Users/k_end/private/blog/themes/zzo'...
remote: Enumerating objects: 8620, done.
remote: Counting objects: 100% (75/75), done.
remote: Compressing objects: 100% (59/59), done.
remote: Total 8620 (delta 31), reused 37 (delta 10), pack-reused 8545
Receiving objects: 100% (8620/8620), 10.18 MiB | 6.20 MiB/s, done.
Resolving deltas: 100% (5166/5166), done.
$ ls -a
. .. .git .gitmodules .hugo_build.lock archetypes config.toml content data layouts resources static themes
$ echo theme = \"zzo\" >> config.toml # ここで、theme/zzo の名前を指定する
|
config.tomlのthemeはリポジトリ名に対応します。
ここで一旦コミットしておくといいです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$ git status
On branch master
No commits yet
Changes to be committed:
(use "git rm --cached <file>..." to unstage)
new file: .gitmodules
new file: themes/zzo
Untracked files:
(use "git add <file>..." to include in what will be committed)
archetypes/
config.toml
|
Zzoの設定
公式で紹介しているテーマであるanankeはディレクトリの構造がシンプルですが、Zzoはわりと複雑です。
（ちなみに、Zzoは多言語化対応していたりして初心者にはちょっと癖の強いテーマです。特にこだわりがないならシンプルなものを選んだほうがいいかもしれません）
ここからはQuick Start – Z Themes Documentationに従っていきます。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
# ZzoのexampleSiteの中身をコピーしてまるごと置き換える
$ cp -rf themes/zzo/exampleSite/* .
# config/_default/config.toml を使うので、ルートディレクトリのconfig.tomlは削除する
$ rm -f config.toml
$ hugo server
Start building sites …
hugo v0.89.4+extended darwin/amd64 BuildDate=unknown
WARN 2021/12/03 23:12:33 The "twitter_simple" shortcode will soon require two named parameters: user and id. See "/Users/k_end/private/blog/content/en/posts/rich-content.md:35:1"
# Zzoのサンプルで使われている`twitter_simple`という構文は古いのでWarningが出ている
| EN | KO
-------------------+-----+------
Pages | 132 | 28
Paginator pages | 3 | 0
Non-page files | 3 | 0
Static files | 127 | 127
Processed images | 0 | 0
Aliases | 36 | 10
Sitemaps | 2 | 1
Cleaned | 0 | 0
Built in 9085 ms
Watching for changes in /Users/k_end/private/blog/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/k_end/private/blog/config.toml, /Users/k_end/private/blog/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 http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
|
これでhttp://localhost:1313/にアクセスすると……
やったー！！！
ローカルで記事を編集するときは、このようにhugo serverでプレビューを確認します。
では、いちいちビルドファイルが生成されるのがうざいので、.gitignoreに入れてGitの管理対象から外します。
1
2
|
$ echo "resources/**/*
.hugo_build.lock" > .gitignore
|
デプロイ先の選択肢
ホスティングサービスはいろいろありますが、メジャーなのは以下の3種類ですかね。
- GitHub Pages
- Netlify
- Vercel
Vercelの体験がいいというのを周囲でよく聞くので、今回はVercelでデプロイします。
……しようとしたのですが、VercelでデプロイしたところエラーになったのでNetlifyにしました。多分他のテンプレートだとこうはならないと思います……。
参考になりそう：Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる
デプロイする
何はともあれ、GitHubにpushしなければデプロイできません。これまでコミットしていなかった場合は、今までの変更をコミットしておきます。
それっぽい名前を付けてリポジトリ作成します。publicかprivateかはどちらでもいいです。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$ git remote add origin git@github.com:aiandrox/blog.git
$ git push -u origin master # git initのときにmasterブランチを作成したのでmasterにする
Enumerating objects: 167, done.
Counting objects: 100% (167/167), done.
Delta compression using up to 4 threads
Compressing objects: 100% (144/144), done.
Writing objects: 100% (167/167), 1.36 MiB | 1.48 MiB/s, done.
Total 167 (delta 9), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (9/9), done.
To github.com:aiandrox/blog.git
* [new branch] master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.
|
次に、Netlifyの設定ファイルを作成します。
Configure Hugo Version in Netlifyからコピーしてnetlify.tomlに貼り付けます。
バージョンはhugo versionで確かめることができます。
1
2
|
$ hugo version
hugo v0.89.4+extended darwin/amd64 BuildDate=unknown
|
上記リンクではたくさん記述があるが、実際はこれだけで充分です。
1
2
3
4
5
6
7
8
|
[build]
publish = "public"
command = "hugo --gc --minify"
[context.production.environment]
HUGO_VERSION = "0.89.4"
HUGO_ENV = "production"
HUGO_ENABLEGITINFO = "true"
|
で、ここまでpushが完了したら、NetlifyにGitHubアカウントでログインします。
「New site from Git」からGitHubを選び、リポジトリを選択します。
とはいえ多分最初はリポジトリが表示されていないはずなので、「Configure the Netlify app on GitHub.」からリポジトリへのアクセスを許可します。
すると、さきほどの設定ファイルの内容がBuild commandやPublish directoryに入っているはずです。
「Deploy site」をクリックするとワークフローが走り始め……このような表示になるとデプロイ完了です。
1
|
Error: module "zzo" not found; either add it as a Hugo Module or store it in "/opt/build/repo/themes".: module does not exist
|
↑↑のようなエラーが出た場合は、submoduleが原因です。
これでデプロイはできましたが、今の状態ではサイトにアクセスしても404になっていると思います。
Netlifyでサブドメインを変更できるので、お好みに変更してください。
あとは、config/_default/config.tomlのbaseURLを変更してpush→デプロイしたら完了です。
1
|
baseURL = "http://example.org"
|
その後の話
contentの中身がページの中身です。ファイル構造がURLのパスの構造になります。
また、基本的なカスタマイズはconfigディレクトリの中身を変えることで可能です。
この辺はいろいろいじってみながら開拓してみてください。それも楽しみです。
終わりに
Hugoでのブログ作成は、はてなブログやNotionに比べると、面倒臭さや使いづらさもあります。
しかし、自分の城は心を豊かにしてくれます。
ぜひ、Hugoで楽しいブログライフを！
