👻

ブログサイトを開設しました。

に公開
TypeScript
ブログ
idea

以下が新しく作成したブログサイトです。
趣味とか、ITとは関係のない仕事術をこのブログに書いていこうと思います。

https://fukagawablog2025.web.app

使用技術

このブログは下記のような構成で動作しております。

分類 技術・ツール名 役割・説明
フレームワーク Next.js 15（App Router・SSG） ReactベースのWebフレームワーク。App Router構成でルーティングやSSGを実装。
言語 TypeScript 型安全なJavaScript。Next.jsでの主要言語。
スタイル Tailwind CSS ユーティリティクラスベースのCSSフレームワーク。
  zenn-content.css Zenn風マークダウンデザインを適用する独自CSS。
開発環境 Docker ローカル開発環境。再現性を確保。
コード管理 GitHub ブログテンプレートのリポジトリは以下に記載。
CI/CD Github Actions mainブランチpush時にFirebaseへ自動デプロイ。
ホスティング Firebase Hosting 静的HTMLを配信する本番環境。
テンプレート blog-starter Vercel（Next.js公式）が配布しているブログテンプレート。

このブログの雛形は以下で公開しています。
⚠️ 本番のブログはどんどん機能を追加していきたいので、リポジトリを分けました。

リポジトリ：https://github.com/Nyxode/BlogTemplate-2025
サンプル：BlogTemplate-2025

選定理由ですが、無料でmarkdown形式のブログを作成したかったので、色々調べてこのセットになりました。「blog-starter」の立ち上げまではこちらの方を模範させていただいてます。

https://zenn.dev/miketako3/articles/9b2b1a9ec13901

🌿 元ネタ：「Next.js Blog Starter」とは

リポジトリ：https://github.com/vercel/next.js/tree/canary/examples/blog-starter
サンプル：https://next-blog-starter.vercel.app

特徴：

  • _posts/ にMarkdownを置く
  • lib/api.ts で記事一覧を読み込む
  • lib/markdownToHtml.ts でremarkを使ってMarkdown→HTML変換
  • interfaces/post.ts で型定義
  • pages/posts/[slug].tsx で記事ページを動的生成

一言で言うと、Markdownで書ける、Next.js公式の最小構成ブログテンプレートです。

私のBlogTemplate-2025 はBlog Starter をベースにして、
現代的な構成（App Router + Tailwind + Docker + Firebase）に再構成した拡張版ですね。

プロジェクト全体の概要

_posts/ 

_posts/
 ├── 0001.md
 ├── 0002.md
 ...
 └── 0011.md

ここは記事の原稿置き場。
ZennスタイルのMarkdown記法（zenn-content.css）を使用する。

out/ 

out/
 ├── index.html
 ├── posts/0001.html ...
 ├── assets/
 ├── favicon/
 ├── page/
 └── _next/

Next.jsの「output: 'export'」設定で静的エクスポートされたビルド後の公開ディレクトリ。
Firebase Hosting はここを public として使う（firebase.json の "public": "out"）。

src/ ディレクトリ

src/
 ├── app/
 │   ├── _components/   ← コンポーネント群
 │   ├── globals.css    ← 全体のCSS（Tailwind含む）
 │   ├── layout.tsx     ← ページ共通レイアウト
 │   ├── page.tsx       ← トップページ
 │   ├── posts/         ← 個別記事のルーティング
 │   └── zenn-content.css ← Zennスタイル
 ├── interfaces/
 │   ├── author.ts
 │   └── post.ts
 └── lib/
     ├── api.ts           ← 記事データ取得ロジック
     ├── constants.ts     ← 定数（サイト名など）
     └── markdownToHtml.ts ← Markdown→HTML変換処理

Next.jsのソース部分。Next.js App Router 構成なので、pages/ ではなく app/ を使っている。

Docker 関連

Dockerfile
docker-compose.yml

docker-compose up でローカルサーバー（ポート3000）を動かす。

Firebase 設定

firebase.json

Firebase Hosting の設定ファイル。
この中で "public": "out" を指定して静的ファイルをデプロイしてる。

Next.js & Tailwind 関連

next.config.js
tailwind.config.ts
postcss.config.js
  • next.config.js → 静的エクスポート用の output: 'export' 設定
  • tailwind.config.ts/js → Tailwind のカスタム設定
  • postcss.config.js → Tailwind + Autoprefixer の設定

public/ 

public/
 ├── assets/blog/
 └── favicon/

公開用の静的ファイル（画像・アイコン類）を格納。

テンプレート再利用時に修正必要なファイル

FirebaseのプロジェクトIDをそれぞれのファイルで修正する。

  • .firebaserc

    {
  "projects": {
    "default": "プロジェクトID"
  }
}

  • .github/workflows/firebase-hosting-merge.yml

    ...
with:
  repoToken: ${{ secrets.GITHUB_TOKEN }}
  firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_プロジェクトID }}
  channelId: live
  projectId: プロジェクトID

  • .github/workflows/firebase-hosting-pull-request.yml

    ...
with:
  repoToken: ${{ secrets.GITHUB_TOKEN }}
  firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_プロジェクトID }}
  projectId: プロジェクトID

GitHub側の設定

  1. Firebase Console → 「プロジェクト設定」⚙ → 「サービスアカウント」

  2. 「新しい秘密鍵を生成」 → JSONをダウンロード

  3. GitHubで：

    Settings > Secrets and variables > Actions > New repository secret

    • Name: FIREBASE_SERVICE_ACCOUNT_プロジェクトID
    • Value: JSONの中身全コピー

上記で、テンプレートを使いまわせます。

作り終えた感想

作業期間は4日ほどでした。モダン開発は慣れたらｽｽｽ…と進むのですが、Firebaseとか2年ぶりくらいに触ったら全然わからなくなっていたし、TypeScriptもページネーション部分はChatGPTに任せたりしたので、まだまだ勉強が必要だなと感じました。

開発時に作ったスクラップは以下です。

ブログ開発スクラップ

でも、1つずつ理解して、エラーで詰まったら調べて、って感じでやるといつもの開発と変わりませんでした。
基本的な機能だけ完成させて、今後もこのブログと一緒に自分の技術力を上げていこうと思います。

Discussion