PaperMod

🚀 はじめに：この記事でできること 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） 画像をキャプション付きで挿入する標準ショートコードです。 ...

🧭 はじめに：この記事で理解できること Hugo は高速で柔軟な静的サイトジェネレーターですが、フォルダ構造が分かりにくいと感じる初心者は多いです。 この記事では、以下のことを丁寧に解説します。 Hugo プロジェクトのフォルダ構造の全体像 各ディレクトリの役割 PaperMod を使う場合の注意点 GitHub Pages で運用する際に理解しておくべきポイント 補足 Hugo のフォルダ構造は「必要なものだけ作ればよい」仕組みです。最初から全部覚える必要はありません。 🗂️ 全体構造：Hugo プロジェクトの基本フォルダ まずは、Hugo プロジェクトの典型的な構造を見てみましょう。 # Hugo プロジェクトの基本構造（例） . ├─ config/ または hugo.yaml # サイト設定 ├─ content/ # 記事（Markdown） ├─ layouts/ # テンプレート（上書き用） ├─ static/ # 静的ファイル（画像・HTMLなど） ├─ assets/ # SCSS/JS（Hugo Pipes） ├─ themes/ # PaperModなどテーマ ├─ archetypes/ # 記事テンプレート └─ public/ # ビルド後の出力（自動生成） 注意 public/ は Hugo がビルド時に自動生成するため、手動で編集しないようにしましょう。 📁 1. config/（または hugo.yaml）：サイト全体の設定 Hugo の設定は config ディレクトリまたは hugo.yaml に記述します。 PaperMod を使う場合、hugo.yaml で管理するのが一般的です。 ...

🚀 はじめに：この記事でできること Hugo ＋ PaperMod ＋ GitHub Pagesで運用するブログに、Google Search Console（以下、Search Console） を導入するための完全ガイドです。 操作 → 目的 → 結果 → 注意/補足 の順で、初心者が迷いやすいポイント（URL構成・ユーザー/プロジェクトサイトの違い）も含めて整理します。 この手順を完了すると、所有権の確認が成功し、サイトマップ送信が完了、URL検査でクロール促進できる状態になります。 補足 この記事は HTMLファイルアップロード方式 で所有権確認を行い、サイトマップ登録・URL検査・運用の要点までを扱います。 🧭 前提：サイト種別とURL構成 本文着手前に、GitHub Pagesのサイト種別と公開URLを正しく把握します。これがSearch Consoleのプロパティ設定とbaseURL整合の土台になります。 操作 自サイトが ユーザーサイト か プロジェクトサイト かを確認する ユーザーサイト：https://username.github.io/ プロジェクトサイト：https://username.github.io/repository-name/ 目的 Search Console登録方式（URL プレフィックス）と、HugoのbaseURL/内部リンク/画像パス/OGPを公開URLに合わせて一貫させる。 前提 GitHub Pagesの公開設定が済んでいる（ユーザーサイト or プロジェクトサイト） 結果（この時点でできること） 以降の設定で、URL不一致による所有権確認失敗やサイトマップ404を回避できる。 注意 プロジェクトサイトは公開パスが/repository-name/ を含みます。Search ConsoleのURLプレフィックス、検証ファイルURL、サイトマップURLの末尾スラッシュとサブパスが一致しているか、常に確認しましょう。 補足：サイト種別の早見表 ユーザーサイト：https://username.github.io/（サブパスなし） プロジェクトサイト：https://username.github.io/repository-name/（サブパスあり） 🧩 前提条件の確認（Hugo設定） Search Console導入前に、Hugoの基本SEO設定（robots.txt と sitemap）を整えます。 操作 hugo.yaml（またはconfig.toml）に以下の設定を追加/確認 目的 robots.txt と sitemap.xml を自動生成し、クロールとインデックスの土台を作る。 前提 ...

