Hugoでブログを作成した件

はじめに

勢いでこのブログを作成したので、いろんな壁にぶち当たりながらなんとか作成した感じになっています。作った当日にこのブログを書くことでなるべく、忘れないうちに備忘録として残しておけるようにしたいって感じですかね。まぁあとはきっと他の誰かが見て参考にしてくれたら嬉しいなの気持ちもちょっとあったりしたり。

環境

Arch Linux x86_64
hugo v0.111.3+extended linux/amd64 BuildDate=unknown
git version 2.40.1
GitHub Pages

Hugoのインストール

自分はArch Linuxの環境だったので、以下のコマンドでインストール。

1
$ pacman -S hugo

他のOSを使っている人は、難しいものでもないので公式HPから確認してください。

インストールが終わったら今度は、hugo new site <string>で新たにディレクトリごとページを作成。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
$ hugo new site test
Congratulations! Your new Hugo site is created in /home/amaototi/test.

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はテーマを自由に決めることができるとてもカスタマイズ性の高いフレームワークなので、自分で好みのテーマを探すと良いです。自分はStackというテーマに。テーマはこちらからどうぞ。

テーマを決めたらgit initからのgit submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/hugo-theme-stackでテーマをインストール。ここは各自選んだテーマのドキュメントを確認してください。

インストールができたら、themes/hugo-themes-stack/examplesの中にあるconfig.yamlとcontent/を先程作成したディレクトリ直下にコピー。その際、config.tomlは削除します。

ここまで終わった状態でhugo server -Dをして、http://localhost:1313/にアクセスすると、、、

といった感じで動きます。感動。そしたら次はカスタマイズをしてきます。

と言ってもやることは、不必要なexampleを消すのと、config.yamlの編集を行うだけ。

変更点

languageCodeとDefaultContentLnaguageをjaに
publishDir: docsをどっか適当に追記
parms内部
- sidebarの中身全般
  - emojiはアイコンの右下にちっちゃくつくやつ
- articleの中身ちょっと
  - mathは数学の記法をつかえるようにするかどうか
  - tocは目次の表示非表示
  - readingTimeは読了時間の表示
  - licenseはライセンスの表示
menu内部
- socialの中身
  - GitHubとTwitterのリンクを追加

だいたいこの程度の変更。あとは、公式ドキュメントを読んだり、先人たちの知恵を借りたりという感じ。

GitHub Pagesに登録

GitHub Pagesを使うことで無料で公開することができるとのことだったので実践。

GitHubでリポジトリを作成し、Settings > Pagesから設定を行い公開する。この際、config.yamlのbaseurlをhttps://<username>.github.io/<repoの名前>に変更することを忘れずに行うこと。

また、カスタムドメインにする際も、同様にbaseurlをちゃんと設定してあげないとバグるので要注意。

まとめ

思ってたよりも数倍簡単にブログを作れて良かったなというお気持ち。

今度は、勝手にpushとかしてくれるようにしたいな。