2026-10-27 · Projects

astro-blog: a personal blog that gives content back to files

No database, no dynamic backend — every post, note and site setting is a file in a repository. A purely static personal blog built with Astro.

astro-blog: a personal blog that gives content back to files

Many personal blogs eventually lose to maintenance: databases to back up, software to upgrade, and one day the server expires and years of writing vanish with it. astro-blog starts from a plain idea — content is files. Posts are Markdown, notes are Markdown, site settings are JSONC, and everything lives in a single Git repository. If the repository exists, the blog exists; moving house means cloning it and building once more.

It is built with Astro, and the build output is purely static files that can live on any static host: GitHub Pages, Cloudflare Pages, EdgeOne Pages, or the most ordinary web space.

What it is made of

Content as files

src/content/posts/ holds posts in per-language folders, src/content/notes/ holds short notes, and a few JSONC files in src/data/ keep the site-wide settings: site info, navigation, the about page, service lists. There is no database and no runtime query — at build time everything is compiled into static pages.

Pure static generation

On every build, Astro renders Markdown to HTML and generates a separate page set for each language. Speed depends only on the host’s CDN, and security stays naturally simple: there is no dynamic interface to attack, because a page is just a file.

Five languages

The site ships with Simplified Chinese, Traditional Chinese, English, Japanese and Korean. Every post can exist in five versions, and the interface copy is organized per language too, so switching languages gives readers a consistent whole-site experience rather than a translated title.

Design language

Floating capsule navigation

At the top floats a capsule-shaped navigation bar with a frosted-glass feel; the current page is marked by a small bubble that slides as you move between sections. The dark-mode toggle carries the site’s signature symbol, ◐, and can follow the system or be switched by hand.

Typography and whitespace

Body text is typeset for reading first: comfortable line height, restrained heading levels, syntax-highlighted code blocks. Mobile spacing is tuned separately — a single post on a phone drops the rounded container in favor of divider lines, keeping the same character as the desktop view.

Who it is for

  • Writers who want a long-term, self-controlled site instead of being locked into a platform;
  • Engineers comfortable with Git who accept that publishing means committing a file;
  • Authors writing for readers in more than one language.

If you would rather have a ready-made online editing experience, its sibling project astro-blog-admin fills exactly that gap. The next article looks at how this blog organizes its five languages.

2026-10-27 · 프로젝트 소개

astro-blog: 콘텐츠를 파일로 돌려주는 개인 블로그

데이터베이스도, 동적 백엔드도 없습니다. 글과 노트와 사이트 설정이 모두 저장소 안의 파일인, Astro로 만든 순수 정적 개인 블로그입니다.

astro-blog: 콘텐츠를 파일로 돌려주는 개인 블로그

많은 개인 블로그는 결국 유지보수에 집니다. 데이터베이스는 백업해야 하고, 프로그램은 업그레이드해야 하며, 어느 날 서버가 만료되면 몇 년치 글이 함께 사라집니다. astro-blog의 출발점은 소박합니다——콘텐츠는 곧 파일입니다. 글은 Markdown, 노트는 Markdown, 사이트 설정은 JSONC, 전부가 하나의 Git 저장소 안에 있습니다. 저장소가 있으면 블로그가 있고, 이사는 클론해서 다시 빌드하면 끝입니다.

Astro로 만들었고 빌드 결과물은 순수 정적 파일이라 GitHub Pages, Cloudflare Pages, EdgeOne Pages는 물론 가장 평범한 웹 호스팅에도 올릴 수 있습니다.

무엇으로 이루어졌나

콘텐츠 즉 파일

src/content/posts/는 언어별 폴더에 글을, src/content/notes/는 노트를, src/data/의 JSONC 파일 몇 개는 사이트 전체 설정(사이트 정보, 내비게이션, 소개 페이지, 서비스 목록)을 담습니다. 데이터베이스도 런타임 조회도 없이, 빌드 시점에 모든 것이 정적 페이지로 컴파일됩니다.

순수 정적 생성

빌드할 때마다 Astro가 Markdown을 HTML로 렌더링하고 언어별로 페이지를 생성합니다. 속도는 호스팅의 CDN에만 달려 있고, 보안은 자연히 단순합니다——공격할 동적 인터페이스가 없고, 페이지가 곧 파일 자체이기 때문입니다.

다섯 가지 언어

사이트에는 중국어 간체, 중국어 번체, 영어, 일본어, 한국어 다섯 언어가 내장되어 있습니다. 모든 글은 다섯 가지 버전을 가질 수 있고, 인터페이스 문구도 전부 언어별로 정리되어 있어 언어를 바꾸면 제목만 번역된 페이지가 아니라 사이트 전체가 일관된 언어 환경을 제공합니다.

디자인 언어

떠 있는 캡슐 내비게이션

