Hugo + GitHub + Netlifyで静的ブログサイト構築(無料)

2 min read読了の目安(約2000字

はじめに

初記事です。よろしくお願いします。

BloggerというGoogleのブログサービスを使用したブログを運営しているのですが、静的サイトジェネレーターを使ってMarkdownで記事を書くブログサイトの構築方法を見つけたので、これに挑戦してみました。

Zennでほぼ同様のことが簡単にできる上にたくさんの人たちに読んでもらえるかもしれませんが、自分のサイトでいろいろと好き勝手出来るのは魅力かなと思います。

構成

  • Hugo(テーマ:Mainroad)
    静的サイトジェネレーターです。
    速度が早いこと、Go言語を使用していることからこちらのHugoを選びました。
    テーマについては下記の記事を参考にさせてもらい、シンプルで気に入ったのでMainroadを選びました。

  • GitHub
    データ管理と、Netlifyと連携してサイトを自動更新するために使用。

  • Netlify
    無料で使えるホスティングサービスです。
    GitHubと連携して更新を検知して自動的にサイト更新もできます。
    (Continuous Deploymentを設定しておく)

ブログサイトとしての魅力

少々構築の知識が必要ではありますが、個人的には無料ブログサービスの代わりに静的ブログサイトを運営するのは十分選択肢になります。

ひとまず表示速度が高速で、ドメインパワーが強かったので書いておきます。
このあたりは状況によって変化してしまいますが。。

表示速度

Googleサーチコンソールから飛べる、PageSpeed Insightsの結果です。
シンプルに作っているBloggerのブログでも調子が良い時で80台だったので、高速です。

今後のカスタマイズでごちゃごちゃしてくるとまた変わってくるかもしれませんが。

  • モバイル
  • パソコン

ドメインパワー

サイトを構築して3日目ぐらいからこの値でした。(スクショは5日目の値)
Bloggerで作ったサイトは1年以上経ってるのに一桁なのですが(笑)

設定方法

Hugo(Mainroadテーマ)の設定

設定も下記の記事を参考にさせていただきました。

現在の設定ファイルの値は今のところ下記に記載してあります。

https://ysmlog.netlify.app/posts/mainroad-init/

NetlifyのContinuous Deploymentの設定

GitHubのmainブランチが更新されたらサイトが更新されるように設定しています。
下記以外の項目はほぼデフォルトのままだったと思います。

  1. GitHubのリポジトリを指定
  2. Publish directoryを指定
    siteディレクトリの中にHugoのコンテンツを配置したため、このようなパスになっています。
  3. Production branchを指定

構築したブログ

ベースの色設定が適当なわりに気に入っています。
カスタマイズの内容なども今後下記ブログに記載していく予定ですが、Zennとの棲み分けは悩み中です。。

https://ysmlog.netlify.app/