公式サイトのQuick Startを参考に、Hugoで静的サイトのブログを構築。
ただ、Quick Startでは足りない部分もあったので、そこも補足しながら説明。

ブログ構築の流れ

Hugoの公式サイトのQuick Startを参考にブログを作成する。

Hugoの導入

Macの場合

brew install hugo

ブログのプロジェクトを作成

hugo new site <blog-name>

【具体例】

hugo new site myblog

テーマを追加

cd <blog-name>
git init
git submodule add <theme-git-link> themes/<theme-name>

<theme-git-link>はHTTPのリンクでないと、エラーが生じるので注意。
また、テーマ内のHTMLやCSS等を編集したい場合、submoduleとしてダウンロードしたテーマそのものは編集せずに、プロジェクトにコピーして、それを編集するようにする。

【具体例】
transquilpeakテーマの場合。

cd myblog
git init
git submodule add https://github.com/kakawait/hugo-tranquilpeak-theme.git themes/hugo-tranquilpeak-theme

テーマ内からテンプレートとなるファイルをプロジェクトにコピー

# config.toml
cp config.toml config.toml.backup
cp themes/<theme-name>/<path-to-config.toml>/config.toml .

# archetypes/posts.md
cp themes/<theme-name>/<path-to-archetypes>/archetypes/post.md ./archetypes/posts.md

【具体例】

cp config.toml config.toml.backup
cp themes/hugo-tranquilpeak-theme/exampleSite/config.toml .

cp themes/hugo-tranquilpeak-theme/archetypes/post.md ./archetypes/posts.md

ブログの記事を新しく作成

hugo new posts/my-first-post.md

ローカルサーバーを起動

hugo server -D
# access to localhost:1313

Hugoでブログを構築する

目次