페이지 위에는 프로스트 글래스 질감의 캡슐형 내비게이션이 떠 있고, 현재 페이지는 미끄러지듯 이동하는 작은 버블로 표시됩니다. 다크 모드 토글 버튼에는 사이트의 상징인 ◐ 기호가 쓰이며, 시스템을 따르거나 직접 전환할 수 있습니다.

타이포그래피와 여백

본문은 읽기를 최우선으로 조판했습니다. 편안한 행간, 절제된 제목 단계, 문법 강조가 적용된 코드 블록. 모바일 간격은 따로 다듬어, 휴대폰에서는 글 컨테이너의 둥근 모서리를 없애고 구분선으로 바꿔 데스크톱과 같은 분위기를 유지합니다.

이런 분께 맞습니다

  • 플랫폼에 묶이지 않고 장기적으로 직접 통제할 수 있는 개인 사이트를 원하는 저자;
  • Git으로 파일을 관리하는 데 익숙하고 “발행 = 파일 커밋”을 받아들일 수 있는 엔지니어;
  • 여러 언어의 독자를 지원해야 하는 저자.

바로 쓸 수 있는 온라인 편집 경험을 원한다면 자매 프로젝트인 astro-blog-admin이 그 빈틈을 채웁니다. 다음 글에서는 이 블로그의 다국어가 어떻게 조직되는지 살펴봅니다.

2026-10-27 · プロジェクト紹介

astro-blog:コンテンツをファイルに返す個人ブログ

データベースも動的バックエンドもなし。記事もノートもサイト設定も、すべてリポジトリ内のファイル——Astro で構築した純粋な静的個人ブログです。

astro-blog:コンテンツをファイルに返す個人ブログ

多くの個人ブログは最終的に「保守」に負けます。データベースのバックアップ、ソフトウェアの更新、そしてある日サーバーの期限が切れ、数年分の文章が一緒に消えてしまう。astro-blog の出発点は素朴です——コンテンツはファイルである。記事は Markdown、ノートは Markdown、サイト設定は JSONC、すべてが 1 つの Git リポジトリの中にあります。リポジトリがある限りブログは存在し、引っ越しはクローンして再ビルドするだけです。

Astro で構築され、ビルド成果物は純粋な静的ファイル。GitHub Pages、Cloudflare Pages、EdgeOne Pages、あるいはごく普通のレンタルスペースなど、どんな静的ホスティングにも置けます。

何でできているか

コンテンツ即ファイル

src/content/posts/ に言語別フォルダで記事を、src/content/notes/ にノートを、src/data/ の JSONC ファイルにサイト全体の設定(サイト情報、ナビゲーション、About ページ、サービス一覧)を保持します。データベースもランタイムのクエリもなく、ビルド時にすべて静的ページへコンパイルされます。

純粋な静的生成

ビルドのたびに Astro が Markdown を HTML にレンダリングし、言語ごとにページを生成します。速度はホスティングの CDN 次第、セキュリティは自然とシンプルです——攻撃される動的インターフェースが存在せず、ページはファイルそのものだからです。

5 つの言語

サイトには簡体字中国語、繁体字中国語、英語、日本語、韓国語の 5 言語が組み込まれています。各記事は 5 バージョン持つことができ、UI の文言もすべて言語別に整理されているため、言語を切り替えるとタイトルだけが訳されたページではなく、サイト全体で一貫した言語体験が得られます。

デザイン言語

浮遊するカプセル型ナビゲーション

ページ上部にはすりガラス質感のカプセル型ナビゲーションが浮かび、現在のページは滑って移動する小さなバブルで示されます。ダークモード切替ボタンにはサイトの象徴である ◐ の記号が使われ、システム連動と手動切替の両方に対応します。

タイポグラフィと余白

本文は読むことを最優先に組版されています。快適な行間、抑制の効いた見出し階層、シンタックスハイライト付きのコードブロック。モバイルの余白は個別に調整され、スマホでは記事コンテナの角丸をやめて区切り線にすることで、デスクトップと同じ空気感を保ちます。

こんな人に向いています

  • プラットフォームに縛られず、長期的に自分でコントロールできる個人サイトがほしい書き手;
  • Git でファイルを管理することに慣れ、「公開 = ファイルをコミットすること」を受け入れられるエンジニア;
  • 複数言語の読者を支えたい書き手。

すぐ使えるオンライン編集体験がほしい場合は、姉妹プロジェクトの astro-blog-admin がその隙間を埋めます。次の記事では、このブログの多言語がどう組織されているかを見ていきます。

2026-10-27 · 项目介绍

astro-blog:一个把内容还给文件的个人博客

没有数据库,没有动态后端,所有文章、随记和站点设置都是仓库里的文件——这是一个用 Astro 构建的纯静态个人博客。

astro-blog:一个把内容还给文件的个人博客

