Skip to content
Xprzmd's Blog
Go back

Astro+Vercel个人博客

Edit page

介绍本站的基于Astro + Vercel + Obsidian + Git的三端同步个人博客方案。


Github建立新仓库

在 GitHub 上建博客,仓库名字决定了你未来的网址:

安装Node.js

在开始之前,请确保你的电脑上安装了Node.js。Astro 依赖它来运行。 可以在终端输入 node -v 检查是否安装成功。 Pasted-image-20260402165642.png

本地构建Astro框架

建立博客文件夹进入输入npm create astro@latest, 如报错npm找不到命令可能是Node.js没设置好,打开终端权限即可,选Use blog template,后面都是yes。 Pasted-image-20260402170027.png

Github设置(可选)

装好后Git到github仓库,在仓库settings里面选择pages,sources选择github actions。这样每次push完github actions会自动使用astro构建网页。不过pages部署速度慢,网络环境也不好,这里不推荐,建议使用下文的Vercel。

Pasted-image-20260402164949.png

构建成功后会deploy到pages,访问https://用户名.github.io即可。

Pasted-image-20260402164758.png

改变样式

Astro和hexo不同的一点是样式和框架绑定,在hexo只要把样式文件丢进themes文件夹改一下配置文件直接push就能切换,而astro就比较麻烦了,需要把整个框架换掉,也就是把整个库换掉。我们换了个astropapr的主题,直接clone + git init。后续编写.github/workflows/deploy.yml(如果没有的话),用于教github actions怎么构建网页。写好了直接push。 Pasted-image-20260404011329.png

部署到Vercel

Github Actions主要有4个问题

Vercel用来把你push的代码变成网页,比github actions强大,速度快,方便部署。 直接添加repository连接到GitHub的博客仓库。能看到下面就算成功。 Pasted-image-20260404004125.png

配置域名与DNS解析

Vercel的域名访问还是非常缓慢。 去腾讯云/阿里云买个域名,一年10块左右。还有dns解析 屏幕截图-2026-04-02-040711-1.png 回到Vercel配置一下域名和dns解析,即可正常使用。 Pasted-image-20260415164544.png


Edit page
Share this post on: