HugoとCloudFlare Pagesでブログ公開

Shirakamo
エンジニアリング
HugoとCloudFlare Pagesでブログ公開
目次

このブログを公開するまでに行った作業をまとめました。
このブログは Hugo のテンプレートを用いて作成し、CloudFlare Pages で公開しています。
また画像の配信に Cloudinary を利用することで容量の削減+表示スピードアップも狙っています。
この構成ならある程度簡単にブログ公開まで辿り着くのでおススメです。

今の所どのサービスも無料枠で利用しているので、かかっている費用としてはドメイン代のみとなります。
独自ドメインに拘らないのなら無料で運用できますね。

詳細な作業内容については先達の素晴らしい記事がネット上にたくさんあるので、そちらの記事のリンクを紹介しつつこの記事では作業手順はさらっとだけ触れるのみにします。
その分自分が詰まったところは詳しめに書いていこうと思います。

利用するサービス

ブログ公開に際して利用しているサービスを以下にまとめました。
アカウント作成が必要なサービスが多いので、事前にアカウントを作ってサイトをブックマークしておくと後の作業が楽です。

  • 必須のサービス
サービス用途アカウント作成
Hugoメインで使用するツール
記事を含むサイト全体を製作するためのツール		不要
GitHubサイト全体のコード、記事を格納するリポジトリとして利用必要
CloudFlare Pagesサイトをネット上に公開するためのサービス必要
  • 必要であれば利用するサービス
サービス用途アカウント作成
Cloudinary公開されたサイトに画像を配信するためのサービス
画像もGitHub上で管理するなら不要		必要
お名前ドットコムドメインを購入するサービス
独自ドメインを設定しないなら不要		必要
Canva画像を作成するときに利用必要

全体の構成

構成の概要は記事の初めで触れましたが、全体の構成を図にすると以下のようになります。
今回利用したサービスの類似サービス ( Netlify など) を利用する場合でも同様の構成になると思います。
一度やっておくと類似サービスに乗り換える際も楽にできるようになるかもです。

blog_structure

ブログ記事の公開について具体的には、

  1. ローカルPCでHugoを利用してブログを作成し、
  2. 作成したブログを含むコード全体をGitHubのリポジトリにアップして、
  3. CloudFlare PagesとGitHubのブログリポジトリを連携して、
  4. CloudFlare Pagesでリポジトリのコードからブログサイトをビルドする設定をして公開

という流れとなります。
またお名前ドットコムで取得したドメインをCloudFlare Pagesで設定して独自ドメインとして運用しています。
画像配信については

  1. ローカルPCでCanva等を利用して画像を作成し、
  2. Cloudinaryに画像をアップロードして配信用URLを取得
  3. URLをブログに埋め込んでアクセス時に画像配信

という流れとなります。

1. GitHubの準備

上記の構成の場合、サイトを構成するコードも記事自体もGitHubで管理します。
そのためGit, GitHubの使い方には慣れておいた方が良いです。
基本個人で利用すると思うので複雑な機能を使うことはないとは思いますが…
Git, GitHubの使い方については公式のチュートリアルやサル先生に教えてもらいましょう。

ブログ開設の準備としては、この段階では以下3点をやっておきます。

  1. ローカルPCにgitをインストール
  2. GitHubのアカウントを作成
  3. GitHub上にブログサイトのリポジトリを作成

GitHubを利用する際はSSH接続を利用すると便利です。
以下で公式が方法を説明しているのでそちらを参照して設定しておくと良いと思います。

GitHubで複数アカウントを所持している場合はSSH接続の時に少しだけ別途ローカルPCで設定が必要です。
以下の記事で詳しく説明されているのでそちらを参照してください。

2. Hugoでブログ制作

Hugoは 静的サイトジェネレータ なので HTMLなどのコード群からウェブサイトをビルドするのが中心的な機能です。
ただしHugoには既に豊富なウェブサイトのテンプレートがテーマとして用意されており、それらを利用することでサイト制作の手間を一気に削減することができます。
もちろん、テンプレートを修正して自分なりのサイトを作ることも可能です（後で簡単な例を示します）。

Hugoでのテーマを利用したサイト制作についてはまずは公式のチュートリアルを一読するのが良いと思います。
インストール方法も公式サイトを見れば分かるようになっています。

サイトのカスタマイズ方法などは使用するテーマに依存するのでテーマごとのドキュメントなどを参考すると良いです。


2.1 テーマ選択

