きっかけ

元々記録をつける用途として、はてなブログ, Zenn, Qiita, note などを使用していた。
しかし、使用用途の不一致で定着することなく統一もできていなかった。
『すべてのジャンルに対応する』という目的では、Scrapboxが最適解であるような気がしていた反面、長めの文章を記録する用途には合わないと思っていた。

そんな中、インターネットのお友達数人が独自ドメインのブログを共有していて、自分のサイトだったら全部自由じゃんということで、触発される形で作ることにした。

用意

Hugo

インストールしておくと後々便利
実際の環境では v0.101.0 を使用しています。
https://gohugo.io/getting-started/installing/

Git

インストールする
Apple Gitでもいいとおもう(試してない)
https://git-scm.com/

GitHub

アカウント持ってなければ作る
https://github.co.jp/

SSH接続の設定もする(参考)
https://qiita.com/shizuma/items/2b2f873a0034839e47ce

Cloudflare

アカウント持ってなければ作る
https://pages.cloudflare.com/

独自ドメイン

どこからでもいいので持ってなければ取得する
この記事中では、さくらのドメインで取得したドメインを使用する
https://domain.sakura.ad.jp/

作成

スタートアップ

いろいろすっ飛ばせるテンプレートを作ってあるのでそれを使用する
https://github.com/Gattxxa/hugo-theme-fuji-customized

Download ZIP でダウンロードして解凍する
解凍したフォルダは適切な名前に変更しておく

config.tomlの設定

./config.toml の中身、以下の項目を設定する

[Required]
- baseURL
[Recommended]
- title
- author
- subTitlte
- menu.link
[Optional]
- showWordCounter
- showReadTime
- showLicenseInFooter
- showLicense
- showToc
- license
- licenseLink

baseURLには使用する独自ドメインを設定すること
(e.g. baseURL = "https://blog.gattxxa.org/")

ローカル環境での確認 (スキップ可能)

以下のコマンドを実行する

$ hugo server

http://localhost:1313/ でアクセスできるようになる
変なところなく良い感じだったらOK

GitHubにpush

先に GitHub でリポジトリを作っておく
Public, Privateどっちでもいい

以下のコマンドを実行する

$ git init
> Initialized empty Git repository in /FilePath/.git/

$ git add .

$ git commit -m "first commit"
> [master (root-commit) abc1234 first commit
> x files changed, y insertions(+)

$ git branch -M master

$ git remote add origin git@github.com:Username/repository.git

$ git push -u origin master

以降のpushは $ git push のみでOK

Cloudflare Pagesにデプロイ

プロジェクトを作成

Cloudflareのダッシュボードを開く
https://dash.cloudflare.com/

左側のサイドメニューからPagesを選択
Create a project(プロジェクトを作成) → Connect to Git(Gitに接続)

GitHubと連携してなければする、連携の際にアクセス権の与え方を選択できるがどちらでもよい
指定リポジトリにのみアクセス権を与える場合には、先のリポジトリを指定し忘れないように注意
※アクセス権を更新する場合は、 GitHubのConfigure から編集可能

Begin setup(セットアップの開始) で次に進む

Param	value
Project name	※可能な範囲で自由につけて良い
Framework preset	Hugo
Variable name	HUGO_VERSION
Value	0.101.0

これ以外の部分は手を加えなくてよい
Hugoのバージョンに関して、Cloudflare Pagesは自動的にextended versionが使われるっぽい？

Save and Deploy(保存してデプロイする)

ビルドとデプロイが成功すると、URLが表示される
アクセスすると表示が崩れたページが表示されるがそれで問題ない

独自ドメインを設定

Cloudflareのダッシュボードを開く
https://dash.cloudflare.com/

左側のサイドメニューからPagesを選択
Project name → Custom domains → Set up a custom domain

作成予定のドメインを入力
※もしサブドメインを使用するなら、サブドメイン込みで入力する
Continue

右側の My DNS provider(自分の DNS プロバイダー) を使用する
Begin CNAME setup(CNAMEセットアップを開始)

『Name(名前)』と『Target(ターゲット)』がコピーできる画面になる
さくらのドメインコントロールパネルを開きゾーンを編集する

エントリ名	タイプ	データ	DNSチェック	TTLの指定
Name(名前)	CNAME	Target(ターゲット).	✓

エントリ名には、『Name(名前)』でコピーした文字列
データには、『Target(ターゲット)』でコピーしたものを貼り付けたもに末尾にドットを付けた文字列
(e.g. hogepiyo.pages.dev.)

追加と保存を忘れずに

Cloudflareに戻り、Check DNS records(DNSレコードを確認) をクリック
ちょっと待つと独自ドメインからアクセスできる

余談

※1
このままの設定だとテスト環境→本番環境の手順を踏まないで公開することになってるので注意

※2
サブモジュール機能を使った良い感じのHugoテーマ適応方法があるけど、弄る場所がおかしいのか、css, htmlの反映が思った形でされなかったり、サーチで同じ記事が複数ヒットしたりしたので、それを使わないこの形になった

Gattxxa / 独自ドメインの備忘録を作る