Tavis's Island

How I Built This Blog

Thu, 11 Jun 2026 09:30:00 GMT

搭建一个博客不难，难的是让写博客这件事变得足够简单，简单到你能坚持下去。

缘起

去年，我的好友 JerryMain 建议我们每个人都做一个个人网站，用来记录学习和生活。他在 GitHub 上找到了 Astro Theme Pure 这个模板，我一眼就喜欢上了——简洁、现代、支持暗色模式、有博客系统、有友链页面，正好是我想要的。

于是就有了你现在看到的这个网站：Tavis Island。

技术选型

Astro — 静态站点生成器

Astro 是一个现代化的静态站点生成器，它的核心理念是"默认零 JS，按需加载"。对于博客这种内容型网站来说，这意味着一一极快的加载速度。

和 Next.js、Gatsby 等框架不同，Astro 在构建时将组件渲染为纯 HTML，只在需要交互的地方注入 JS。这意味着你的博客页面加载速度可以做到极致。

Astro Theme Pure — 开箱即用的模板

模板本身已经非常完善：

首页（头像、简介、技能、项目卡片）
Blog 页面（带标签和时间线）
友链页面
关于页面
暗色/亮色模式切换
Waline 评论系统
全文搜索（Pagefind）
RSS 订阅

我只需要改改配置、换换图片、写文章就够了。

GitHub Pages — 免费托管

一开始我以为用的是 Vercel，后来发现其实是 GitHub Pages + GitHub Actions。每次 push 代码到 main 分支，GitHub Actions 会自动：

Checkout 代码
安装依赖 (npm install)
构建站点 (npm run build)
部署到 GitHub Pages

完全免费，不需要额外配置 CI/CD。

Obsidian 写作工作流

这是我最满意的部分。之前写博客的流程是：

打开编辑器 → 创建文件 → 手写 frontmatter → 写内容 → 复制到博客目录 → 构建 → 部署

太繁琐了！我写了几行脚本，把流程简化为了两步：

blog "my-post"          # 1. 创建文章（自动打开 Obsidian）
npm run sync-obsidian --push  # 2. 同步并发布

做了什么

blog 命令 — 一个 bash 函数，放在 .zshrc 里：

在 Obsidian vault 的 post/ 目录创建 .md 文件
自动填充 frontmatter 模板（标题、日期、标签）
自动打开 Obsidian 定位到新文章

sync-obsidian 脚本 — 一个 Node.js 脚本：

扫描 Obsidian 的 post/ 目录
跳过 draft: true 的草稿
解析 frontmatter，转换为 Astro 博客格式
将 Obsidian 的 [双向链接](/blog/-) 转换为标准 Markdown 链接
复制图片附件到博客目录
可选自动 git commit && git push

为什么用 Obsidian？

离线优先：飞机上、地铁里都能写
Markdown 原生：写博客本来就是 Markdown
双向链接：文章之间可以 [互相引用](/blog/-)
数据归你：所有 .md 文件都在本地，不受平台限制

我的定制

在模板基础上我做了一些改动：

