前回 Hugo をインストールしたので、実際にサイトを作成して動かしてみる。 基本的には Hugo のクイックスタートを参考に進める。

Hugo プロジェクトの作成

Hugo プロジェクトを作成する。コマンドが成功すると丁寧に次のステップを書いてくれていて、だいたいクイックスタートと同じ流れが書いてある。

~$ hugo new site blog
Congratulations! Your new Hugo site was created in /home/foo/blog.

Just a few more steps...

1. Change the current directory to /home/foo/blog.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>/<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

テーマのインストール

次にテーマをインストールする。クイックスタートでは akane というテーマを入れてるが、 ここでは PaperMod というテーマを入れてみる。

git submodule add というコマンドを初めて知りましたが、指定した git リポジトリを自分の git リポジトリのサブディレクトリに登録するものらしい。テーマのファイルを自分のリポジトリで管理しなくてよくて便利。

~$ cd blog/
~/blog$ git init # git リポジトリに設定
~/blog$ git submodule add https://github.com/adityatelange/hugo-PaperMod themes/PaperMod # テーマをインストール

使うテーマを設定ファイル(hugo.toml)に追記する。

~/blog$ echo "theme = 'PaperMod'" >> hugo.toml

コンテンツの作成

~/blog$ hugo new content posts/my-first-post.md
Content "/home/foo/blog/content/posts/my-first-post.md" created
~/blog$ cat content/posts/my-first-post.md
+++
title = 'My First Post'
date = 2024-04-29T11:14:37+09:00
draft = true
+++

コンテンツのファイルを作成すると、メタデータのみのファイルが作成される。 実際には、ここからタイトルを編集したり内容を執筆する。

動作確認

以下のコマンドで動作確認する。-D オプションは --buildDrafts と同じで、下書きのコンテンツも含める。

~/blog$ hugo server -D

http://localhost:1313/ にアクセスして、ページが表示されたらOK。 ファイルの変更を監視してくれているので、起動したまま編集するとよさそう。

参考

Hugo のクイックスタート: https://gohugo.io/getting-started/quick-start/