【Hugo + Cloudflare Pages】ブログを作って公開したい？…10分もあれば十分だ

2023/6/17(土) 「【エンジニア・LT会&勉強会】エンジニアの輪 at 大阪」のLTにて発表させていただいた資料です。

Transcript

1. 【Hugo + Cloudflare Pages】 ブログを作って公開したい? …10分もあれば⼗分だ つかもと（@kwn_tky） 2023/06/17(⼟) 
2. ⾃⼰紹介 つかもと ‧塚本 貴也 ‧Twitter  ‧@kwn_tky ‧Zenn  ‧@kwntky ‧趣味  ‧フェス  ‧ライブ 株式会社Rivine (リヴァイン) ‧2022年11⽉〜設⽴ ‧取締役 ‧Webエンジニア  ‧Kotlin / Java / Scala とか  ‧TypeScript / Angular / React   https://www.rivine.jp/ ‧中⼩SESにて客先常駐   ↓ ‧⼤⼿ソフト会社で社内SE   ↓ ‧⼈材系ベンチャーの⾃社サ開発   ↓ ‧受託開発＆開発⽀援 (フルリモ /   リモートメインのSES) ← NOW !
3. Zennの宣伝 ‧【ほぼ0円！】Hugo + Cloudflare Pages + AWS でホームページをリニューアル　
 　https://zenn.dev/rivine/articles/2023-05-31-update-rivine-hp
 
 ‧【Hugo】ブログを作りたい？...5分あれば⼗分だ  https://zenn.dev/rivine/articles/2023-06-12-create-hugo-blog ‧【Cloudflare Pages】ブログを公開したい？...5分あれば⼗分だ  近⽇公開予定 ‧Rivine テックブログ → https://zenn.dev/p/rivine
4. いざ本題へ ‧とにかくまずはブログを作りたい ‧技術選定どうしよう？？ WordPress？ Next.js ？ ノーコード？ ローコード？ フルスクラッチ？ Gatsby？ JamStack？
5. そうだHugoにしよう Hugo Go製のWebフレームワーク（SSG） ‧ビルドが爆速  ‧学習コストが⾼くない ‧導⼊のしやすさ ‧開発体験の良さ ‧コンテンツをCMSとして使える ‧コンテンツデータを Markdown 形式で管理 ‧WordPress のように様々なテーマが⽤意 ‧SSGのポピュラーなフレームワークのひとつ  ‧Jamstackのサイトでは、2番⽬のスター数 > The world’s fastest framework
 > for building websites
 
 「世界最速でウェブサイトを構築するフレーム ワーク」 らしい

