使用 Astro、TypeScript 和原生 CSS 的静态中文博客。站点名称和作者资料都可替换。
安装 Node.js 22.22 或更新的 22.x 版本,在仓库根目录运行:
npm ci
npm run dev打开终端显示的本地地址。发布前运行 npm run check 和 npm run build,再用 npm run preview 查看 dist/ 中的静态站点。
在 src/content/posts/ 新建文件,例如 morning-walk.md:
---
title: 清晨散步
description: 记下一次散步途中看见的细节。
pubDate: 2026-11-03
tags: [日常]
draft: false
---
从这里开始写正文。文件路径决定固定链接,例如 /posts/morning-walk/。推荐小写英文和短横线,发布后保持文件名与所在目录不变。修改标题不会改变链接。日期使用 YYYY-MM-DD,同日文章按文件标识排序。
tags: [] 表示无标签。draft: true 会让文章从列表、详情路由、RSS 和站点地图中隐藏。本地预览草稿时可暂时改为 false,再在提交前恢复。公开仓库中的 Markdown 源文件对访客可见。
将图片放在文章旁的 images/ 子目录,使用相对路径,如 。本地图片交给 Astro 处理,能生成带尺寸的图片并适配项目仓库的基础路径。请填写能描述内容的替代文字。外部图片可用 HTML 指定真实的 width 与 height,以便预留空间。
在 src/site.ts 修改站名、作者、首页标题、简介和关于页模板。在 social 数组中加入形如 { label: 'GitHub', url: 'https://github.com/你的用户名' } 的条目。样式在 src/styles/global.css,页面在 src/pages/。
本仓库发布到 https://estr0yreal.github.io/。部署工作流将站点生成在 dist/,只上传静态文件。应用无需数据库、令牌或服务器。
- 将项目和
package-lock.json、.github/workflows/deploy.yml一起提交到 GitHub 仓库的默认分支。 - 在仓库的 Settings → Pages → Build and deployment → Source 选择 GitHub Actions,并确保仓库允许 Actions 运行。
- 首次发布时推送一个提交,或在 Actions → Deploy blog to GitHub Pages → Run workflow 选择默认分支运行。工作流会依次安装锁定的依赖、检查类型、构建和部署。可在 deploy 任务查看发布地址。
- 后续新增或修改文章后提交并推送到默认分支即可。若检查失败,可在工作流日志中查看具体文件并修正。
构建时读取 Actions 自动提供的 GITHUB_REPOSITORY。若仓库名等于 <用户名>.github.io,部署到根路径;普通仓库部署到 /<仓库名>/。本地未指定变量时采用本仓库的正式地址。复制到其他仓库时可修改 astro.config.mjs 的本地默认值,或这样模拟项目路径:
GITHUB_REPOSITORY=octocat/notes npm run build
GITHUB_REPOSITORY=octocat/notes npm run preview打开预览地址下的 /notes/。站内页面使用统一的基础路径,Markdown 配图使用相对路径。发布后的订阅位于站点根目录下的 rss.xml,站点地图入口为 sitemap-index.xml。
首页的「GitHub 贡献」在构建时读取 src/site.ts 中 githubUser 的公开 GitHub 日历,生成最近 365 天的静态方格。除推送外,发布工作流每天北京时间 08:23 定时触发更新。若构建时无法获取日历,首页会保留 GitHub 主页链接。