目次

Goで記述された静的サイトジェネレータ「Hugo」で簡単にブログなどの静的サイトを作る方法をメモ

Hugoのインストール (MacOS)

brew install hugo

サイト(プロジェクト)を作成

hugo new site ${PROJECT_NAME}

使用するテーマを決める

主要なテーマ

良さげなテーマ

テーマをダウンロード

cd themes
git submodule add ${THEME_REPOSITORY_URL}

テーマを設定 (config.toml)

theme = "${THEME_NAME}"

詳細な設定は各テーマのドキュメントを参考に進める
ex) TranquilpeakテーマのUser documentation

サイトを生成

hugo

/publicディレクトリが生成される

記事を作成

hugo new ${CONTENTS_PATH}

ex) hugo new programming/ruby_memo.md
→ /content/programming下にruby_memo.mdが生成

hugo-tranquilpeak-themeを使用する場合は/content/post下にファイルを置かないと認識されない

生成されるマークダウン

生成されるマークダウンファイルには以下のようなYAML形式のFront-matterがヘッダに記述されており、メタデータを指定できる (Front Matter ドキュメント)

---
title: "Ruby_memo"
date: 2020-04-10T15:45:46+09:00
draft: true
---

ここでdraft:はドラフト記事(まだ公開しない下書きの記事)ならtrueとし、公開したければdraft: falseにする

Hugoサーバを起動

hugo server -D

-D (--buildDrafts)オプションはドラフト記事もコンテンツに含める

静的ページをビルド

hugo -D

Netlifyでホストする

静的コンテンツ(HTML・CSS・JavaScript)のホスティングサービスであるNetlifyを使う
GitHubのリポジトリを登録すれば、指定したブランチにpushされるたびに自動でデプロイを走らせてくれる

Netlifyの導入やデプロイ方法はHugoのドキュメントに記述されている