Hugo

🚀 はじめに この記事で理解できること 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 はこれらを自動化してくれる“優秀なアシスタント” のような存在です。 ...

🚀 はじめに この記事でわかること Markdown（マークダウン）がどんな書き方なのか なぜブログや技術記事でMarkdownがよく使われるのか Markdownがないとどんな不便があるのか Hugo＋PaperModでブログを書くときにどう役立つのか こんな人向け 中学生〜大人まで、IT知識がほとんどない初心者 「Markdownってよく聞くけど、結局なに？」を知りたい ブログやメモをシンプルに書ける方法を探している 初心者でも安心な理由 専門用語をできるだけ使わず、身近なたとえで説明 この記事だけで全体像がつかめる構成 Hugo や PaperMod を使う人にも役立つ内容 ✅ 概要解説 Markdownとは何か “記号を使って文章の構造を表す、シンプルな書き方” です。 たとえば、見出しを作りたいときは「#」、箇条書きは「-」を使います。 # 見出し - 箇条書き **太字** このように、特別なソフトを使わずに、記号だけで文章を整えるのがMarkdownの特徴です。 何のためにあるのか Markdownは、文章を「読みやすく・書きやすく・崩れにくく」するために生まれました。 HTMLのような難しいタグを書かなくていい メモ帳のようにサクッと書ける どの環境でも同じように表示される GitHub・ブログ・チャットなど多くのサービスで使える 特にHugoやPaperModのような静的サイトジェネレーターでは、Markdownが標準の書き方になっています。 Markdownがないとどうなるのか Markdownがない世界を想像すると… 見出しを書くたびに <h1>タイトル</h1> のような長いHTMLタグを書く必要がある 箇条書きも <ul><li>項目</li></ul> と書かないといけない メモ帳で書いた文章をWeb用に整えるのが大変 つまり、文章を書くたびに“作業”が増えるのです。 Markdownはこれを一瞬でシンプルにする魔法のような書き方です。 どんな場面で使えるのか Markdownは、実はあなたの身の回りの多くで使われています。 ブログ記事（Hugo / PaperMod / Cloudflare Pages） GitHubのREADME Qiita・Zennの記事 Notion・Obsidianなどのメモアプリ Slack・Discordのメッセージ装飾 特にブログでは、Markdownで書いた記事がHugoによってHTMLに変換され、PaperModテーマで美しく表示されます。 💡 小話・豆知識・逸話 1) Markdownは「読みやすさ」を最優先に作られた Markdownを作ったのはJohn Gruberというアメリカの技術系ライター。 彼は「生の文章がそのまま読める書き方」を目指してMarkdownを作りました。 実際、Markdownの文章はそのまま読んでも違和感がないのが特徴です。 2) 世界中のエンジニアが愛用する理由 エンジニアは「余計な作業を減らす」のが大好き。 Markdownは、文章を書くときの無駄な操作を極限まで減らすので、世界中で愛されています。 ...

🚀 はじめに この記事でわかること 動的サイト（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 版か確認します。 ...

🚀 はじめに：この記事でできること Android端末上のTermux環境で、Git/GitHubを安全に使うための実践フローを、SSH鍵作成→GitHub登録→ghログイン→clone/commit/pushまで手順化します。 さらに、Hugo（PaperMod） の記事を GitHub Actions → GitHub Pages で自動公開する最小構成も併せて整えます。 補足 本記事は 初心者が混乱しやすい前提（Termux独自パッケージ、共有ストレージ権限、拡張Hugoの有無）を先に明示し、各Stepを 操作 → 目的 → 結果 → 注意/補足 の順で進めます。 🧭 前提：環境と基本方針 Termuxは通常のLinuxと異なる点があり、公式パッケージ（pkg）優先・外部配布物を直接入れないことが安全運用の鍵です。共有ストレージ権限やパスの違いも混乱の元になるため、最初に整理します。 操作 Termuxアプリをインストールし、起動 以降のセットアップは pkg を用いる（aptは可能だが推奨はpkg） 目的 Termux環境を最新化し、Git/SSH/gh を公式ビルドで導入して安定運用する 前提 Android端末でTermuxが正常動作（ネット接続可） ファイル操作は $HOME（例：~/）を基本に行う 結果（この時点でできること） 後続のインストールや鍵作成が 権限・互換性の問題を回避 しながら進められる 注意 Termuxで外部レポジトリや他ディストリのdebを直接導入すると破損の原因になります。必ず Termux公式のパッケージ を利用しましょう。 📱 Step 1：Termuxの初期セットアップ（更新・権限・導入） Termuxを最新化し、共有ストレージ権限を付与、必要なパッケージを導入します。 操作（目的／前提を読んでから実行） 目的 パッケージを最新化し、ストレージ操作とGit/GitHubに必要なコマンド群を整える 前提 Termuxが起動可能 インターネット接続が安定している # パッケージの最新化 pkg update && pkg upgrade -y # 共有ストレージへのアクセス（初回のみ） termux-setup-storage ls ~/storage/shared # 必要パッケージの導入（Git / OpenSSH / GitHub CLI） pkg install git openssh gh -y # （任意）クリップボード操作を使う場合 pkg install termux-api -y 結果（この時点でできること） ...