头像 & 图标 — 换上了猫猫头像，favicon 和社交卡片
首页文案 — 改成了自己的简介和技能标签
SJTU Logo — 把学校 logo 颜色改成了交大红 (#B01020)
源链接 — 指向自己的 GitHub 仓库
友链 — 加上了 JerryMain 和其他朋友的链接

踩过的坑

1. 构建命令里的类型检查

原模板的 build 命令是：

"build": "astro-pure check && astro check && astro build"

astro check 做 TypeScript 类型检查，但模板代码本身有一些类型问题。导致 GitHub Actions 每次构建都失败，文章推上去了但网站就是不更新。

解决方案：把 build 命令改成 "astro build"，跳过类型检查。本地开发时单独跑 npm run check。

2. 路径硬编码

我的硬盘换过一次挂载路径，从 /Volumes/Files/ 变成了 /Volumes/External/files/。所有脚本里的路径都失效了，blog 命令直接报错。

教训：能用相对路径就用相对路径，硬编码的路径要记下来（或者写个配置检测脚本）。

3. 图片格式

Astro 会优化 src/assets/ 下的图片并转成 WebP。如果你放了一张 JPEG 但后缀是 .png，构建可能会出问题。确保文件格式和扩展名一致。

你也可以搭建

如果你也想搭一个类似的博客，大概需要：

Fork astro-theme-pure 或直接 clone 我的仓库
修改配置 — src/site.config.ts 里改标题、头像、简介、社交链接
启用 GitHub Pages — Settings → Pages → Source: GitHub Actions
（可选）设置 Obsidian 工作流 — 用 scripts/setup-alias.sh 配置 blog 命令
写文章 — 在 obsidian/post/ 下创建 .md 文件，然后 npm run sync-obsidian

整个过程一个下午就能搞定。之后你只需要专心写作，其余的自动化帮你处理。

结语

这个博客的搭建过程让我学到很多——不仅是技术，更重要的是"如何让工具服务于创作"这个思路。

一个好用的博客系统应该让你感受不到它的存在：想写就写，写完一条命令发布，其余时间它安静地待在那里。

感谢 JerryMain 的推荐，感谢 Astro Theme Pure 的作者 cworld1，也感谢看到这里的你。

Happy blogging! 🚀

如何使用 Obsidian 写博客并一键发布到个人网站

Thu, 11 Jun 2026 09:09:03 GMT

用 Obsidian 写博客，一条命令发布上线——这是我最喜欢的写作工作流。

为什么用 Obsidian 写博客？

很多人觉得写博客很麻烦：打开 CMS 后台、在网页编辑器里码字、处理图片上传、最后还要部署。整个过程割裂又低效。

Obsidian 是一个本地 Markdown 编辑器，它的优势在于：

离线优先：所有文章都是本地 .md 文件，不依赖网络
极速体验：打开即写，没有任何加载延迟
强大的编辑器：支持双向链接、标签、图谱视图、插件生态
Markdown 原生：博客本来就是 Markdown 写的，所见即所得
数据归属你：文章文件存在本地，不会因为平台倒闭而丢失

结合一套简单的自动化脚本，你可以在 Obsidian 里写完文章，然后一条命令同步发布到个人网站。

整体工作流

┌──────────────┐      ┌──────────────┐      ┌──────────────┐
│  Obsidian    │  →   │  BlogWebsite │  →   │  GitHub +    │
│  (写作)       │ sync │  (Astro 站点) │ push │  Vercel 部署  │
└──────────────┘      └──────────────┘      └──────────────┘

整个流程分三步：

在 Obsidian 里写文章（本地 Markdown 文件）
运行同步命令，文章自动转换并复制到博客项目
Push 到 GitHub，Vercel 自动部署上线

第一步：创建新文章

打开终端，输入：

# 交互式创建（会一步步引导你）
blog

# 或者一行搞定
blog "my-post-slug" "我的文章标题"

这背后做了什么？

在你指定的 Obsidian vault 的 post/ 目录下创建 .md 文件
自动填充 frontmatter（标题、日期、标签等模板内容）
自动打开 Obsidian，直接定位到这篇文章

你不需要手动创建文件、复制模板、配置路径——blog 命令一条搞定。

第二步：在 Obsidian 中写作

创建文章后 Obsidian 会自动打开，你就可以开始写了。

Frontmatter 配置

每篇文章顶部的 --- 之间是 frontmatter，用来配置文章元信息：

---
title: '文章标题'
description: '简短描述，会显示在首页和 SEO 摘要中'
publishDate: '2026-06-11T09:00:00Z'
tags:
  - 技术
  - 教程
draft: false    # true = 同步时跳过，不会发布
minutesRead: 8
---

几个要点：

draft: true：标记为草稿，sync 时会自动跳过，不会发布
tags：标签会自动同步到博客，用于分类和筛选
description：写一个吸引人的摘要，对 SEO 很重要

Markdown 写作技巧

Obsidian 支持标准 Markdown 和一些扩展语法：

## 二级标题

正文内容，**加粗**、*斜体*、`行内代码`。

### 三级标题

- 无序列表
- 第二项

1. 有序列表
2. 第二项

> 引用块，适合放名言或强调

![图片描述](./image.png)

代码块自带语法高亮：

```python
def hello():
    print("Hello, World!")


### Obsidian 特色功能

**双向链接**：用 `[文章名](/blog/-)` 链接到其他笔记，sync 时会自动转换为博客链接。

参考我之前写的 how-i-built-this-blog 了解更多细节。


同步后会自动变成：`[how-i-built-this-blog](/blog/how-i-built-this-blog)`

**拖拽图片**：直接把图片拖进 Obsidian，放在文章同名的 assets 文件夹里，sync 时图片会自动复制到博客目录。

## 第三步：同步到博客

文章写好后，在终端运行：

```bash
cd /Volumes/External/files/BlogWebsite

# 只同步（从 Obsidian 拉到博客项目）
npm run sync-obsidian

这个命令会：

扫描 Obsidian vault 的 post/ 目录
跳过 draft: true 的草稿
解析 frontmatter，转换为博客格式
处理 Obsidian 特有的语法（[链接](/blog/-) → 标准 Markdown 链接）
复制图片等附件到博客目录
生成最终的文章文件到 src/content/blog/

第四步：发布上线

同步完成后，推送到 GitHub 就能自动部署：

# 同步并直接推送（跳过确认）
npm run sync-obsidian --push

# 或者先同步，再手动推送
npm run sync-obsidian   # 同步
# 确认无误后：
git push origin main     # 推送

我的博客托管在 Vercel 上，每次 push 到 main 分支会自动触发构建和部署，一分钟内就能看到新文章上线。

本地预览（可选）

如果想在发布前预览效果：

npm run dev

这会启动 Astro 开发服务器，打开 http://localhost:4321 即可预览。支持热更新，在 Obsidian 里修改保存后浏览器会自动刷新。

完整工作流速查

# 1. 创建文章
blog "new-post" "我的新文章"

# 2. 在 Obsidian 中写作（自动打开）
# ... 写内容、加图片、调格式 ...

# 3. 同步并发布
cd /Volumes/External/files/BlogWebsite
npm run sync-obsidian --push

# 搞定！等一分钟 Vercel 自动部署

常见问题

Q: `blog` 命令找不到？

source ~/.zshrc   # 重新加载 shell 配置

Q: 同步时提示找不到 Obsidian 目录？

检查 BlogWebsite/obsidian/post/ 是否正确指向了你的 Obsidian vault。可以手动指定路径：

npm run sync-obsidian -- /path/to/your/vault/post

Q: 文章没有出现在博客上？

检查 frontmatter 里是否写了 draft: true——草稿会被跳过。

Q: 想删除已发布的文章？

npm run delete-post

总结

这套工作流的核心思路是让写作和发布解耦：

Obsidian 负责纯粹的写作体验——快、离线、专注
脚本负责格式转换和文件搬运——自动、可靠
Astro + Vercel 负责站点生成和部署——快、免费

你只管写，其余的自动化搞定。这就是我理想的博客工作流。

如果你也想搭建类似的博客系统，可以参考 Astro 官方文档，配合 Vercel 部署，再加上本文介绍的自动化脚本即可。

README

Fri, 01 May 2026 00:00:00 GMT

Time to start, time to move

Introduction

So the reason why I use this website is because JerryMain, one of my best friend, who told us to make a self-web to upload some thoughts and he found this template by accident, and after viewing, I found this template is quite good for a website, and I decided to use it also.

The workflow

So the origin template is Astro Theme Pure ,and if you are interested in mine or JerryMain's , just click it and then try to make a website yourself.

Read some of his files, you will get a lot!

How to read the whole file structure

When I was trying to make my own website, it was quite tough to know how to change every part of the site.

To save your time, I am going to introduce the structure of the whole project to help you understand the steps to customize it.

Configuration: src/site.config.ts

This is the brain of the website. You will change some important part of the website

Site Title:change the title of the web, sth like "Tavis's Island".
Author Info:Update your name, social media links, and avatar.

Main Page: src/pages/index.astro

This controls your homepage. You can customize:

Profile picture
Location label
Source code link
About section
Education cards
Skills

Changing Location and Source Code

Find the Label components in index.astro and change:

title='Shanghai, China' for location
href='https://github.com/tavis-jiang/BlogWebsite' for source code

Blog Posts: src/content/blog/

This is where your blog posts live. You can:

Write in Obsidian in the post/ folder
Sync using npm run sync-obsidian
Push to GitHub with git push

My Customizations

Here's what I changed:

✅ Changed location to "Shanghai, China"
✅ Updated source code link to my GitHub
✅ Changed SJTU logo to red (#B01020)
✅ Created Obsidian workflow for writing posts
✅ Set up auto-sync script

Conclusion

Building this website was a fun journey. Thanks to JerryMain for the inspiration and to the Astro Theme Pure creator for the excellent template.

Happy blogging! 🚀

Time to start, time to move

Introduction

The workflow

So the origin template is Astro Theme Pure ,and if you are interested in mine or JerryMain's , just click it and then try to make a website yourself.

Read some of his files, you will get a lot!

How to read the whole file structure

When I was trying to make my own website, it was quite tough to know how to change every part of the site.

To save your time, I am going to introduce the structure of the whole project to help you understand the steps to customize it.

Configuration: src/site.config.ts

This is the brain of the website. You will change some important part of the website

Site Title:change the title of the web, sth like "Tavis's Island".
Author Info:Update your name, social media links, and avatar.

Main Page: src/pages/index.astro

This controls your homepage. You can customize:

Profile picture
Location label
Source code link
About section
Education cards
Skills

Changing Location and Source Code

Find the Label components in index.astro and change:

title='Shanghai, China' for location
href='https://github.com/tavis-jiang/BlogWebsite' for source code

Blog Posts: src/content/blog/

This is where your blog posts live. You can:

Write in Obsidian in the post/ folder
Sync using npm run sync-obsidian
Push to GitHub with git push

My Customizations

Here's what I changed:

✅ Changed location to "Shanghai, China"
✅ Updated source code link to my GitHub
✅ Changed SJTU logo to red (#B01020)
✅ Created Obsidian workflow for writing posts
✅ Set up auto-sync script

Conclusion

Building this website was a fun journey. Thanks to JerryMain for the inspiration and to the Astro Theme Pure creator for the excellent template.

Happy blogging! 🚀

Tavis's Island

How I Built This Blog

缘起

技术选型

Astro — 静态站点生成器

Astro Theme Pure — 开箱即用的模板

GitHub Pages — 免费托管

Obsidian 写作工作流

做了什么

为什么用 Obsidian？

我的定制

踩过的坑

1. 构建命令里的类型检查

2. 路径硬编码

3. 图片格式

你也可以搭建

结语

如何使用 Obsidian 写博客并一键发布到个人网站

为什么用 Obsidian 写博客？

整体工作流

第一步：创建新文章

第二步：在 Obsidian 中写作

Frontmatter 配置

Markdown 写作技巧

第四步：发布上线

本地预览（可选）

完整工作流速查

常见问题

Q: blog 命令找不到？

Q: 同步时提示找不到 Obsidian 目录？

Q: 文章没有出现在博客上？

Q: 想删除已发布的文章？

总结

README

Introduction

The workflow

How to read the whole file structure

Configuration: src/site.config.ts

Main Page: src/pages/index.astro

Changing Location and Source Code

Blog Posts: src/content/blog/

My Customizations

Conclusion

Introduction

The workflow

How to read the whole file structure

Configuration: src/site.config.ts

Main Page: src/pages/index.astro

Changing Location and Source Code

Blog Posts: src/content/blog/

My Customizations

Conclusion

Q: `blog` 命令找不到？