🎯 この記事で得られること この記事では、Hugo + PaperMod を使ったブログの冒頭に表示される メタ情報（投稿日・更新日・読了時間・著者） を、次のようにカスタマイズする方法を解説します。 📅 投稿日 🔄 更新日 ⏱ 読了目安 ✍️ 著者（リンク付き） 🇯🇵 日本語 / 🇺🇸 英語の自動切り替え PaperMod のアップデートに強い「上書きレイアウト方式」 ポイント：PaperMod のテーマファイルは直接編集せず、 layouts/partials/post_meta.html を上書きする方法が最も安全です。 📘 1. PaperMod のメタ情報はどこで生成されている？ PaperMod の記事ページ（single.html）では、メタ情報は次の partial で生成されています。 themes/PaperMod/layouts/partials/post_meta.html このファイルを直接編集すると、テーマ更新時に上書きされてしまうため、 プロジェクト側にコピーして上書きするのが正しい方法です。 📁 2. post_meta.html をプロジェクト側にコピーする まずは PaperMod の元ファイルを確認し、プロジェクト側にコピーします。 # プロジェクトのルートで実行 mkdir -p layouts/partials cp themes/PaperMod/layouts/partials/post_meta.html layouts/partials/post_meta.html 補足：Hugo は「プロジェクト側の layouts を優先」して読み込むため、 このコピーがそのまま上書きとして機能します。 🛠 3. 日本語・英語対応のカスタム post_meta.html を作成する 以下は、メタ情報（投稿日・更新日・読了時間・著者）を、次のようにカスタマイズする 完全版 post_meta.html です。 📅 投稿日 🔄 更新日（変更がある場合のみ表示） ⏱ 読了目安 ✍️ 著者（リンク付き） 🇯🇵 日本語 / 🇺🇸 英語の自動切り替え {{- /* =============================== カスタム Post Meta（日本語/英語対応） 表示内容： 📅 投稿日 ｜ 🔄 更新日 ｜ ⏱ 読了目安 ｜ ✍️ 著者（リンク） =============================== */ -}} {{- $lang := .Site.Language.Lang | default "ja" -}} {{- $date := .Date -}} {{- $lastmod := .Lastmod -}} {{- $readingTime := .ReadingTime -}} {{- $authorName := or .Params.author .Site.Author.name "[UserName]" -}} {{- $authorURL := or .Params.authorLink .Site.Author.link "#" -}} <div class="post-meta"> {{- if eq $lang "ja" -}} <span class="post-meta-item">📅 投稿日：{{ $date.Format "2006年1月2日" }}</span> {{- if ne $lastmod $date -}} <span class="post-meta-separator">｜</span> <span class="post-meta-item">🔄 更新日：{{ $lastmod.Format "2006年1月2日" }}</span> {{- end }} <span class="post-meta-separator">｜</span> <span class="post-meta-item">⏱ 読了目安：{{ $readingTime }}分</span> <span class="post-meta-separator">｜</span> <span class="post-meta-item">✍️ 著者：<a href="{{ $authorURL }}">{{ $authorName }}</a></span> {{- else -}} <span class="post-meta-item">📅 Published: {{ $date.Format "Jan 2, 2006" }}</span> {{- if ne $lastmod $date -}} <span class="post-meta-separator">｜</span> <span class="post-meta-item">🔄 Updated: {{ $lastmod.Format "Jan 2, 2006" }}</span> {{- end }} <span class="post-meta-separator">｜</span> <span class="post-meta-item">⏱ Reading time: {{ $readingTime }} min</span> <span class="post-meta-separator">｜</span> <span class="post-meta-item">✍️ Author: <a href="{{ $authorURL }}">{{ $authorName }}</a></span> {{- end }} </div> 注意：著者リンクは front matter の authorLink: または config の .Site.Author.link で設定できます。 ...

🎯 この記事で得られること このガイドを読めば、次のことができるようになります。 GA4（Google Analytics 4）の仕組みと役割が理解できる GA4 の初期設定（プロパティ作成〜Measurement ID取得）ができる Hugo（特に PaperMod）と GA4 を正しく連携できる GitHub Pages で公開したブログのアクセス解析を開始できる 重要：PaperMod は GA4 の measurement_id を自動で読み込まないため、 extend_head.html に GA4 スニペットを追加する方法が最も確実です。 📘 1. GA4（Google Analytics 4）とは？ GA4 は Google が提供するアクセス解析ツールで、 Web サイトのユーザー行動を可視化できます。 GA4 で分かること アクセス数（PV） ユーザー数 滞在時間 流入元（検索・SNS など） ページごとの閲覧数 スマホ / PC の割合 国・地域別アクセス 補足：GA4 は旧 Google Analytics（UA）とは仕組みが異なり、 計測には Measurement ID（G-XXXXXXX） を使用します。 🌐 2. GA4 プロパティを作成する 🪜 手順 Google Analytics にアクセス https://analytics.google.com/ 左下の 管理（Admin） を開く ...

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