Yukiya Momotsuki

【自分用覚書】このサイトのブログの書き方・公開方法

このドキュメントは、yukiya.me のブログ記事の作成から公開までの一連の流れをまとめた完全自分用の覚書です。 以下、ももつきに代わりましてCursorくんがお送りします。

1. 記事ファイルの作成

1.1 ファイルの置き場所と名前

  • 場所: プロジェクト内の src/posts/ フォルダ
  • ファイル名: YYYY-MM-DD-slug.md のような形式を推奨（例: 2026-03-10-hello-my-blog.md）
    • 日付は公開日、slug は URL や識別用の短い英数字

1.2 Front matter（先頭のメタデータ）

ファイルの先頭に --- で囲んだ YAML を書きます。

項目 必須 説明
title ○ 記事タイトル。一覧・記事ページ・OG に使われます。
description △ 一覧用の抜粋。省略時は本文の先頭 120 文字から自動生成されます。
date ○ 公開日時。表示は JST で行われます。
permalink ○ 記事の URL パス。例: /blog/hello-my-blog/
layout ○ layouts/post.njk を指定します。
tags ○ 一覧に載せるために posts を含めます。

date の書き方

  • 日付のみ: date: 2026-03-10
    → 0:00 UTC として解釈され、表示は 09:00 JST になります。
  • 日時（JST）を指定: date: 2026-03-10T00:00+09:00 または date: 2026-03-10T00:00:00+09:00
    → 日本時間の 0時 として解釈され、表示は 00:00 になります。秒は省略可能です。

Front matter の例

---
title: ブログをVibe Codingで作ってみた
description: 自分のポートフォリオサイト内に、簡単なブログ機能を作ってみました。
date: 2026-03-10T00:00+09:00
permalink: /blog/hello-my-blog/
layout: layouts/post.njk
tags:
  - posts
---

1.3 本文

2 行目の --- の直後から、Markdown で本文を書きます。

2. 使える Markdown 記法

  • 見出し: ## h2 / ### h3
  • 強調: **太字** / *イタリック*
  • リンク: [テキスト](URL)
  • 画像: ![代替テキスト](/img/ファイル名.jpg)（画像は img/ に置く）
  • インラインコード: `コード`
  • コードブロック: 言語名付きの ``` で囲む
  • リスト: - または 1. で箇条書き・番号付き
  • 引用: > 引用文
  • 表: | 列1 | 列2 | と |---||---| で作成
  • 区切り線: --- または ***

画像を使う場合は、プロジェクトルートの img/ にファイルを置き、/img/ファイル名 で参照します。

3. 公開までのワークフロー

3.1 ローカルで確認

  1. プロジェクトルートでターミナルを開く。
  2. 開発サーバーを起動する:
    npm run dev
  3. ブラウザで http://localhost:8080 を開く。
  4. 記事一覧は http://localhost:8080/blog/、個別記事は permalink で指定したパス（例: /blog/hello-my-blog/）でアクセス。
  5. ファイルを保存すると、Eleventy が自動で再ビルドするため、ブラウザをリロードすれば反映を確認できる。

3.2 本番用ビルド

npm run build
  • 出力先: _site/ フォルダ
  • Netlify はこの _site の中身をそのまま公開する。

3.3 公開（デプロイ）

  • リポジトリを Netlify に連携している場合、main など指定ブランチへ push すると自動でビルド・デプロイされます。
  • Netlify の設定は netlify.toml に記載:
    • ビルドコマンド: npm run build
    • 公開ディレクトリ: _site

まとめ

  1. src/posts/ に .md を追加し、front matter と本文を書く。
  2. 必要なら img/ に画像を置き、本文から /img/ファイル名 で参照する。
  3. ローカルでは npm run dev でプレビュー。
  4. 問題なければ push → Netlify が自動でビルド・公開。

4. 補足

  • 一覧の表示: 20 件ごとにページネーション。2 ページ目は /blog/2/、3 ページ目は /blog/3/。
  • OG 画像: 記事ページの OGP には https://yukiya.me/icon.jpg が使われます（layout で固定）。
  • メタタグ: 記事ページには fediverse:creator が @yukiyalien@cho.yukiya.me で出力されます。