Hugo + GitHub + Netlifyで静的ブログサイト構築（無料）
はじめに
初記事です。よろしくお願いします。
BloggerというGoogleのブログサービスを使用したブログを運営しているのですが、静的サイトジェネレーターを使ってMarkdownで記事を書くブログサイトの構築方法を見つけたので、これに挑戦してみました。
Zennでほぼ同様のことが簡単にできる上にたくさんの人たちに読んでもらえるかもしれませんが、自分のサイトでいろいろと好き勝手出来るのは魅力かなと思います。
構成
-
Hugo（テーマ：Mainroad）
静的サイトジェネレーターです。
速度が早いこと、Go言語を使用していることからこちらのHugoを選びました。
テーマについては下記の記事を参考にさせてもらい、シンプルで気に入ったのでMainroadを選びました。 -
GitHub
データ管理と、Netlifyと連携してサイトを自動更新するために使用。 -
Netlify
無料で使えるホスティングサービスです。
GitHubと連携して更新を検知して自動的にサイト更新もできます。
（Continuous Deploymentを設定しておく）
ブログサイトとしての魅力
少々構築の知識が必要ではありますが、個人的には無料ブログサービスの代わりに静的ブログサイトを運営するのは十分選択肢になります。
ひとまず表示速度が高速で、Netlifyのドメインパワーが強かったので書いておきます。
このあたりは状況によって変化してしまいますが。。
表示速度
Googleサーチコンソールから飛べる、PageSpeed Insightsの結果です。
シンプルに作っているBloggerのブログでも調子が良い時で80台だったので、高速です。
今後のカスタマイズでごちゃごちゃしてくるとまた変わってくるかもしれませんが。
- モバイル
- パソコン
ドメインパワー
サイトを構築して３日目ぐらいからこの値でした。（スクショは5日目の値）
Bloggerで作ったサイトは1年以上経ってるのに一桁なのですが（笑）
構築手順
Hugoサイトの構築方法
macOSであれば、下記の手順に沿って進めることでAnankeというテーマのサイト構築が簡単にできます。
Mainroadテーマの設定
私はMainroadというテーマに変更しているので、こちらの設定方法について記載します。
-
インストール
下記のようなコマンドでMainroadテーマをサブモジュールとして追加します。
git submodule add https://github.com/vimux/mainroad themes/mainroad -
設定ファイル（config.toml）の設定
テーマの設定を下記に変更します。
theme = "mainroad"
ヘッダーやフッター、サイドバーなどを含めた設定ファイルの内容は下記に記載しました。
NetlifyのContinuous Deploymentの設定
GitHubのmainブランチが更新されたらサイトが更新されるように設定しています。
下記以外の項目はほぼデフォルトのままだったと思います。
- GitHubのリポジトリを指定
- Publish directoryを指定
siteディレクトリの中にHugoのコンテンツを配置したため、このようなパスになっています。 - Production branchを指定
構築したブログ
ベースの色設定が適当なわりに気に入っています。
カスタマイズの内容なども今後下記ブログに記載していく予定ですが、Zennとの棲み分けは悩み中です。。
Discussion