这篇文章记录 le0p.top 从注册域名到正式上线的完整过程。
网站使用的技术和服务包括：
- 阿里云：注册域名和管理 DNS
- WSL2：本地 Linux 开发环境
- Node.js：运行 Astro
- Astro Theme Pure：博客主题
- GitHub：保存网站源码
- Vercel：自动构建和部署网站
最终的网站发布流程是：
WSL2 本地开发
→ Git 提交代码
→ 推送到 GitHub
→ Vercel 自动构建
→ 发布到 www.le0p.top这里不需要传统的 FTP 上传，也不需要在每次更新文章时修改域名解析。
一、整体架构#
这个博客的组成如下：
| 部分 | 使用的服务 |
|---|---|
| 域名 | 阿里云 le0p.top |
| DNS解析 | 阿里云云解析 DNS |
| 网站框架 | Astro |
| 博客主题 | Astro Theme Pure |
| 本地开发环境 | Windows 11 + WSL2 Ubuntu 22.04 |
| 源码仓库 | GitHub |
| 自动部署 | Vercel |
| 正式地址 | https://www.le0p.top |
访问网站时，浏览器首先查询阿里云 DNS，然后进入 Vercel 的网络，最后由 Vercel提供构建完成的 Astro 网站。
二、注册域名#
首先在阿里云注册域名：
le0p.top域名注册完成后，暂时不用立即添加解析记录。因为 Vercel 在项目创建完成后，会提供该项目需要的 A 记录和 CNAME 记录。
域名和网站托管是两项不同的服务：
- 域名相当于网站的地址。
- Vercel相当于存放和运行网站的服务器。
- DNS负责把域名指向 Vercel。
因此，仅注册域名还不能直接打开网站。
三、安装和确认 WSL2#
以管理员身份打开 Windows PowerShell，查看 WSL 状态：
wsl --list --verbose正常结果类似：
NAME STATE VERSION
Ubuntu-22.04 Running 2最后一列必须是：
2如果还是 WSL1，可以执行：
wsl --set-version Ubuntu-22.04 2如果尚未安装 Ubuntu，可以执行：
wsl --install -d Ubuntu-22.04安装完成后重启电脑，再打开 Ubuntu。
关于 sudo 密码#
在 Ubuntu 中运行：
sudo apt update系统要求输入的是 Ubuntu Linux 用户密码，不是 Windows PIN，也不一定是微软账户密码。
输入密码时终端不会显示字符和星号，这是正常现象。
如果忘记密码，可以在 Windows PowerShell 中以 root 用户进入：
wsl -d Ubuntu-22.04 -u root然后重设用户密码：
passwd k设置完成后退出：
exit重新打开普通 Ubuntu 终端即可。
四、安装基础工具#
进入 Ubuntu 后更新软件列表：
sudo apt update安装 Git、curl、证书和压缩工具：
sudo apt install -y git curl ca-certificates xz-utils检查 Git：
git --version正常情况下会输出 Git 版本号。
五、在 WSL 中安装 Node.js#
必须在 WSL 内安装 Linux 版本的 Node.js。
如果 WSL 中没有 Node，却调用到了 Windows 的 npm，可能出现：
WSL 1 is not supported
Could not determine Node.js install directory可以使用以下命令检查：
which node
which npm
node --version
npm --versionnode 和 npm 不应指向 /mnt/c/Program Files/nodejs/。
方法一：使用 nvm#
网络可以正常访问 GitHub 时，可以安装 nvm：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash重新加载终端配置：
source ~/.bashrc安装 Node.js 22：
nvm install 22
nvm use 22
nvm alias default 22检查版本：
node --version
npm --version方法二：直接安装 Node.js#
如果 nvm 下载一直停在：
0 0 0 0通常表示当前网络无法正常访问 raw.githubusercontent.com。
可以直接下载 Node.js 官方 Linux 压缩包。本网站实际使用的是：
Node.js 22.23.2
npm 10.9.8创建安装目录：
mkdir -p ~/.local
cd /tmp下载 Node.js：
curl -fLO https://nodejs.org/dist/v22.23.2/node-v22.23.2-linux-x64.tar.xz解压：
tar -xJf node-v22.23.2-linux-x64.tar.xz -C ~/.local编辑终端配置：
nano ~/.bashrc在文件末尾添加：
export PATH="$HOME/.local/node-v22.23.2-linux-x64/bin:$PATH"按 Ctrl+O、回车保存，再按 Ctrl+X 退出。
让配置立即生效：
source ~/.bashrc检查：
node --version
npm --version应当输出：
v22.23.2
10.9.8六、准备 GitHub SSH 密钥#
生成 SSH 密钥：
ssh-keygen -t ed25519 -C "你的GitHub邮箱"一路按回车即可。默认会生成：
~/.ssh/id_ed25519
~/.ssh/id_ed25519.pub其中：
id_ed25519是私钥，不能发送给别人。id_ed25519.pub是公钥，可以添加到 GitHub。
查看公钥：
cat ~/.ssh/id_ed25519.pub打开 GitHub：
Settings
→ SSH and GPG keys
→ New SSH key填写：
- Title：例如
WSL Ubuntu - Key type：
Authentication Key - Key：粘贴完整公钥
测试连接：
ssh -T git@github.com成功时会显示：
Hi 用户名! You've successfully authenticatedSSH 连接超时#
如果22端口无法连接，可以使用 GitHub 的443端口。
编辑：
nano ~/.ssh/config填写：
Host github.com
HostName ssh.github.com
User git
Port 443
IdentityFile ~/.ssh/id_ed25519
IdentitiesOnly yes设置文件权限：
chmod 600 ~/.ssh/config重新测试：
ssh -T git@github.com如果22和443端口都超时，说明当前网络无法连接 GitHub。SSH 本身不能绕过完整的网络阻断，需要切换网络、使用手机热点，或者正确配置代理。
七、创建 Astro Theme Pure 项目#
打开 Astro Theme Pure 仓库：
https://github.com/cworld1/astro-theme-pure点击：
Use this template
→ Create a new repository设置：
- Repository name：
le0p-blog - Visibility：Public 或 Private
- Owner：自己的 GitHub 账户
创建完成后，在 WSL 中准备项目目录：
mkdir -p ~/projects
cd ~/projects使用 SSH 克隆：
git clone git@github.com:你的用户名/le0p-blog.git进入项目：
cd ~/projects/le0p-blog安装依赖：
npm install安装完成后检查：
node --version
npm --version
git status出现 astro: not found#
如果运行：
npm run dev出现：
sh: 1: astro: not found说明项目依赖没有正确安装。
重新执行：
npm install然后确认 Astro 已存在：
ls node_modules/.bin/astro再启动：
npm run devpackages/pure 构建错误#
这个主题仓库同时包含主题开发源码和博客模板。
如果使用 npm 构建时，错误指向：
packages/pure/plugins/可以先把主题开发包移出博客目录：
mv packages ../le0p-blog-packages-backup然后重新安装和构建：
npm install
npm run build只要网站已经通过 npm 使用 astro-pure 依赖，普通个人博客通常不需要在项目中继续保留主题包的开发源码。
八、启动本地网站#
进入项目：
cd ~/projects/le0p-blog启动开发服务器：
npm run dev终端会显示类似：
Local http://localhost:4321/在 Windows 浏览器打开：
http://localhost:4321如果能看到 Astro Theme Pure 首页，说明：
- Node.js 正常
- npm 依赖正常
- Astro 正常
- 主题安装正常
停止开发服务器：
Ctrl+C也可以使用后台模式：
npm run astro -- dev --background查看状态：
npm run astro -- dev status停止后台服务：
npm run astro -- dev stop九、修改网站基本信息#
网站主要配置文件是：
src/site.config.ts修改标题、作者和描述：
export const theme = {
title: 'le0p',
author: 'le0p',
description: '记录技术、生活与思考'
}语言设置：
locale: {
lang: 'zh-CN',
attrs: 'zh_CN',
dateLocale: 'zh-CN'
}GitHub 地址：
{
icon: 'github',
label: 'GitHub',
href: 'https://github.com/你的用户名'
}头像文件位于：
src/assets/avatar.png可以使用自己的图片替换，但建议保留相同文件名。
站点图标位于：
public/favicon/社交分享图片位于：
public/images/social-card.png导航菜单也在 src/site.config.ts：
header: {
menu: [
{ title: 'Blog', link: '/blog' },
{ title: 'Docs', link: '/docs' },
{ title: 'Projects', link: '/projects' },
{ title: 'Links', link: '/links' },
{ title: 'About', link: '/about' }
]
}不需要的菜单可以删除，但需要注意逗号和括号。
十、设置正式域名#
打开：
astro.config.ts找到：
site: 'https://le0p.top'如果将 www.le0p.top 设置为主域名，建议改为：
site: 'https://www.le0p.top'这里应该和 Vercel 中设置的正式主域名保持一致，因为它会影响：
- 网站 canonical URL
- Sitemap
- RSS
- 部分分享链接
- 搜索引擎收录地址
项目已经配置 Vercel 适配器：
adapter: vercel({ imageService: true }),
output: 'server'因此不需要额外安装其他部署适配器。
十一、删除或隐藏演示内容#
演示文章位于：
src/content/blog/不希望公开的演示文章可以：
- 在 VS Code 中删除；或者
- 将文章设置为草稿。
草稿配置：
draft: true正式发布：
draft: false文章必须包含的字段：
---
title: '文章标题'
description: '文章摘要'
publishDate: '2026-08-17 12:00:00'
draft: false
---第一篇正式文章可以创建为：
src/content/blog/hello.md十二、执行生产构建#
本地页面正常后，必须测试生产构建：
npm run build构建会执行：
astro-pure check
astro check
astro build成功时应看到：
0 errors
Complete!Fontshare 或外部网页在网络不稳定时可能产生超时提示。判断是否成功应以命令最终退出状态和 Complete 为准。
构建失败时，不要立即部署。先找到日志中第一条真正的错误并修复。
十三、创建首次 Git 提交#
如果项目还没有 Git 仓库：
git init配置 Git 用户信息：
git config --global user.name "你的GitHub用户名"
git config --global user.email "你的GitHub邮箱"将默认分支改为 main：
git branch -M main查看将要提交的文件：
git status添加文件：
git add -A创建首次提交：
git commit -m "Initialize personal blog"如果还没有设置远程仓库：
git remote add origin git@github.com:你的用户名/le0p-blog.git如果 origin 已存在：
git remote set-url origin git@github.com:你的用户名/le0p-blog.git确认远程地址：
git remote -v推送：
git push -u origin main十四、部署到 Vercel#
打开：
https://vercel.com使用 GitHub 登录，然后：
Add New
→ Project
→ Import Git Repository
→ 选择 le0p-blog检查部署配置：
| 设置 | 内容 |
|---|---|
| Project Name | le0p-blog |
| Framework Preset | Astro |
| Root Directory | ./ |
| Build Command | npm run build |
| Output Directory | 保持自动检测 |
| Production Branch | main |
这个项目不需要额外的环境变量。
点击：
DeployVercel会执行：
克隆 GitHub 源码
→ npm install
→ npm run build
→ 生成生产部署成功后会获得类似：
https://le0p-blog.vercel.app先使用这个地址检查：
- 首页
- Blog
- 文章详情
- 搜索
- RSS
- 图片
- 手机端排版
十五、向 Vercel 添加已有域名#
在 Vercel 中打开项目的：
Domains需要注意：
Buy是通过 Vercel购买新域名。Add Existing是添加已经在阿里云注册的域名。
因为 le0p.top 已经注册，所以购买搜索中可能显示：
Unavailable这不代表网站不能使用该域名，而是这个域名不能再次购买。
点击：
Add Existing分别添加：
le0p.top
www.le0p.top本网站使用的方式是：
www.le0p.top：生产主域名
le0p.top：308 重定向到 www.le0p.top如果 Vercel提示域名已经被其他账户使用，需要按照页面提供的内容，在阿里云添加 TXT 记录，完成域名所有权验证。
十六、在阿里云配置 DNS#
进入阿里云：
云解析 DNS
→ le0p.top
→ 解析设置
→ 添加记录通常需要两条记录：
| 主机记录 | 类型 | 作用 |
|---|---|---|
@ | A | 根域名指向 Vercel |
www | CNAME | www 子域名指向 Vercel |
当前网站实际使用过的项目专用值为：
@ A 216.198.79.1
www CNAME 0faabbac55bcdff4.vercel-dns-017.com这些值只作为本次搭建记录。其他项目必须使用自己 Vercel Domains 页面显示的值，不要直接照抄。
其他选项：
解析线路：默认
TTL：10分钟
启用状态：启用不要填写：
https://也不要把完整域名写进“主机记录”。
如果 DNS 继续由阿里云管理，就不需要修改域名的 Nameserver。
十七、等待 DNS 和 SSL 生效#
添加 DNS 后，Vercel可能显示：
Generating SSL Certificate这是正常状态。
Vercel会在 DNS 验证完成后自动签发 HTTPS 证书，不需要再从阿里云购买证书。
等待几分钟后点击：
Refresh最终应变为：
Valid Configuration可以在 Windows PowerShell 中检查：
Resolve-DnsName le0p.top
Resolve-DnsName www.le0p.top清理本地 DNS 缓存：
ipconfig /flushdns测试网站：
https://www.le0p.top
https://le0p.top正常结果是：
www.le0p.top打开博客。le0p.top重定向到www.le0p.top。- 浏览器显示 HTTPS。
- Vercel Domains 显示配置有效。
DNS 全球传播可能需要一定时间，因此刚配置完成时，不同网络的结果可能不同。
十八、以后如何发布文章#
后续不需要再次配置域名。
每次更新网站的流程都是：
cd ~/projects/le0p-blog
git pull --rebase origin main
# 新建或修改 src/content/blog/ 中的文章
npm run astro -- dev --background
# 浏览器打开 http://localhost:4321 检查
npm run astro -- dev stop
npm run build
git status
git add src/content/blog/
git commit -m "Add or update blog post"
git push origin mainGitHub收到新提交后，Vercel会自动部署。
等待 Vercel 中最新部署变成：
Ready然后访问：
https://www.le0p.top十九、常见故障#
node: command not found#
说明 WSL 内没有安装 Linux 版 Node.js，或者 PATH 没有生效。
执行：
source ~/.bashrc
which node
node --versionnpm 提示 WSL1 不受支持#
先在 Windows PowerShell 中确认：
wsl --list --verbose如果已经是 WSL2，但 npm 仍然报错，通常是 WSL 调用了 Windows 版 npm。
检查：
which npm
which node重新安装 WSL 内的 Linux 版 Node.js。
npm run dev 提示 astro: not found#
执行：
npm install然后重新运行：
npm run devnvm 安装一直没有进度#
说明 raw.githubusercontent.com 无法正常访问。可以更换网络，或者使用 Node.js 官方压缩包安装。
Git HTTPS 出现 GnuTLS 错误#
例如：
GnuTLS recv error (-110)
The TLS connection was non-properly terminated这通常是网络连接被中断，不是 Git 提交损坏。
可以改用 SSH：
git remote set-url origin git@github.com:你的用户名/le0p-blog.git然后测试：
ssh -T git@github.com
git push origin main域名显示 Unavailable#
如果是在域名购买搜索中看到，表示域名已经被注册。
对于阿里云购买的域名，应使用：
Add Existing而不是：
BuySSL 长时间处于生成状态#
检查：
- A 记录是否正确
- CNAME 是否正确
- 是否存在冲突的旧 A 或 AAAA 记录
- Vercel是否要求 TXT 验证
- 阿里云解析记录是否启用
- Vercel项目是否同时添加了根域名和
www
二十、最终结果#
网站完成后，整体链路如下：
阿里云注册 le0p.top
→ WSL2 中运行 Astro
→ GitHub 保存源码
→ Vercel连接 main 分支
→ 阿里云 DNS 指向 Vercel
→ Vercel自动签发 HTTPS
→ www.le0p.top 正式上线以后网站的更新不需要重新配置域名，也不需要手动上传构建文件。
只需要：
修改内容
→ 本地构建
→ Git提交
→ 推送GitHub
→ 等待Vercel部署这套方案适合个人博客、技术笔记和项目展示站点，初期维护成本较低，也保留了以后迁移到其他平台的可能性。