↓ メインコンテンツへスキップ

Hugo + Blowfish + Cloudflare Pages で無料のウェブサイトを作る

Web Hugo Cloudflare-Pages
目次

静的サイトジェネレータ（SSG）を使えば、オシャレなサイトを無料で簡単に作れます！

今回は

という構成で作っていきます。

今回使用するツール・サービス
#

今回使用するツール・サービスについて解説します。今すぐに構築したい場合は環境へ飛んでください。

  • Hugo

    The world’s fastest framework for building websites

    https://gohugo.io/

    静的サイトジェネレータ（SSG）と呼ばれるソフトウェアの一種です。似たようなものに Gatsby、Jekkyll、Astro などがあります。

    Wordpress のような CMS では、アクセスされる都度、動的にページを作成してユーザに合わせた表示にしたり、管理者用の管理画面があったりしますが、SSG は Markdown などをもとに HTML を事前に生成します。

    SSG を使うメリットとしては、セキュリティ的な問題が発生しにくいことと、動作がとても軽いことが挙げられます。

    CMS は基本有料でのホスティングになりますが、SSG で作った Web サイトは HTML ファイル等を一度作ってしまえば、あとは配信するだけなので、無料でホスティングできるサービスもあります（ホスティングサービスについては後述します）。

  • Blowfish

    A powerful, lightweight theme for Hugo.

    https://blowfish.page/

    Blowfish は Hugo のテーマです。検索、メッセージボックス、グラフなどを使うことができ、見た目が好みだったので Blowfish を使っています。

    他にも Hugo のテーマはありますので、Hugo Themes を見てみるのも良いと思います。

  • GitHub

    ソースコードを置いておけるサービスです。便利な機能がたくさんあるのですが、今回の用途ではデータの置き場所を借りているだけになってしまっているので、サービスについて詳しくは解説しません。

  • Cloudflare Pages

    Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.

    https://pages.cloudflare.com/

    Cloudflare Pages は CDN で有名な Cloudflare が提供しているホスティングサービスです。比較的新しいサービスで、無料枠の自由度が高いことが特徴です。

    Cloudflare Pages では、

    • 同時にビルドできるのは1つまで

    • ビルドは一ヶ月あたり500回まで

    という制限はありますが、

    • サイト数は無制限

    • 帯域幅も無制限

    • アクセス制限も無料

    • 商用利用も可能

    となっており、無料でも十分使うことができます。さらに、Cloudflare ならではの CDN も使えます。

環境
#

  • Windows 11

用意するもの
#

  • GitHub アカウント

  • Cloudflare アカウント

  • （独自ドメインで運用する場合）独自ドメイン

Hugo のインストール
#

https://gohugo.io/installation/windows/ を見ながらインストールしていきます。

Hugo は GitHub の Release ページ やパッケージマネージャからインストールできるようです。

今回は WinGet でインストールしてみます。

コマンドプロンプトや PowerShell から、

winget install Hugo.Hugo.Extended

でインストールできます。

hugo version

でバージョンを確認できたらインストールできています。

Git のインストール
#

次のテーマを導入する作業で Git が必要になるため、Git もインストールしておきましょう。

今回は省略します。

Hugo でサイトを作り、Blowfishを導入する
#

Hugo では、hugo new site <site-name> で新しいサイトを作ることができます。

これを使って、サイトを作ってみましょう。

# サイトを作りたいディレクトリに移動
cd <path/to/dir>

# Hugo の新しいサイトを作る
hugo new site <site-name>

# Blowfish テーマの導入
cd <site-name>
git init
git submodule add -b main https://github.com/nunocoracao/blowfish.git themes/blowfish

ここから、テーマ設定ファイルの作成をしていきます。

まずは、プロジェクトのルートにある hugo.toml ファイルを削除します。

次に、config/_default フォルダを作ります。このフォルダに、themes/blowfish/config/_default/ 配下にある toml ファイルをすべてコピーして入れましょう。

そして、今コピーしたファイルのうちの一つである config/_default/hugo.toml を少し編集します。（5行目あたり）

-# theme = "blowfish" # UNCOMMENT THIS LINE
+theme = "blowfish" # UNCOMMENT THIS LINE
# baseURL = "https://your_domain.com/"

ここまで完了したら、hugo server -D（※ -D: 下書き状態のページも表示する）を実行して表示されたアドレス（http://localhost:1313）にアクセスしましょう。

Blowfish のサイトが完成しているはずです！

日本語化
#

この状態だと英語の設定になっているので、日本語の設定にしていきます。

  • hugo.toml
-defaultContentLanguage = "en"
+defaultContentLanguage = "ja"
  • languages.en.toml → ファイル名を lauguage.ja.toml にして編集（dateFormatはお好みで）
disabled = false
-languageCode = "en"
+languageCode = "ja"
-languageName = "English"
+languageName = "Japanese"
weight = 1
title = "Blowfish"

