为什么想有一个自己的站
最近,生活像是要进入一个新的阶段。受某人的影响,我也想认真记录一下自己经历过的事,在这个世界上留下一点痕迹。与此同时,AI 生成的内容越来越多,我反而更想有个地方,留下自己想过、做过的东西。哪怕只是一些小事,以后回头看,也能知道那时的自己在想什么。
这里也能用来展示自己。虽然现在还空荡荡的,但往后有了值得记录的事,就可以慢慢写进来。
其实,建个人网站的念头并不是最近才有的。高中时看到了神代綺凛 dalao 的博客,大学时又接触到广树 dalao 的维基萌,两次都想过:要是我也有一个自己的站就好了。只是因为各种原因,一直没能动手。这一次,总算把它搭起来了。
从这里开始
搭建时,我简单看了几个方案,最后选了 Astro 和 Fuwari。它们能让我较快把网站搭起来,以后想调整也有余地。想了这么多年,这次我更愿意先动手,再边写边用,看看它会长成什么样。
眼下,我想在这里记录生活、技术和自己做过的事。以后有了新想法,就接着写、接着改。
我喜欢 WikiMoe 随着作者的兴趣和经历不断变化的样子。希望这个小站以后也能这样,慢慢长出自己的内容和模样。
让网站上线
网站以 Astro 和 Fuwari 为基础,用 Svelte 做交互,用 Tailwind CSS 调整样式。文章写在 Markdown 文件里,站内搜索则交给 Pagefind。发布时,这些内容会构建成静态网页。听起来涉及不少工具,但对我来说,最重要的是它现在已经能写、能看,也留有继续修改的空间。
代码和文章都放在 GitHub。把更新推送到 main 分支后,GitHub Actions 会自动构建,再通过 GitHub Pages 发布;ys-moe.com 的域名解析交给 Cloudflare 管理。从本地写好内容到网站更新,中间大部分步骤都不用再手动操作。
为了写文章更方便,我还接入了 Sveltia CMS。目前可以在本地打开网页编辑文章和部分页面。以后也想把在线写作这一步接起来,这样不在自己的电脑前也能更新。
接下来想写什么
我其实是个想法挺多的人,只是有时候脑子里想得热闹,真要说出来却没那么容易。这也是我想开始写东西的原因:把那些还模糊的念头写下来,慢慢弄清自己究竟想说什么。
至于写什么,我现在想到的有这些:
- 技术记录:平时折腾过的东西、踩过的坑,以及最后怎么解决的。
- AI 新闻和见解:看到有意思的新进展,聊聊自己的看法;能动手试的,也想试过再说。
- 想法随笔:把脑子里冒出来的念头写下来,看看能不能想得更明白。
- 读书笔记:读到喜欢或有启发的地方,记下当时的想法。
- 旅游记录:去了哪里,路上又遇到了什么。
- 活动记录:参加过的活动,还有那些值得记住的瞬间。
- ACG:动画、漫画、游戏里让我想聊聊的作品,以及喜欢或在意的地方。
文中提到的工具
Astro
Astro 是一个适合博客、文档和作品集等内容网站的框架。开发时,页面写在 .astro 文件中,可以结合 HTML、CSS 和 JavaScript/TypeScript;发布前,Astro 会把页面和文章构建成 HTML。它默认不会把整套前端框架的代码送到浏览器,只有需要交互的组件才会单独加载。这种静态页面与局部交互结合的方式,通常被称为“群岛架构”。本站的页面结构和文章生成主要由它负责。
Fuwari
Fuwari 是用 Astro 制作的博客模板,已经提供了文章列表、归档、侧边栏、明暗主题和阅读页等功能。它主要由 .astro 页面、TypeScript 配置、Svelte 组件,以及 CSS 和 Stylus 样式文件组成。我用它作为网站的起点,先有一套可用的页面,再按自己的喜好慢慢修改。
Markdown
Markdown 是一种用纯文本编写内容的格式,例如用 ## 表示小标题,也能用简单的写法加入链接、列表和图片。本站的文章保存在 .md 文件里,开头的 Frontmatter 用 YAML 格式记录标题、日期、标签和草稿状态。写作时主要编辑文字,Astro 会在构建时把它变成文章页面。
Svelte
Svelte 是制作交互界面的前端框架。组件写在 .svelte 文件中,可以把页面结构、样式和 JavaScript/TypeScript 逻辑放在一起。本站用它制作搜索框和主题色设置:输入关键词或拖动滑块后,页面会立即响应。文章等主体内容仍由 Astro 生成。
Tailwind CSS
Tailwind CSS 用来编写网站样式。它提供控制布局、间距、颜色等的 CSS 类名,可以直接组合在页面组件中,构建时再生成对应的 CSS。本站沿用了 Fuwari 的 Tailwind 配置,同时也用普通 CSS 和 Stylus 文件处理其他样式细节。
Pagefind
Pagefind 为静态网站提供站内搜索。Astro 生成网页后,它会读取这些页面,制作搜索索引;访客输入关键词时,搜索框通过 JavaScript 使用索引查找文章。本站用 YAML 格式的 pagefind.yml 配置索引。索引需要在构建后才会生成,所以直接运行本地开发服务器时,搜索框还找不到真实的文章结果。
Sveltia CMS
Sveltia CMS 是一个网页内容编辑器。本站的后台入口是一个 HTML 页面,打开后会加载它的编辑界面;文章字段、页面入口和仓库位置写在 YAML 配置文件中。编辑后的文章仍保存为 Markdown,关于、作品和友链等页面也仍是仓库里的文件。目前主要在本地使用,在线登录与发布还要继续完善。
GitHub
GitHub 用来保存网站代码和文章。本站的 Astro、Svelte、CSS、Markdown 和 YAML 文件都放在同一个仓库里,每次提交也会留下修改记录,方便回看网站是怎样一步步变化的。新的内容推送到仓库后,自动构建流程就会开始。
GitHub Actions
GitHub Actions 负责自动构建和部署。本站在 YAML 文件 .github/workflows/deploy.yml 中写明:main 分支有更新时,先取得仓库代码、构建网站,再运行发布任务。构建记录可以在 GitHub 上查看,更新文章时也不用手动上传网页文件。
GitHub Pages
GitHub Pages 用来托管构建好的静态网站。GitHub Actions 完成部署后,它向访客提供 HTML、CSS、JavaScript 和图片等文件。文章内容在构建时就已经写入网页,读者打开文章时,网站不需要再查询数据库。
Cloudflare DNS
DNS 让浏览器知道一个域名该去哪里找。Cloudflare DNS 用来管理本站的域名解析记录,让 ys-moe.com 指向网站。它负责域名这一环,网页文件则由 GitHub Pages 提供。