大体無料の Cloudflare pages と Hugo で始める独自ドメインブログ

  • 独自ドメインじゃなきゃタダだよ！

やすいよ！

  • Markdown で書くよ！

静的サイト生成後は html/css/js なんで、すきにしたらいいんだよ！

  • GO は書かないよ！

Hugo は GO 言語で出来ているけど、簡単なカスタムはテンプレート編集だから実質ノーコード！

  • Function/Worker を使えば動的コンテンツも！（有料）

まえなら WAF としてしか使わなかったけど、ワンストップで使えて更に無料枠が大きいのでいいね！

材料

  • 独自ドメイン
  • github.com のアカウント
  • ローカル開発環境（ＷＳＬ２）
  • Cloudflare pages の契約

Hugo でサイト開発

  • Hugo は prebuild.tar.gz を extends で。落としたらパスの通ってる /usr/local/bin/ にでも放り込んで hugo version して動確。
  • hugo init yourHugoProject; cd yourHugoProject
  • テーマは git submodule add [theme-repo.git] themes/theme-repo で追加
  • テーマの config.toml から使いたい設定を hugo.toml に
  • hugo new post/1.md; nano post/1.md でハロワでも書く
  • hugo server して localhost:1313 を見に行くと出来ている

github にいれておく

  • private リポジトリでやる(ssh key で認証)
  • 初回は github で作成しておいて、そいつをタゲっていく
1
2
3
4
5
6
7

git clone [email protected]:you/repo.git
mv yourHugoProject/ ./repo/
git add . # 改訂ごとに実施
git commit -m "1st commit." # 改訂ごとに実施。ログはちゃんと書け。
git branch -M main
git remote add origin
git push -u origin main # 改訂ごとに実施

1
2
3

git add .
git commit -m "1st commit."
git push -u origin main

Cloudflare pages をつかう

要は pages が cloudflare 上で github から clone したリソースを hugo で静的サイト生成、表示してくれる。というながれ。 礼儀正しい入口は https://dash.cloudflare.com/ で、ログインしてから Workers & Pages をクリックする。

つくりかた

参照してくださいｗ→ 【Cloudflare Pages】ブログを公開したい？…5分もあれば十分だ https://zenn.dev/rivine/articles/2023-06-23-deploy-hugo-to-cloudflare-pages

メンテ

  • あとで書くｗ

ドメイン

  • あとで書くｗ
  • 浸透に時間かかんない。１０分以内に終わってる。