Nyxode / fukagawa

 開発環境について


コード管理
GitHib


CI /CD
Github Actions

開発環境
Docker

ホスティング
Firebase Hosting

ブログ機能
Next.js (SSG)

デザイン
Tailwind CSS



 詳細情報
Next.jsの公式テンプレートである「blog-starter」を使用する。

Next.js 15（つまり App Router構成、src/app/ 配下でページ管理）
エディタはzenn-editorを使用する。
記事は /src/_posts に置いてる

コード管理	GitHib
CI /CD	Github Actions
開発環境	Docker
ホスティング	Firebase Hosting
ブログ機能	Next.js (SSG)
デザイン	Tailwind CSS

Nyxode / fukagawa

 blog-starterについて「blog-starter」とはNext.jsの公式テンプレートのひとつであり、ブログを作成するためのスターターキットである。
Next.js Blog Example with Markdown
next.js/examples/blog-starter at canary · vercel/next.js
下記コマンドで簡単に作成できる。
npx create-next-app --example blog-starter
中に入っている機能は以下のようなものである。
Markdown（.md）ファイルから記事を生成する機能
日付やタグ、タイトルのメタデータを扱う仕組み（gray-matter）
記事一覧や詳細ページのルーティング
ダークモード切り替え対応
SSG（静的サイト生成）での高速ビルド

 blog-starter の基本構造blog-starter/
├── components/          ← UI部品（Header, Layout, Dateなど）
│   ├── layout.js
│   ├── header.js
│   └── date.js
│
├── lib/                 ← ロジック系の共通関数
│   ├── api.js           ← 投稿データを取得する関数
│   └── markdownToHtml.js← MarkdownをHTMLに変換する関数
│
├── pages/               ← 各ページ
│   ├── index.js         ← トップページ（記事一覧）
│   ├── posts/
│   │   └── [slug].js    ← 記事詳細ページ
│   └── _app.js          ← 全ページ共通の設定
│
├── posts/               ← 記事データ（Markdown）
│   ├── hello-world.md
│   └── another-post.md
│
├── public/              ← 画像とか静的ファイル
│   └── favicon.ico
│
├── styles/              ← CSS（グローバルやモジュール）
│   ├── globals.css
│   └── utils.module.css
│
├── package.json
└── next.config.js

/posts フォルダにある .md ファイルがブログ記事になる

lib/api.js が fs（ファイルシステム）を使ってMarkdownを読み取る

gray-matter でMarkdownのメタ情報（タイトル・日付・スラッグなど）を抽出

remark と remark-html でMarkdown → HTMLに変換

pages/index.js で記事一覧を表示

pages/posts/[slug].js で個別記事ページを生成（SSGでビルド時に作られる）

Nyxode / fukagawa

zenn-editorについて

zenn-editor は、Zenn（ゼン） という開発者向けの技術ブログ／本のプラットフォームで使われている、Markdownベースのエディタのこと。

GitHub - zenn-dev/zenn-editor at main

ローカル環境でZennを書くためのツールである。

zenn-editor を使うと：

Zenn で使える拡張Markdown（:::message など）をプレビューできる
絵文字や数式（KaTeX）も確認できる
本番環境（zenn.dev）と同じ見た目で確認できる

使用方法

CLIツールの導入
```
npm install zenn-cli@latest
```
ローカル環境でエディタを起動
```
npx zenn preview
```
記事を作成
```
npx zenn new:article
```
→ articles/ ディレクトリに Markdown ファイルができる。

🪴 ステップ1：CLIインストール後の状態

npm install zenn-cli@latest

your-project/
├── node_modules/
│   └── zenn-cli/
├── package.json
├── package-lock.json
└── （他のファイル）

node_modules/ の中に zenn-cli が追加されるだけ。

🌿 ステップ2：Zennの初期化

npx zenn init

your-project/
├── articles/         ← 記事用フォルダ
│   └── example.md    ← サンプル記事
├── books/            ← 本（連載）用フォルダ
│   └── example-book/
│       ├── config.yaml
│       └── example.md
├── images/           ← 画像保存用
│   └── example.png
├── node_modules/
├── package.json
└── README.md

Zenn専用のフォルダ構造が自動で作られる。

✏️ ステップ3：記事を作るとき

npx zenn new:article

articles/
├── example.md
└── my-first-article.md

→ articles/ の中に1つ新しい .md ファイルができる。

---
title: "記事のタイトル"
emoji: "😺"
type: "tech" # or "idea"
topics: ["zenn", "nextjs"]
published: false
---

my-first-article.md の冒頭にはメタ情報が自動で入ってる

💻 ステップ4：プレビューする

npx zenn preview

→ ブラウザで http://localhost:8000 を開くと、

zenn-editor（Zenn公式プレビュー環境）が起動して、記事が見られる。

コマンドテンプレート

mkdir zenn-blog
cd zenn-blog
npm init -y
npm install zenn-cli@latest
npx zenn init

zenn-blog/
├── articles/
├── books/
├── images/
├── node_modules/
└── package.json

空のディレクトリで実行を行った場合は上記のフォルダが出来上がる。

その他Zenn公式の機能

パッケージ名	役割
zenn-cli	記事・本を管理、プレビュー、デプロイするためのコマンドラインツール
zenn-editor	プレビュー画面を提供する Next.js ベースのエディタ
zenn-markdown-html	Zenn の独自MarkdownをHTMLに変換
zenn-embed-elements	Zennで使える埋め込み要素（Tweet, YouTube等）のDOM構成を提供

Nyxode / fukagawa

 Front MatterについてZenn 形式の Markdown というのは、
通常の Markdown に加えて「Front Matter（フロントマター）」って呼ばれるメタデータをファイルの先頭に持っている。
---
title: "はじめてのZenn記事"
emoji: "✨"
type: "tech"
topics: ["nextjs", "react"]
published: true
---

# こんにちは
これはZenn記事です！

この「---で囲まれた部分」が Front Matter。
ここには記事のタイトルとかタグとか、メタ情報が入ってる。

Nyxode / fukagawa

gray-matterについて

gray-matter は、 Front Matter を パース（分解） するライブラリ。

つまり、Markdownファイルを読み込むときに下記を実行する

Front Matter 部分 → JavaScriptオブジェクトに変換
本文部分 → Markdownのまま保持

下記のファイルを読み込むと以下のように出力される。

---
title: "はじめてのZenn記事"
emoji: "✨"
type: "tech"
topics: ["nextjs", "react"]
published: true
---

# こんにちは
これはZenn記事です！

import matter from "gray-matter";
const file = matter(markdownText);
console.log(file.data); // → { title: "はじめてのZenn記事", emoji: "✨", ... }
console.log(file.content); // → "# こんにちは..."

Nyxode / fukagawa

 remark-htmlとはremark-html はMarkdown の本文を HTML に変換するライブラリ。
remark という Markdown パーサのプラグインのひとつ。
たとえば # こんにちは を <h1>こんにちは</h1> に変換してくれる。