🚀 はじめに：この記事でできること この記事は、Hugoのショートコード（Shortcodes）を使って、Markdown記事の表現力を高めるための完全ガイドです。 組み込みショートコードの使い方から、自作ショートコードの作成、PaperModでの最適化までを「操作→目的→結果→注意/補足」の順で、初心者でも迷わない構成で解説します。 補足 ショートコードは、YouTube埋め込み・画像最適化・カスタムHTMLの挿入・再利用可能なパーツ化などを簡単に実現できます。WordPressのショートコードに似ていますが、Hugoは高速でテンプレート連携が容易なのが特徴です。 🧭 前提：対象と環境 このガイドは Hugo + PaperMod + GitHub Pages でブログを運用する初心者〜中級者を対象に、記事内の表現力と保守性を高めるための実践的な手順をまとめています。 操作 作業環境：Hugo（最新安定版）・PaperModテーマ・GitHub Pagesで公開済み 記事はMarkdown（.md）で作成し、ショートコードを適宜挿入 目的 記事品質と生産性を両立：繰り返し使う表現をショートコード化し、統一感と更新容易性を確保する 結果（この時点でできること） 以降のセクションで、組み込みショートコードの活用から自作までをスムーズに実施できる 注意 テーマに同名ショートコードが存在する場合、プロジェクト側が優先されます。競合時は命名や配置を見直してください。 🧩 基本の使い方（組み込みショートコード） 組み込みショートコードの使い方を、操作→目的→結果→注意で確認します。この記事の例はPaperModでもそのまま使えます。 YouTube動画を埋め込む 操作 記事内で youtube ショートコードに動画IDを渡して埋め込みます。 目的 YouTube動画をレスポンシブ対応で簡単に埋め込む。 結果（この時点でできること） 記事本文に動画プレイヤーが表示され、モバイルでも崩れにくい。 注意 ページ表示速度への影響を抑えるため、動画の数は最小限に。必要なら折りたたみ（details）と併用して視認性を保つ。 操作（例） 🖼️ 画像ショートコード（figure） 画像をキャプション付きで挿入する標準ショートコードです。 ...

🧭 1. Hugoのマルチ言語機能とは？ Hugoは config に言語設定を追加するだけで、 言語別のURL生成・翻訳ファイル・メニュー・コンテンツ管理 を自動で行ってくれます。 Hugoのマルチ言語の特徴 言語ごとにフォルダを分けて管理できる 言語別のメタデータ（title, description）を設定可能 i18n翻訳ファイルでUI文言を切り替えられる 言語スイッチャー（Language Switcher）も簡単に実装できる 補足 Hugoは「多言語サイト」を最初から想定して設計されているため、WordPressよりも構築が簡単なケースもあります。 📁 2. ディレクトリ構成を理解する Hugoでは、言語ごとにコンテンツを分けるのが基本です。 例：日本語（ja）と英語（en）の場合 # content ディレクトリの構成例 content/ ja/ _index.md about.md en/ _index.md about.md 注意 言語フォルダ名は config の languages で設定したキーと一致させる必要があります。 ⚙️ 3. configファイルで言語設定を追加する Hugoのマルチ言語設定は config.yaml（または toml/json）に記述します。 基本的な設定例 # config.yaml defaultContentLanguage: ja # デフォルト言語 defaultContentLanguageInSubdir: true # /ja/ を付けるかどうか languages: ja: languageName: "日本語" weight: 1 title: "マイサイト（日本語）" en: languageName: "English" weight: 2 title: "My Website (English)" 補足 weight は言語の優先順位です。小さいほど優先されます。 ...

🧭 はじめに：静的サイトはSEOに弱いって本当？ 「静的サイトはSEOに弱い」という言葉を聞いたことがあるかもしれません。 しかし、これは半分正しくて、半分誤解です。 結論から言うと、 静的サイトはSEOに弱くありません。むしろ高速で軽量なため、SEOに強い側面が多いです。 ではなぜ「弱い」と言われるのか？ どうすれば静的サイトでも検索上位を狙えるのか？ この記事では初心者にもわかりやすく、丁寧に解説します。 🧱 静的サイトとは？（まずは前提を整理） 静的サイトとは、事前に生成されたHTMLファイルをそのまま配信するサイトのことです。 Hugo・Jekyll・Next.js（SSG）・Astro などが代表的です。 静的サイトの特徴 表示が高速（サーバー処理が不要） セキュリティリスクが低い GitHub Pages や Netlify で無料公開できる CMSのような動的処理は苦手 補足 「静的＝古い」というイメージがありますが、近年はJAMstackの普及で再評価されています。 🔍 静的サイトはSEOに弱いと言われる理由 実は、静的サイトそのものが弱いのではなく、運用方法によって弱く見えるだけです。 よくある誤解ポイント 更新頻度が低くなりがち → CMSのように管理画面がないため、更新が面倒と感じる人が多い。 内部リンク設計が弱い → 自動で関連記事を生成しないテーマもある。 メタタグや構造化データを自分で設定する必要がある → 初心者はここでつまずきやすい。 サイトマップやrobots.txtの設定を忘れがち → 動的CMSでは自動生成される部分。 注意 これらは「静的サイトだから弱い」のではなく、設定を怠ると弱くなるだけです。 🚀 静的サイトがSEOに強い理由 実は、Googleが重視する指標の多くは静的サイトが得意とする部分です。 静的サイトがSEOに強いポイント 表示速度が速い（LCP改善） サーバー負荷が少ない モバイル表示が安定しやすい 不要なスクリプトが少なく、読み込みが軽い セキュリティが高く、エラーが少ない 特にHugoやPaperModは、Core Web Vitalsで高得点を取りやすいのが大きなメリットです。 🛠️ 静的サイトで必ずやるべきSEO対策（初心者向け） ここからは、静的サイトでもSEOを強くするための実践的な方法を紹介します。 🗺️ 1. サイトマップとrobots.txtを整備する Hugoなら自動生成されますが、設定を確認しておきましょう。 # hugo.yaml のSEO関連設定 enableRobotsTXT: true # robots.txt を出力 canonifyURLs: true # 正規URLに整形 sitemap: changefreq: daily # 更新頻度 priority: 0.5 filename: sitemap.xml # 自動生成される 補足 GitHub Pages でも問題なく動作します。Search Console への登録も忘れずに。 ...

🚀 はじめに：この記事で学べること 本記事では、Hugo + GitHub Pages でブログを運用している初心者の方向けに、 GitHub Actions を使って自動デプロイする仕組みを、できるだけ分かりやすく解説します。 GitHub Actions が何をしているのか Hugo のビルドがどのように自動化されるのか gh-pages ブランチへ自動デプロイされる仕組み 実際に使えるワークフローのテンプレート 補足 「自動デプロイ」は、記事を更新するたびに手動で hugo → git push → gh-pages へ反映…という作業をなくすための仕組みです。 🧱 Step 1：GitHub Actions の基本を理解する GitHub Actions は、GitHub が提供する 自動実行の仕組み（CI/CD） です。 🔧 何が自動化されるのか？ Hugo のインストール サイトのビルド（hugo コマンド） public/ の生成 gh-pages ブランチへのデプロイ これらを YAMLファイル（ワークフロー） に書いておくことで、GitHub が自動で実行してくれます。 📁 Step 2：ワークフローの配置場所を知る GitHub Actions の設定ファイルは、リポジトリ内の以下に置きます。 .github/workflows/deploy.yml 注意 ディレクトリ名 .github/workflows/ を間違えると、GitHub Actions が認識しません。 ⚙️ Step 3：Hugo 自動デプロイ用ワークフローの例 以下は、Hugo サイトを GitHub Pages に自動デプロイする最小構成の例です。 ...