6. Hugoでブログを作っていく # Hugo のインストール $ brew install hugo # バージョン確認。インストール完了 $ hugo version hugo v0.113.0+extended darwin/arm64 BuildDate=unknown # 新規プロジェクトを作成（hugo-blog） $ hugo new site hugo-blog Congratulations! Your new Hugo site is created in /Users/xxxxx/hugo-blog.
7. Hugoでブログを作っていく # プロジェクトのルートへ移動 $ cd hugo-blog # Hugo のテーマを適用（ 今回は Ananke というテーマを追加） $ git init $ git submodule add https://github.com/theNewDynamic /gohugo-theme-ananke themes/ananke # テーマの設定を追記 $ echo "theme = 'ananke'" >> hugo.toml
8. 記事を追加する # 記事を新規作成（article ファルダへ slug が `1` のコンテンツを追加） $ hugo new article/1.md $ vi content/article/1.md --- title: "ブログはじめました" date: 2023-06-12T00:48:57+09:00 featured_image: "/images/article/1_blogger_man.png" --- ## ブログ開設！ というわけで、この度、ブログをはじめました。 記事の内容を Markdown 形式で記載
9. 記事の設定など $ touch content/_index.md $ vi content/_index.md # トップページに表示させる共通のコンテンツファイルを作成 # ※ content フォルダ直下に作成する $ touch content/_index.md $ vi content/_index.md --- description: "気ままで、テックな、ゆる投稿" --- # テック寄りなブログです 技術発信や気づき、日々の備忘録として 不定期でブログを書いています。
10. ブログ全体の設定など baseURL = 'http://localhost:1313/' languageCode = 'ja' languageName = 'Japanese' defaultContentLanguage = 'ja' hasCJKLanguage = true title = 'つかもとのゆるブログ' theme = 'ananke' [params] text_color = 'dark-gray' background_color_class = 'bg-navy' author = 'つかもと' favicon = '/images/profile.png' site_logo = '/images/profile.png' [[params.ananke_socials]] name = 'twitter' url = 'https://twitter.com/kwn_tky' [[params.ananke_socials]] name = 'facebook' url = 'https://www.facebook.com/takaya.tsukamoto.1' # xxx $ vi hugo.toml # Hugo の設定ファイルを修正 $ vi hugo.toml # ブログで利用する画像を追加 static └── images ├── article │ └── 1_blogger_man.png └── profile.png
11. ブログの起動＆動作確認 # ローカルサーバーを起動 $ hugo server Start building sites … ... Built in 83 ms ... Web Server is available at http://localhost:1313/ (bind address 127.0.0.1) Press Ctrl+C to stop http://localhost:1313/ ✨
12. ひとまずブログは作れた ‧続いて、作ったブログをすぐにでも公開したい ‧ホスティング先どうしよう？？ レンタルサーバー？ AWS ？ GitHub Pages？ Netlify？ GCP？ Vercel？
13. そうだ Cloudflare Pages にしよう Cloudflare Pages ↓無料（Freeプラン）でここまでできる↓ ‧リクエスト数/データ転送量制限なし ‧サイト数の制限なし ‧プレビュー環境があり、アクセス制限もできる ‧GitHub と連携して CI/CD してくれる ‧SSL の設定が⼀瞬でできる ‧商⽤利⽤が可能 ‧ドメインの移管/管理が簡単 ‧Cloudflare Pages Functions を使うと、サーバーサイドの処理も実装できる
14. Cloudflare Pages へデプロイしていく https://dash.cloudflare.com/sign-up    メールアドレスとパスワードを⼊⼒し サインアップをクリック ↓ メールアドレスへ認証メールが 送信されるので、添付のURLより アカウントの有効化を⾏います。 まずは Cloudflare のアカウントを作成  
15. Pages の新規作成 Workers & Pages → Pages を選択し「Git に接続」 をクリック ※先程作ったHugoの  プロジェクト(hugo-blog)を  GitHub のリポジトリへ  事前に反映しておきましょう
16. リポジトリと連携 GitHub 側で許可設定をし、Cloudflare側にて「セットアップの開始」をクリック
17. ビルド&デプロイのセットアップ ・フレームワークプリセット 　Hugo ・ビルドコマンド 　hugo -b $CF_PAGES_URL ・環境変数 　・HUGO_VERSION = 0.113.0 　・CF_PAGES_URL = https://hugo-blog-wo9.pages.dev/ 上記内容を設定後「保存してデプロイする」をクリック
18. ブログをデプロイ サイトのビルド＆デプロイが実⾏されます
19. いざ確認！！！ https://hugo-blog-wo9.pages.dev/ つかもとのゆるブログ
20. まとめ ‧Hugo タイパめっちゃいい👍  ‧ビルド爆速、テーマで速攻構築、開発体験良い、学習コスト低め ‧Cloudflare Pages コスパめっちゃいい💸  ‧爆速デプロイ、無料で利⽤できることがかなり多い  ‧個⼈的にホスティングサービスのコスパNo.1 ‧サイトの構築〜公開まで最短10分ほどで作業可能🚀  ‧※あくまで、本資料の⼿順通りに滞りなくスムーズにいく前提 ‧というわけで、最＆⾼ and 最＆強 ！！！✨
21. ご清聴ありがとうございました󰢛