静的サイト

🚀 はじめに：この記事でできること 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 版か確認します。 ...

🚀 はじめに：この記事でできること この記事は、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とは？（まずは全体像を理解する） Hugo は Go言語で作られた静的サイトジェネレーター（SSG） です。 Markdownで書いた記事を HTML に変換し、高速に Web サイトを生成できます。 Hugoの特徴 とにかくビルドが速い（数百記事でも一瞬） サーバー不要（静的ファイルなのでどこでもホスティング可能） Markdownで記事を書くだけ テーマが豊富（PaperMod、Stack、LoveIt など） GitHub Pages / Netlify / Cloudflare Pages と相性抜群 補足：Hugo は CMS ではありません。WordPress のように管理画面はなく、ファイルベースで管理します。 ⚡ Hugoで何ができるのか？ Hugo はブログだけでなく、以下のようなサイトにも向いています。 🔹 ブログ・技術メモ Markdownで書けるため、エンジニアやクリエイターに人気。 🔹 企業サイト・LP 高速でセキュアなため、企業サイトにも採用例多数。 🔹 ドキュメントサイト Hugo公式テーマ「Docsy」など、ドキュメント向けテーマも豊富。 🔹 ポートフォリオサイト 画像や作品をまとめるサイトも簡単に構築できます。 🆚 Hugoと他のツールの違い（WordPress / Jekyll / Next.js） 初心者がつまずきやすいポイントを比較しながら整理します。 🔸 Hugo vs WordPress（CMS） 項目 Hugo WordPress サイト生成 静的 動的 セキュリティ 高い 低め 速度 爆速 遅くなりがち 管理画面 なし あり 運用コスト ほぼ無料 サーバー代が必要 注意：管理画面が欲しい人は WordPress の方が向いています。 ...

このガイドのゴール：Hugo + PaperMod を使ったブログを GitHub Pages に公開し、以降は記事を push するだけで自動更新できる状態にする。 ✅ 前提条件（必要な環境） Git と Hugo（Extended版） をインストール済み GitHubアカウントを保有 コマンドラインが使える（macOS/Linux/WSL いずれもOK） Extended版が必要な理由：PaperModなど一部テーマはSCSSのコンパイルにExtended版を使います。 🛠️ Hugoサイトの新規作成 hugo new site blog --format yaml # 新規Hugoサイト（設定ファイルをYAMLで作成） cd blog git init # Gitリポジトリを初期化 🎨 PaperModテーマの導入 最も簡単なのは Git Submodule でテーマを取り込む方法です。 git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod hugo.yaml にテーマを指定します： theme: ["PaperMod"] 注意：GitHub Actions でビルドする際は actions/checkout の submodules: true を必ず設定してください（後述）。 代替案：Hugo Modulesでテーマを管理する方法もあります（hugo mod init → module.importsにPaperModを指定）。慣れるまではSubmoduleが分かりやすいです。 📝 Hugoの基本設定（hugo.yaml） 最低限の設定例を示します。後から拡張できます。 baseURL: "https://username.github.io/blog/" # 後で必ず自分の公開URLに合わせて変更 languageCode: "ja-jp" title: "My Hugo Blog" theme: ["PaperMod"] paginate: 10 outputs: home: ["HTML", "RSS", "JSON"] params: defaultTheme: "auto" # ダーク/ライト切替 ShowShareButtons: true ShowReadingTime: true ShowCodeCopyButtons: true showtoc: true # 記事内目次 images: ["images/og-image.png"] # OGP用 author: "HNEST" menu: main: - identifier: archives name: Archives url: /archives/ weight: 10 - identifier: tags name: Tags url: /tags/ weight: 20 ✍ 初回記事の作成とローカル確認 記事を作成します： ...