《搭站手记》

搭建个人博客的过程记录和总结

  搭建这篇博客的目的主要想记录平时遇到的一些技术问题和作为自己的一个学习笔记，毕竟要掌握和学习的东西实在太多了，需要一个笔记本。

  这篇文章主要记录了搭建过程，简单记一下

1. 技术选型

● 前端框架：Astro（静态生成 + 支持 Vue 组件）

● 样式：Tailwind CSS （原子类、不用写 CSS、响应式方便）

● 部署：Vercel（免费、与 Git 集成、自动构建部署 ）

● 域名：自定义域名 （提升专业度、国内访问更稳定）

2. 创建网站步骤

2.1创建项目（选择 Blog 模板）

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

2.2进入目录并安装依赖

cd my-blog
npm install

2.3安装 Vue 支持和 TailwindCSS（让 Vue3 组件能在 Markdown 里跑）

npx astro add vue
npx astro add tailwind

这里我踩了一个坑：如果项目里已经通过 Vite 插件配置了 Tailwind， Astro 会提示“Configuration up-to-date”，但实际上需要手动在 src/styles/global.css 中添加一行：

@import "tailwindcss";

2.4启动本地预览

npm run dev

2.5将创建的网站上传到github

在 GitHub 新建一个空仓库（不要初始化 README），然后关联本地仓库并推送：

git remote add origin https://github.com/你的用户名/你的仓库名.git
git branch -M main
git push -u origin main

接下来是部署到vercel

2.6用GitHub登录vercel https://vercel.com/

2.7登录后新建project，在Import Git Repository中关联github账号

2.8关联成功之后找到刚才新建的网站点击import导入，导入成功之后需要进行配置 配置 【Project Name】 非必须，可以不改

【Framework Preset】 项目类型 自动识别

Root Directory 显示 ./：说明 Vercel 会在项目根目录找 package.json

不需要改 “Build and Output Settings”或“Environment Variables”任何配置 Environment Variables 为空 不需要任何环境变量（比如数据库密码)

2.9点击deploy部署

3.0部署完成后会生成一个–>你的项目名称-vercel.app的公网访问地址，但是国内访问不稳定，最好是去阿里云或者腾讯买一个域名，只需花几块钱就行

3. 域名配置

这里说明一下：不需要 ICP 备案，因为 Vercel 的服务器在境外。如果你用国内服务器，才需要备案。

我在阿里云购买了 novelink.icu，第一年费用才7块，续费也才30多一年

3.1配置之前需要在阿里云控制台添加 DNS 解析记录

登录阿里云控制台 → 云解析 DNS → 找到你的域名 novelink.icu → 点击「解析设置」

添加记录：

主机记录： @

记录类型： CNAME

记录值： cname.vercel-dns.com

说明： 将主域名 novelink.icu 指向 Vercel

3.2配置好DNS解析后回到vercel 进行域名绑定

进入 Vercel 项目 → Settings → Domains

在「Search any domain」输入框里输入 novelink.icu，按回车添加

等待 Vercel 自动检测 DNS 配置

这里遇到的状态变化：

Generating SSL Certificate → 等待（约 1-3 分钟）

Invalid Configuration → 说明 DNS 记录还未生效或配置有误

DNS Change Recommended → Vercel 检测到记录，但建议用 A 记录替代 CNAME 配置

Valid Configuration：一切正常

最终访问 https://novelink.icu

成功看到博客。

配置

后续维护流程也很简单：在本地写文章 → git push → Vercel 自动部署。

如果你是第一次搭建个人博客，这套方案值得一试——成本低、流程顺畅，几乎没有维护负担。