今回は比較的カスタマイズしやすそうなブログ向けのデザインとして Mainroad にしました。
Mainroadはドキュメントもしっかり用意されており、カスタマイズ方法もある程度分かるようになっています。

Mainroadの導入方法とカスタマイズ方法は上記の公式ページ以外にも色々情報が見つかると思います。
今回はこちらの記事を参考にさせていただきました。

2.2 テーマのカスタマイズ

Hugoではテーマのカスタマイズもできるようになっています。
ここではカスタマイズの例としてベースとなるHTMLにGoogle Analyticsのトラッキング用コードを入れ込んでみます。

自分の場合も こちらの記事 と同様 config.toml に設定するだけではGoogle Analytics使えなかったんですよね…
そこで記事にもあるようにHTMLのヘッダにGoogle Analyticsのトラッキングコードを直接埋め込みました。
簡単な手順は以下となります。

  1. (root)/themes/mainroad/layouts/_default/baseof.html を (root)/layouts/_default/baseof.html にコピー
  2. コピーした baseof.html の <head> 要素の直下にGoogle Analyticsのトラッキングコードをコピー

これでテーマの baseof.html が自分が作成したものにオーバーライドされ、GAによるトラッキングが有効化されます。
HTML要素自体をカスタマイズしたいときは上記の方法を別のページで真似すれば大抵はできるはずです。

2.3 CSSのカスタマイズ

色や文字の大きさなどをカスタマイズしたいときはCSSをいじることになります。
基本的には (root)/static/css/ 以下にカスタマイズ用のCSSファイルを配置することで自分なりのCSSを作成することができます。
自分の場合は (root)/static/css/custom.css を作成し、 config.toml で

customCSS = ["css/custom.css"]

と指定することで有効化しています。
ちなみにカスタムCSSはテーマのCSSを上書きします。

個人的には文字の大きさとサムネイル画像の見え方を変えたかったので主にそちら関連をいじっています。
以下の記事を参考にさせていただきました。

2.4 インラインHTMLの有効化

Hugoはver0.60以降から記事のMarkdown内に直接HTMLを記述してもサイト上では表示されなくなりました。

上記の記事にあるように config.toml に以下の要素を記述してインラインHTMLを有効化しました。

[markup] # インラインHTMLを有効化
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true

これが原因でもしもアフィリエイトの簡単リンクが反映されなくて焦りました…

上記まで行った段階で先ほど作成したGitHubのリポジトリにPushしておきます。
カスタマイズはいくらでも凝れる所なので、気が向いたら少しずつアップデートしていこうと思います。

3.Cloudinaryを利用した画像配信

画像の配信は Cloudinary を利用します。
手順は簡単です。

  1. Cloudinary のアカウントを作成してログインする
  2. ローカルPCで画像を作成する
    1. リサイズや WebPフォーマット 変換もローカルで行っておきます
  3. Cloudinaryに画像をアップして配信用のURLを取得する
  4. 配信用URLを記事に埋め込む

CloudinaryのMedia Libaryにおいて配信用URLは以下の図の矢印の部分からコピーできます。

dist_url

コピーしたURLを ![image](コピーしたURL "alt") のように記事内に記述することで記事内に画像を埋め込めます。

実のところ、Cloudinariは上記の配信用URL内にパラメータを記述することでリサイズなど様々な処理を行うことができます。

ただしFreeプランではアップロードできる容量や処理回数に上限があるため、ローカルでできるだけの処理は行いCloudinaryでは配信するだけにしています。
Cloudinaryの料金体系は以下の記事にまとまっています。

4.CloudFlare Pagesでブログ公開

GitHubのリポジトリをCloudFlare Pagesとリンクさせることでブログを公開します。
基本的にログインして Pages のセクションに行けば画面の説明通りに設定していくだけです。
詳細は以下を参照してください。

流れとしては以下の手順です。

  1. CloudFlare にアクセスしてアカウント作成&ログイン
  2. ログイン後のダッシュボード右側のメニューから Pages を選択
  3. 後は画面の指示に従ってGitHubのリポジトリと接続

基本的には上記の設定で公開できるのですが、CloudFlare Pagesでデフォルトで利用しているHugoがver0.54と大分古いため問題が生じる可能性もあります。
そこで環境変数で自分のローカルPCにインストールしたHugoと同じバージョンに合わせておいた方が良いです。

5.独自ドメインの設定

こちらの作業は必須ではありません。

上記の手順でCloudFlare Pagesにてブログを公開した場合、URLは https://<リポジトリ名>.pages.dev となります。
これを お名前ドットコム で取得した独自ドメインに変更します。