静的サイト

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

🚀 はじめに：この記事でできること この記事は、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 ✍ 初回記事の作成とローカル確認 記事を作成します： ...