[params]
-  displayName = "EN"
+  displayName = "JA"
-  isoCode = "en"
+  isoCode = "ja"
  rtl = false
-  dateFormat = "2 January 2006"
+  dateFormat = "2006年1月2日"
  # logo = "img/logo.png"
  # secondaryLogo = "img/secondary-logo.png"
  # description = "My awesome website"
  # copyright = "Copy, _right?_ :thinking_face:"
  • menus.en.toml → ファイル名を menus.ja.toml に変更

カスタマイズ
#

Hugo や Blowfish は、ページの設定をカスタマイズできるようになっています。今回は私が使用したカスタマイズや使いそうなカスタマイズを紹介します。

コメントアウト（#）されている場合もあるので、解除を忘れずに！

  • hugo.toml

    +[params.article]
+  showTableObContents = true
+  isCJKLanguage = true

    • showTableContents: 目次の表示を有効化

    • isCJKLanguage: 文字数のカウントを日本語（中国語、韓国語）仕様に変更

  • language.ja.toml

    • title: ブログのタイトル。

    • params

      • dateFormat: 日付の形式。2006年1月2日 や 2006-01-02 など

      • logo: サイトのロゴ。assets以下の画像のパスを指定。

      • description: 検索エンジン表示時等に使用されるサイトの説明文。

      • copyright: サイト左下に表示される権利表記。

    • params.author（著者関連の設定）

      • name: 著者名

      • image: 著者のイメージ画像

      • headline: 著者の簡単な説明文

      • bio: 自己紹介文

      • links: 使用しているサービスをアイコンで表示する。配列開始と終了の角カッコのコメントアウトを忘れないように！

  • menus.ja.toml: ヘッダーメニュー、フッターメニューの設定をするファイル。

    ここらへん↓をコメントアウトして表示させると投稿したページにアクセスしやすくなります。

    #[[main]]
#  name = "Blog"
#  pageRef = "posts"
#  weight = 10

  • archetypes/default.md: hugo new <page-name>で新しいページを作成したときに使用するページのテンプレート。私は以下のような感じにしました。

    +++
date = '{{ .Date }}'
lastmod =  '{{ .Date }}'
draft = true
title = '{{ replace .File.ContentBaseName "-" " " | title }}'
tags = []
+++

    軽く説明すると、

    • dateは作成日時（Formatで）

    • lastModは更新日時

    • draftは下書き状態かどうかを示しており、trueにすれば非公開になる。

    • titleはページのタイトル

    • tagsはタグで、tags = ['hoge', 'fuga']のように使う。tagsはどこかで別の場所で登録する必要はなく、適当に書けば自動で追加される。（この仕様があるためにタグのURLとタグ名を別にするのが難しくなっているが、それについては今回は詳しく解説しない）

    という感じです。

ページの追加
#

新しいページは、postsに追加していくとよいです。ページを追加する場合は、以下のコードを実行するのがよいです。

hugo new posts/<page-name>.md

これによって、archetypes/default.mdのテンプレートが使われた状態でcontent/posts/<page-name>.mdにページが追加され、ブラウザからはhttp://localhost:1313/posts/<pagename>/でアクセスできます。

リポジトリの作成、プッシュ
#

ひとまずサイトは完成しましたね！

ここから、公開するための作業に入っていきます。

まずはGitHubにリポジトリを作って、プロジェクトをプッシュします。今回は詳しく解説しません。

Hugo の.gitignore のリンクを置いておきます → https://github.com/github/gitignore/blob/main/community/Golang/Hugo.gitignore

Cloudflare Pagesの設定
#

Cloudflare Pagesの設定をしていきます。

Cloudflare にログインして、Compute (Workers) → Pages より、Import an existing Git repository を Get started します。

Connect GitHub で GitHub と連携していきます。

リポジトリを選択して、Install & Authorize します。

Begin setup します。

良さげな感じに入力して、デプロイ！

公開できました！

簡単に公開できますねえ

ページがもうできています

あとは、GitHubにコミットしてページを変えていくだけでどんどん更新できますね！

独自ドメインにする
#

せっかくなので、独自ドメインで公開したいですよね？ここからは独自ドメインで公開する設定を見ていきます。

ドメインは別で取っているものとします（通常有料です）。私はドメインをCloudflare Registrarで取っているため、他のサービスで取得している場合とは手順が違うかもしれません。

Cloudflareでは独自ドメインをカスタムドメインと呼ぶらしいです。それでは設定していきましょう。

ダッシュボードの Compute(Workers) から、作成したサイトを選択

Custom domains タブから、カスタムドメインを設定できます。

使用したいドメインを入力します

DNS レコードの CNAME を変えるようです。

設定してからアクセスできるようになるまで、最大48時間かかるとのことなので、気長に待ちましょう。

最大48時間とは言っていたものの、私の環境では5分程度で独自ドメインからアクセスできるようになりました。

やったね！