用 Astro 搭一个自己的博客


一直想弄个自己的地方放东西,但每次都被“我不会前端”劝退。这次换了个思路——不手写页面,直接用现成的博客框架,把精力放在内容上。

这篇记录一下整个过程,以及中途遇到的问题。

为什么选 Astro

试过几个方案,最后选 Astro,理由很实际:

  • 写文章就是写 Markdown 文件,不需要登录后台,不需要数据库
  • 自动生成静态页面,打开速度快,也不用管服务器
  • 官方有博客模板,首页、文章列表、文章详情页全都给你写好了

对我来说最关键的是第一点。以前用那种“网页后台”的博客,写东西要打开浏览器、等加载、担心草稿丢,很打断思路。现在是本地建个 .md 文件,写完保存,就这么简单。

动手过程

核心其实只有一条命令:

npm create astro@latest my-blog -- --template blog

它会下载官方模板,里面已经包含了完整的博客结构。之后要做的事只有三类:

  1. 改站点信息 —— 标题、描述,改一个文件全站生效
  2. 删掉示例文章,写自己的
  3. 按喜好调配色和文字

真正花时间的不是写代码,而是决定“要写什么”。

踩到的坑

1. npm 慢得让人怀疑人生

第一次装依赖,卡了很久没动静。查下来原因是:npm 不读 Windows 的系统代理设置。

我当时挂着代理,浏览器访问外网没问题,但 npm 完全没走代理——它只认 HTTP_PROXY / HTTPS_PROXY 这两个环境变量。

解决办法是给 npm 单独配代理:

npm config set proxy http://127.0.0.1:7897
npm config set https-proxy http://127.0.0.1:7897

端口号换成你自己代理软件的。配完之后速度立刻正常了。

如果你没挂代理,用国内镜像源也可以:npm config set registry https://registry.npmmirror.com

2. 目录别乱放

一开始项目建在 C 盘用户目录下,后来想挪到 D 盘。如果已经装完依赖再挪,node_modules 里有些包会因为路径问题出毛病,最省事的做法是挪完之后重新 npm install。

我是在装依赖之前挪的,所以没遇到这个问题。

现在的状态

站点能跑了,结构是这样:

  • / 首页
  • /blog 文章列表
  • /about 关于页

加新文章只需要在 src/content/blog/ 里新建一个 .md 文件,开头写上标题、描述、日期,然后正常写正文就行。

接下来

内容才是最难的。技术上的门槛其实已经没了,剩下的是能不能持续写下去。

我打算先把折腾东西时遇到的问题都记下来——反正是给自己写备忘,顺便可能帮到别人。