很多个人博客最后都败给了维护:数据库要备份,程序要升级,某天服务器到期,几年的文字一起消失。astro-blog 的出发点很朴素——内容就是文件。文章是 Markdown,随记是 Markdown,站点设置是 JSONC,全部躺在一个 Git 仓库里。仓库在,博客就在;想搬家,克隆下来重新构建一次即可。

它用 Astro 构建,构建产物是纯静态文件,可以放在任何静态托管上:GitHub Pages、Cloudflare Pages、EdgeOne Pages,或者一台最普通的虚拟主机。

它由什么组成

内容即文件

src/content/posts/ 按语言分目录存放文章,src/content/notes/ 存放随记,src/data/ 里的几个 JSONC 文件保存全站设置:站点信息、导航、关于页面、服务列表等。没有数据库,也没有运行时查询,构建时一切都被编译进静态页面。

纯静态生成

每次构建,Astro 把 Markdown 渲染成 HTML,把多语言内容分别生成各自的页面。访问速度只取决于托管平台的 CDN,安全性则天然简单——没有可被攻击的动态接口,页面就是文件本身。

五种语言

站点内置简体中文、繁体中文、英语、日语、韩语五种语言。每篇文章可以有五个版本,界面文案也全部按语言组织,读者切换语言时看到的不只是翻译过的标题,而是整站一致的语言环境。

设计语言

浮动胶囊导航

页面顶部是一条浮动的胶囊形导航,毛玻璃质感,当前页面用一个会滑动的小气泡标记。深色模式切换按钮是站点的标志符号 ◐,跟随系统也可以手动切换。

排版与留白

正文排版以阅读为先:合适的行高、克制的标题层级、代码块语法高亮。移动端单独打磨过间距,单篇文章在手机上去掉容器圆角、改用分割线,和桌面端保持同一种气质。

适合谁

  • 想要一个长期可控的个人站点,不想被某个平台绑定的作者;
  • 习惯用 Git 管理文件,愿意接受“发文章 = 提交文件”的工程师;
  • 需要多语言读者支持的跨语言写作者。

如果你更看重开箱即用的在线编辑体验,它的姊妹项目 astro-blog-admin 补上了这一块——下一篇我们聊聊这个博客的多语言是怎么组织的。

2026-10-27 · 項目介紹

astro-blog:一個把內容還給檔案的個人部落格

沒有資料庫,沒有動態後端,所有文章、隨記和站點設定都是倉庫裡的檔案——這是一個用 Astro 建構的純靜態個人部落格。

astro-blog:一個把內容還給檔案的個人部落格

很多個人部落格最後都敗給了維護:資料庫要備份,程式要升級,某天伺服器到期,幾年的文字一起消失。astro-blog 的出發點很樸素——內容就是檔案。文章是 Markdown,隨記是 Markdown,站點設定是 JSONC,全部躺在一個 Git 倉庫裡。倉庫在,部落格就在;想搬家,克隆下來重新建構一次即可。

它用 Astro 建構,建構產物是純靜態檔案,可以放在任何靜態託管上:GitHub Pages、Cloudflare Pages、EdgeOne Pages,或者一台最普通的虛擬主機。

它由什麼組成

內容即檔案

src/content/posts/ 按語言分目錄存放文章,src/content/notes/ 存放隨記,src/data/ 裡的幾個 JSONC 檔案保存全站設定:站點資訊、導航、關於頁面、服務列表等。沒有資料庫,也沒有執行時查詢,建構時一切都被編譯進靜態頁面。

純靜態生成

每次建構,Astro 把 Markdown 渲染成 HTML,把多語言內容分別生成各自的頁面。存取速度只取決於託管平台的 CDN,安全性則天然簡單——沒有可被攻擊的動態介面,頁面就是檔案本身。

五種語言

站點內建簡體中文、繁體中文、英語、日語、韓語五種語言。每篇文章可以有五個版本,介面文案也全部按語言組織,讀者切換語言時看到的不只是翻譯過的標題,而是整站一致的語言環境。

設計語言

浮動膠囊導航

頁面頂部是一條浮動的膠囊形導航,毛玻璃質感,目前頁面用一個會滑動的小氣泡標記。深色模式切換按鈕是站點的標誌符號 ◐,跟隨系統也可以手動切換。

排版與留白

正文排版以閱讀為先:合適的行高、克制的標題層級、程式碼區塊語法高亮。行動端單獨打磨過間距,單篇文章在手機上去掉容器圓角、改用分割線,和桌面端保持同一種氣質。

適合誰

  • 想要一個長期可控的個人站點,不想被某個平台綁定的作者;
  • 習慣用 Git 管理檔案,願意接受「發文章 = 提交檔案」的工程師;
  • 需要多語言讀者支援的跨語言寫作者。

如果你更看重開箱即用的線上編輯體驗,它的姊妹項目 astro-blog-admin 補上了這一塊——下一篇我們聊聊這個部落格的多語言是怎麼組織的。