GitHub Pages

🚀 はじめに：この記事でできること Cloudflare は「Webサイトを高速化し、セキュリティを強化し、安定して公開する」ための強力なサービスです。世界中に分散したサーバー網を活用し、あなたのサイトをユーザーに近い場所から安全に届けてくれます。 この記事を読むと、次のことができるようになります。 Cloudflare の基本的な仕組みと役割が理解できる GitHub Pages や自作アプリに Cloudflare を導入できる DNS 設定や CDN の基礎がわかる 初心者がつまずきやすいポイントを事前に回避できる この記事の対象読者は次のような方です。 Web 公開に興味がある GitHub Pages や Hugo でブログを運用したい Python・Linux・アプリ開発に興味がある セキュリティや高速化を簡単に実現したい 専門用語はできるだけ噛み砕いて説明しますが、「独自ドメイン」「DNS」「GitHub Pages」といった用語は最低限登場します。わからない用語があれば、その都度立ち止まって確認しながら読み進めてください。 🧭 前提：必要な環境と想定する読者 Cloudflare を使い始める前に、最低限そろえておきたい前提条件を整理します。 必要なもの 独自ドメイン（例：example.com） Cloudflare アカウント 公開したい Web サイトの URL（GitHub Pages や自前サーバーなど） 想定する読者レベル ブラウザでの Web サービス登録・設定ができる DNS やドメインの概念はなんとなく聞いたことがある コマンドラインは最低限触ったことがある程度でもOK 補足 独自ドメインをまだ持っていない場合は、先にドメイン取得サービスでドメインを取得しておく必要があります。 💡 概要：Cloudflareの役割とメリット Cloudflareとは何か？ Cloudflare は、世界中に分散したサーバー網（CDN）を使って、あなたの Web サイトを高速・安全に届けるサービスです。ユーザーとあなたのサーバーの間に入り、通信を最適化・保護してくれます。 主な役割は次の3つです。 CDN（高速化）：世界中のユーザーに近いサーバーからコンテンツを配信する DNS（ドメイン管理）：高速で安定した DNS サーバーとして機能する セキュリティ：DDoS 対策・Bot 対策・WAF などで攻撃から守る 何が便利なのか？ Cloudflare を導入すると、次のようなメリットがあります。 ...

🧭 はじめに：静的サイトは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 に自動デプロイする最小構成の例です。 ...

このガイドのゴール：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 ✍ 初回記事の作成とローカル確認 記事を作成します： ...