ブログを作りました。
技術スタック
フレームワーク・基盤
- 静的サイトジェネレーター: Hugo Extended v0.140.2
- テーマ: GitHub-style
- ホスティング: Cloudflare Pages
- 開発環境: Dev Container (VSCode Remote Container)
フロントエンド
- 検索機能: Hugo内蔵の検索機能
- コメント機能: Gitalk（GitHub Issues連携）
- アナリティクス: Google Analytics 4 (GA4)
- OGP対応: カスタム画像生成
CI/CD
- 自動デプロイ: Cloudflare Pages
- ワークフロー管理: GitHub Actions
- Issue to Post変換
- プレビューデプロイ
- 自動OGP画像生成
コンテンツ管理
- 記事管理: GitHub Issues連携
- 画像処理: ImageMagick
- フォント: Noto Sans CJK
- フォーマット: Markdown
- バッチ：https://github.com/aidenwallis/cloudflare-pages-badges
インフラ・その他
- バージョン管理: Git
- 依存関係管理: Go Modules
- ドメイン管理: Cloudflare DNS
- ライセンス: MIT License
- RSS: Hugo内蔵のRSSフィード機能
セキュリティ
- HTTPS: Cloudflare SSL
- 認証: GitHub OAuth（Gitalk用）
- 環境変数管理: Cloudflare Pages環境変数
ブログ作ったわけと選定要件
SSGで作りたくて色々探してたけど、最終的に Hugo で作ることにしました。
もともとmarkdownで作成できるのを要件に探してた。 NuxtとかNext.jsでやろうとしたが、フロントまわりのあーだこーだが大変理解し難く、 Hugoはテーマが無料で結構公開されてたから選びました。 特に採用している Github-styleはいいね。技術者ぽい。
ホスティングは Cloudflare PagesでGithubとつなげて自動デプロイするようになってます。
ブログのページ自体はGithubのissueをGithubActionsでmarkdownファイルとしてコミットするようにしてます。
コメントもGitalkとかいうのでGithubIssueを経由してコメントができるようなってます。 が、シークレットを公開しないといけないので、本当にいいのか…という気持ちではある。
OSSでREADMEとかによくあるバッチを入れたかったので、 cloudflare workers に https://github.com/aidenwallis/cloudflare-pages-badges 立てて監視してもらうようにしてます。
作成のあーだこーだ
めっちゃ cursor composer を活用しました。ほとんどコードは書いてないで aiにまかせて試行錯誤してました。 正直、これなかったら普通にゲームしてたので、かなり個人的革命。 Github Copilotさよならして cursor課金するようにしました。
cloudflare pagesのビルドが変えれない
NuxtとかNext.jsであーだこーだしているところと同じリポジトリで作業しているのが原因なのか、ビルドの設定が更新されなくなってしまった。
wrangler.toml で buildこまんと 定義しても pagesではだめだよと怒られるので諦めた。
Goolge analitiycs で特に困って production envじゃないと有効にならないのに buildでそこがうまく設定されなくて 環境変数で渡すようにした。
一応公式は で productionになるとは言っていた。