HUGOとGitHub(Actions/Pages)で爆速ブログ作成
HUGOとGitHubの力で技術ブログを作成できるテンプレートを作りました。
数個の設定で爆速にブログを立てることができます。この記事ではテンプレートの利用方法を解説します。
できること
・GHActionsによる自動デプロイ
・GHPagesでの公開
解決できる課題
・フレームワーク選びがめんどい
・環境構築がめんどい
・設定方法を調べるのがめんどい
・デプロイがめんどい
・自動化のテストもめんどい
・記事の追加もめんどい
解決できない課題
・記事を書くのがめんどい
この記事で作成するページ
タグ・カテゴリによるページの分類ができるテーマで、技術ブログ等に利用しやすいものになっています。
また、テンプレートでは日本語に適したな幾つかの設定を施しています。
HUGOとは
Go言語製のWebページジェネレーターです。
類似のツールに比べ、ページのビルドが高速であるという特徴があります。
この記事ではGitHub Actionsでページをビルドできるため、動作が素早いHUGOを選択しました。
テーマついて
このリポジトリではHUGOのテーマとしてmainroadを利用しています。
mainroadテーマは外観こそ古風ですが、情報の一覧性が高く、ページのカテゴリ指定・タグ指定による情報の整理が行えます。
このテンプレートは技術ブログの掲載をターゲットにしましたので、mainroadが最適と判断しました。
GitHub Pagesとは
静的サイトホスティングサービスです。
GitHub謹製であるということもあり、同サービス上のリポジトリをそのまま公開することが可能です。
後発の類似サービスであるCloudflare Pagesなどとの比較はこちらの記事を参照してください。
ブログページの作成方法
リポジトリの作成
GithubのリポジトリページからUse this templateをクリックしてください。
クリックすると、リポジトリを作成するページに遷移します。
下記の表にしたがって名前を入れてください。(user_nameはリポジトリを作成するユーザ/orgのアカウント名です）
| リポジトリ名 | ||
|---|---|---|
| ① | 「user_name.github.io」で公開する場合 | user_name.github.io |
| ② | 「user_name.github.io/hogehoge」で公開する場合 | hogehoge |
正しくリポジトリを作成できたらこのステップは完了です。
ブログページの作成
作成したリポジトリをcloneするか、.キーを押してWebEditorを起動してください。
./config.tomlを開き、以下の項目を編集してください。
値を設定しない場合、mainroadテーマのデフォルト値が利用されます。
base url
config.toml2行目では公開するブログのURLを指定します。
先ほどリポジトリ名に①を選んだ方は「user_name.github.io」、②を選んだ方は「user_name.github.io/hogehoge」のように設定してください。
# 公開するページのURL（この例でリポジトリ名は"hogehoge")
baseURL = "https://kato-k.github.io/hogehoge"
ブログのタイトル
ブログタイトルを設定します。
# ブログのタイトル
title = "HOGE HOGE's BLOG"
プロフィールの設定
あなたの名前、自己紹介、アイコンを設定します。
アバターのサンプルとしてstatic/img/avatar.pngに画像が配置されているので入れ替えてください。
# 自己紹介
[Author]
name = "ほげ村ふご太郎"
bio = "44GG44KT44GTが好きです"
avatar = "img/avatar.png"
ページのテーマカラー
mainroadテーマ唯一のカスタマイズ要素です。
お好きな色を指定してください。
[Params.style.vars]
highlightColor = "#e22d30"
SNSユーザー名
サイドバーにユーザー名を表示できます。アカウント名を指定してください。
デフォルトのmainroadでは以下のアカウントをサポートしています。
- telegram
- github
- gitlab
- bitbucket
[Params.widgets.social]
twitter = "uvrub"
github = "kato-k"
ページを公開する
変更したconfig.tomlとともにリポジトリを更新すると、./.github/workflows/gh-pages.ymlによって設定されたGitHub Actionsが実行され、ページがビルドされます。
リポジトリのSettings→Pagesからページを公開するように設定してください。
公開設定からページへの反映まで10分以上の時間がかかる場合があります。
ページをプレビューする
ローカルにhugoコマンドがある場合、リアルタイムにページをプレビューできます。
mainroadテーマはgit submoduleで管理されているため、cloneすることを忘れないでください。
$ ls
-> クローンしたリポジトリ
$ hugo serve
記事の作成
ディレクトリ構造
ブログの器ができたので記事を作成しましょう。記事は./content/posts/下に配置します。
テンプレートにはサンプルとして一つ記事が作成されています。
.
└── posts
└── sample
├── image.jpeg
└── index.md
2 directories, 2 files
また、ディレクトリは無制限に掘ることができるので下記のような構造で管理することも可能です。
.
├── posts
│ ├── IPA
│ │ └── AP
│ │ └── index.md
│ └── vim
│ ├── eskk-install
│ │ ├── eskk.png
│ │ └── index.md
│ ├── xinymin_vim
│ │ └── index.md
│ └── yubaba-vim
│ └── yubaba-vim.md
└── privacy.md
記事に画像が必要ない場合、posts下に./content/posts/hoge.mdのように配置できます。
マークアップ
記事冒頭で記事の属性を設定します。
menu: mainで記事をトップバーに表示するように指定できます。
---
title: "Sample Page"
date: 2021-01-01
categories: ["hugo"]
tags: ["go", "markdown"]
menu: main
---
画像を挿入は、記事のindex.mdと同じディレクトリに配置し、以下の形式で利用できます。
{{<figure src="./image.jpeg" alt="美ヶ原からの景色" width="75%">}}
おまけ
HTMLタグを埋め込む
config.tomlに下記を追加し、HTMLの埋め込みを許可できます。
[markup]
[markup.goldmark]
[markup.goldmark.renderer]
unsafe = true
この記事の内容は以上です
公式Docs
Discussion