jiyucho

2026/04/20

コンテナで技術ブログを書く運用メモ

Astro、Markdown、devcontainer、Cloudflare Pagesを使って、ローカルで書いてpushで公開する流れを確認する。

devcontainerastroworkflow

目的

この記事は、jiyuchoの表示確認用に書いたサンプルです。本文の読みやすさ、目次、数式、コードブロック、タグ表示がどう見えるかを確認します。

ブログ運用の基本方針は単純です。

  1. devcontainerを起動する
  2. Markdownで記事を書く
  3. ローカルで表示を確認する
  4. GitHubにpushする
  5. Cloudflare Pagesで自動公開する

開発環境

開発環境はコンテナに寄せています。ホスト側にNodeや周辺ツールを細かく入れなくても、同じ環境で記事を書けるようにするためです。

make dc-up
make dc-zsh
npm run dev -- --host 0.0.0.0

lazygit と oh-my-zsh もコンテナビルド時に入るので、初回セットアップ後はすぐ作業できます。

Markdownで書く

記事は src/content/blog/*.md に置きます。公開したくない記事は draft: true にします。

---
title: "記事タイトル"
description: "記事の概要"
pubDate: 2026-04-20
tags: ["astro", "blog"]
draft: false
---

下書きをGitで管理しながら、本番には出さない運用にできます。

数式の確認

インライン数式は E=mc2E = mc^2 のように本文中に自然に入ります。

ブロック数式は次のように表示されます。

f(x)=∑n=0∞xnn!f(x) = \sum_{n=0}^{\infty} \frac{x^n}{n!}

TypeScriptの例

記事内のコードブロックはシンタックスハイライトされます。

type Post = {
  title: string;
  draft: boolean;
  tags: string[];
};

export function isPublished(post: Post) {
  return !post.draft;
}

確認したいところ

  • 一覧ページで新しい記事が上に出るか
  • 記事詳細ページで目次が表示されるか
  • 数式がKaTeXで崩れず表示されるか
  • コードブロックが横スクロール込みで読めるか
  • タグページに devcontainer、astro、workflow が生成されるか

まとめ

jiyuchoは、ノートのように軽く書けて、必要なときに数式やコードも扱える技術ブログとして運用します。