Cloudflare Pages

🚀 はじめに この記事で理解できること CI/CD（シーアイ・シーディー）とは何か 自動デプロイの仕組みが“なんとなくイメージできる” なぜ便利なのか・使わないとどうなるのか Hugo や Cloudflare Pages のような静的サイトでも使える理由 こんな人向け 中学生〜大人まで、IT知識がほとんどない初心者 「CI/CDってよく聞くけど、結局どういうこと？」を知りたい 自分のブログやアプリを自動で更新できる仕組みに興味がある 初心者でも安心な理由 専門用語はできるだけ身近なたとえで説明 このページだけで全体像がつかめる構成 難しいコードは使わず、イメージ中心で理解できる ✅ 概要解説 CI/CDとは何か CI/CD は、ソフトウェア開発の世界でよく使われる言葉で、 CI（Continuous Integration）＝継続的インテグレーション CD（Continuous Delivery / Deployment）＝継続的デリバリー／デプロイ の略です。 一言でいうと、「コードを変更したら、自動でテストして、自動で公開してくれる仕組み」 です。 たとえるなら、“自動で料理をチェックして配膳してくれるキッチン” のようなもの。 料理（コード）をキッチンに置く（Gitにプッシュ） 自動で味見（テスト） 問題なければ自動でお皿に盛り付けて提供（デプロイ） という流れです。 何のためにあるのか CI/CD の目的は 「ミスを減らし、作業を速くし、安心して更新できるようにする」 こと。 人間の手作業を減らす（ミスが減る） 更新が速くなる（数秒〜数分で公開） 同じ手順で毎回動く（安定） チームでも個人でも使える（Gitと相性が良い） 特に静的サイト（Hugo など）では、記事を書いて GitHub に push するだけで自動公開できるため、ブログ運営がとても楽になります。 CI/CDがないとどうなる？ もし CI/CD がないと、更新のたびに… ローカルでビルド サーバーにログイン ファイルをアップロード 設定を調整 動作確認 といった手作業の連続になります。 これらは、 ミスしやすい 時間がかかる 作業が面倒で更新が止まりがち という問題を生みます。 CI/CD はこれらを自動化してくれる“優秀なアシスタント” のような存在です。 ...

🚀 はじめに この記事でわかること 動的サイト（Dynamic Website）とは何かと、静的サイトとの違い 動的サイトがなぜ必要になるのか、使うと何ができるのか 実際の例（ブログ・EC・会員サイト） で、イメージをはっきりつかむ こんな人向け 中学生〜大人まで、IT知識がほとんどない人 「動的サイトって、何が動いてるの？」をやさしく知りたい人 初心者でも安心な理由 身近なたとえと図解イメージでやさしく説明 このページだけで全体像が完結（最後に参考リンクもまとめ） このブログ自体は Hugo（静的サイトジェネレーター）+ PaperMod（テーマ）+ Cloudflare Pages（公開） という静的サイトの構成です。 記事の途中で、静的でも一部を“動的っぽく”する方法にも触れます。 ✅ 概要解説 動的サイトとは何か 見る人・タイミングによって、ページの中身が変わるサイトのこと。 例：ログインしている人だけに「購入履歴」を表示、朝は「おはよう」、夜は「こんばんは」と表示、在庫数をリアルタイム表示…など。 静的サイト：完成済みの出来上がったページ（HTMLファイル） をそのまま配信 動的サイト：見る直前に「ページを調理」 して配信（サーバーやAPIが計算してHTMLを作る） 何のためにあるのか 人によって内容を変えたい（ログイン状態・購入履歴・おすすめ表示） よく変わるデータを表示したい（在庫数、天気、ニュース、ランキング） ユーザーからの入力に応じたい（検索、投稿、コメント、予約） 動的サイトがないとどうなるのか 同じ内容しか出せない：全員に同じページ。会員限定ページやマイページが作りにくい 更新の手間が大きい：在庫や価格の手動修正が増える 双方向のやり取りが弱い：検索／投稿／予約といった入力→反応が苦手 どんな場面で使えるのか（具体例） ブログ／ニュースサイト：管理画面で記事を投稿 → 自動でトップに最新記事を表示 ECサイト：ユーザーごとにカートや購入履歴、在庫数を表示 学習サイト：ログイン後に学習進捗やおすすめ教材を表示 社内ポータル：部署や権限に応じて見える情報を出し分け 💡 小話・豆知識・逸話 1) 「動的＝動くアニメ」ではない “動的”はアニメーションのことではなく、ページ内容が状況で変わるという意味。 アニメーションは見た目の動き（フロントエンド）、動的は内容の変化（多くはサーバーやデータベース） の話です。 2) 動的の“調理場”はどこ？ サーバーで調理（SSR）：PHP、Ruby、Python、Node.js などのサーバーサイドが HTML を生成 ブラウザで調理（CSR）：JavaScript が API からデータを取り、画面で組み立て ハイブリッド：最初の一皿はサーバー、追いソースはブラウザ、など両方のイイとこ取り 3) 静的でも“ちょい動的”は実現できる 静的サイト（Hugo + Cloudflare Pages）でも、外部のAPIやフォームサービスを使えば、 検索フォーム／問い合わせ／コメント／閲覧数カウントなどを後付けできます。 「全部を動的に」ではなく、必要なところだけ動的にするのが最近のトレンドです（Jamstack）。 ...

