はじめに
この記事は，以下の内容に焦点を当てています
- Cloudflareで独自ドメインを取得する
- Github Pages + Hugoで構築したブログをCloudflare pagesに移行する
あらかじめGithub Pages + Hugoでブログを構築していることを前提としています．
ブログ執筆環境の構築は，次の記事を参考にしてください．
GithubPages + Hugo によるブログ開設（Part1） GithubPages + Hugo によるブログ開設（Part2） GithubPages + Hugo によるブログ開設（Part3）
動機
GitHub Pagesでブログを作成しましたが，独自ドメインが欲しくなったので…
お名前.comでドメインを購入するのが一番ポピュラーですが， 以前お名前.comでドメインを購入したときに維持費が高かったのと，色々オプションの宣伝が面倒だったので，安いと噂のcloudflareで購入することにしました．
Cloudflareのメリット
「使える機能が多い」
Cloudflareでドメインを購入するメリットはこれかなと思います． 特に自分が実際に触ってみて，便利だと感じたのは3つの機能です．
- 静的ページを無料で構築できる
- サーバーレスアプリケーションを無料で構築できる
- 独自ドメインのメールアドレスが使える
今回の記事では，静的ページのジェネレータを使ってブログ公開をやります．
独自ドメインのメールアドレスについては，別の記事で説明します．
Cloudflareでドメインを取得する
サイトの手順に従って購入するだけです． やり方はいっぱい転がっているので省略します．
Cloudflare Pagesにリポジトリを割り当て
購入が完了したら，コンソール画面の左メニューから「Workers & Pages」を選択します
「アプリケーションを選択する」という画面が出てくるので「Pages」を選びます．
「Gitに接続」とあるので自分のGitHubアカウントと，ブログを構築しているリポジトリを設定してください．
次にビルドの設定を行います
- プロジェクト名：Cloudflareのコンソールで使うプロジェクト名です．任意で構いません．
- プロダクションブランチ：ページに反映させるブランチを選択します．特に特別な事情がなければ
mainにします． - フレームワークプリセット：
Hugoを選択 - ビルドコマンド：フレームワークプリセットを選択すると自動で入力されます
- ビルド先ディレクトリ：Hugoのビルド先ディレクトリを指定します．Hugoの初期設定では
/publicがビルド先のディレクトリです．
もしビルド先を変更している場合は，ビルド先ディレクトリを変更してください．
また，Hugoのプロジェクトを立ち上げたのが，リポジトリのルートディレクトリではない場合は， 「ルート ディレクトリ (アドバンスド)」からHugoのプロジェクトを構築したディレクトリを指定してあげてください．
この時点で自分が使用しているHugoのバージョンを確認してください．
|
|
環境変数 (アドバンスド)の項目に，
- 変数名：HUGO_VERSION
- 値：(自分のHugoのバージョン)(自分の場合 0.144.0)
を入力してください．
ここまで完了したら，「保存してデプロイする」ボタンを押してください．
ビルドの画面に進みます．
もし何かしらのエラーでビルドできなかった場合にはここにログが表示されます．
無事に成功したら「プロジェクトに進む」を押して完了です
独自ドメインを割り当てる
これでブログは無事公開されましたが，購入したドメインがブログに適用されていません．
「プロジェクトに進む」を押すと次にやること一覧が出てきます． 「カスタムドメインを設定する」を選択しましょう．
設定画面で，購入したドメインを入力します．
「DNSの構成」は自動でやってくれるので特に操作する必要はありません．
google Search Consoleに登録する
ここまで完成したら，