🚀 はじめに この記事でわかること 静的サイトとは何か（HTMLファイルをそのまま配信する仕組み） なぜ速くて安全なのか（サーバー処理が不要） 動的サイトとの違い（WordPressなどとの比較イメージ） どんな場面で役立つのか（ブログ・ポートフォリオ・企業サイトなど） Hugo × Cloudflare Pages との相性が良い理由 こんな人向け 中学生〜大人まで、IT知識がほとんどない初心者 「静的サイトって聞くけど、何が“静的”なの？」と疑問に思っている人 Webサイトの仕組みをやさしく理解したい人 初心者でも安心な理由 専門用語はできるだけ身近なたとえで説明 このページだけで全体像がつかめる構成 Hugo や Cloudflare Pages を使う人にも役立つ内容 ✅ 概要解説 静的サイトとは何か あらかじめ作っておいた“完成済みのページ”を、そのまま配るサイトのことです。 Webサイトには大きく分けて2種類あります。 種類 仕組み 例 静的サイト 事前に作った HTML ファイルをそのまま配信 企業サイト、ブログ、ポートフォリオ 動的サイト アクセスのたびにサーバーがページを生成 WordPress、SNS、ECサイト 静的サイトは、完成したファイル（HTML/CSS/JS）を置いておくだけで動きます。 サーバー側で計算したり、データベースを読んだりする必要がありません。 何のためにあるのか 静的サイトは、次のようなメリットを得るために使われます。 とにかく速い → サーバー処理がないので、読み込みが早い 安全性が高い → データベースがないので攻撃されにくい 壊れにくい → “ただのファイル”なので障害が起きにくい 運用が簡単 → 更新はファイルを置き換えるだけ 特に Hugo のような静的サイトジェネレーターを使うと、Markdown から自動で HTML を生成できるため、初心者でも扱いやすくなります。 静的サイトジェネレーターがないとどうなるのか もし静的サイトジェネレーターがなかったら… すべてのページを手作業で作る必要がある → 100ページあれば100個の HTML を管理することに 更新が大変 → 共通部分（ヘッダー・フッター）を全部書き換える必要 高速配信が難しい → 動的処理が増えるほど、読み込みが遅くなる 静的サイトジェネレーターは、これらの課題を自動化してくれる便利な仕組みです。 ...

🚀 はじめに：この記事でできること Hugo と PaperMod で作ったブログを、Cloudflare Pages を使って高速・無料で公開する方法を、初心者向けにわかりやすくまとめたガイドです。 この記事を読むと、次のことが理解できます。 Hugo + PaperMod + Cloudflare Pages の相性が良い理由 ローカル → GitHub → Cloudflare Pages の公開までの全体像 初心者がつまずきやすいポイントと回避方法 🧭 前提：必要な環境と対象読者 Cloudflare Pages で公開する前に、最低限そろえておきたい環境を整理します。 必要な環境 Hugo Extended v0.153.1 がローカルにインストール済み ※PaperMod v8.0 は SCSS を使うため Extended 版が必須 GitHub アカウント（push / pull ができる状態） Cloudflare アカウント（無料プランでOK） 想定する読者 コマンドは最低限なら使える GUI ベースの設定があると安心 「とにかく簡単に静的サイトを公開したい」人 💡 概要：Hugo + PaperMod + Cloudflare Pages の相性が良い理由 Hugo（静的サイトジェネレーター） Go 製でビルドが高速 Markdown で記事を書ける PaperMod などテーマが豊富 PaperMod（Hugo テーマ） 軽量・高速 ブログ向けの機能が充実 SCSS を使うため Hugo Extended が必須 Cloudflare Pages（ホスティング） 無料で使える グローバル CDN による高速配信 GitHub 連携で自動デプロイ HTTPS 証明書も自動発行 組み合わせるメリット git push するだけで自動デプロイ CDN による高速配信 無料枠が広く個人ブログに最適 Hugo のビルド設定が簡単 📱 Step 1：ローカルに Hugo + PaperMod 環境を用意する 1. Hugo Extended をインストール Windowsの場合 1. Hugo Extended の ZIP をダウンロード Hugo の公式 GitHub リリースページへアクセスします。 👉 https://github.com/gohugoio/hugo/releases (github.com) 2. ダウンロードするファイルを間違えないこと Windows 用の Extended 版は次のような名前です。 hugo_extended_0.153.1_windows-amd64.zip ※ `extended` と `windows-amd64` が入っているものを選ぶのがポイント。 3. ZIP を展開し、任意のフォルダに置く 例： `C:\Tools\Hugo\` など、わかりやすい場所に `hugo.exe` を置きます。 4. PATH を通す 1. Windows の検索で「環境変数」と入力 2. 「環境変数の編集」を開く 3. 「Path」を選択 →「編集」 4. `C:\Tools\Hugo\` を追加 5. OK を押して閉じる macの場合 brew install hugo インストール後、次で Extended 版か確認します。 ...