阿幻教你快速建立一个自己的网站

很多人问我博客怎么搭的，这篇就写个完整的教程。跟着做就行。

先说结论：不花一分钱，不用买服务器。

 

最终效果

搭完之后你会有：

• 一个属于自己的网站，有独立域名（比如 xxx.top）
• 用 Markdown 写文章，支持图片、代码块、视频嵌入
• 深色/浅色模式自动切换
• 手机电脑都能看
• 写完文章 git push 就自动上线，不用管服务器

 

费用

项目	费用
Astro 框架	免费
GitHub 代码托管	免费
Cloudflare Pages 部署	免费
.top 域名	约 9 元/年
.com 域名	约 55 元/年

域名不是必须的。不买域名的话，Cloudflare 会给你一个 xxx.pages.dev 的免费域名，也能用。

所以最低成本是 0 元。

 

准备工作

需要装两个东西：Node.js 和 Git。

装 Node.js

Node.js 是运行 Astro 的环境，没它跑不起来。

去 nodejs.org 下载 LTS 版本（长期支持版），安装的时候一路下一步就行。别选 Current 版本，坑多。

装完打开终端（Windows 搜索”cmd”或者”PowerShell”），输入：

node -v

显示版本号就说明装好了。比如 v20.x.x。

装 Git

Git 是把代码推送到 GitHub 的工具。

去 git-scm.com 下载安装，一路默认就行。安装选项巨多，别慌，全部默认没问题。

装完输入：

git -v

显示版本号就 OK。

注册 GitHub

去 github.com 注册一个账号。免费的。

后面代码要放在 GitHub 上，Cloudflare 从 GitHub 自动拉取代码来构建网站。

 

创建项目

打开终端，找一个你想放项目的位置，运行：

npm create astro@latest my-blog

它会问你几个问题：

• How would you like to start? → 选 Empty（空项目，模板反而碍事）
• Do you plan to write TypeScript? → 选 Yes
• How strict? → 选 Strict（别怕，不会写 TypeScript 也没关系，写 Markdown 用不到）
• Install dependencies? → 选 Yes
• Initialize a git repository? → 选 Yes

等它装完，进入项目：

cd my-blog

 

装 Tailwind CSS

Tailwind 是样式框架，写 CSS 很方便：

npx astro add tailwind

一路选 Yes。它会自动帮你配好，省得自己折腾配置文件。

 

跑起来看看

npm run dev

终端会显示一个地址，一般是 http://localhost:4321。浏览器打开就能看到你的网站了。

虽然现在啥都没有，但至少能跑了。

 

写第一篇文章

在 src/content/blog/ 文件夹下创建一个文件 hello-world.md：

---
title: '你好，世界'
date: 2026-03-02
---

这是我的第一篇博客。

写点什么都行。

两个 --- 之间的部分叫 frontmatter，是文章的元数据（标题、日期等）。下面就是正文，用 Markdown 语法写。

保存后刷新浏览器，文章就出来了。

 

部署上线

推到 GitHub

在 GitHub 上新建一个仓库（Repository），名字随便取，比如 my-blog。

然后在终端里：

git add .
git commit -m "第一次提交"
git remote add origin https://github.com/你的用户名/my-blog.git
git push -u origin main

代码就上传到 GitHub 了。

连接 Cloudflare Pages

1. 注册 Cloudflare（免费）
2. 左侧菜单找到 Workers 和 Pages → 创建
3. 选 连接到 Git → 授权 GitHub → 选你的仓库
4. 构建设置：
   • 框架预设：Astro
   • 构建命令：npm run build
   • 输出目录：dist
5. 点击部署，然后去倒杯水

等你回来，Cloudflare 就给你分配好一个 xxx.pages.dev 的网址了。打开就是你的网站了。

以后每次 git push，Cloudflare 会自动重新构建和部署。你只管写文章推代码就行。

 

绑定自己的域名（可选）

想要 xxx.top 这种自己的域名的话：

1. 去域名注册商买一个（推荐腾讯云或阿里云，.top 最便宜，9 块一年）
2. 在 Cloudflare Pages 的设置里添加自定义域名
3. 把域名的 DNS 服务器改成 Cloudflare 给你的（注册商后台改）
4. 等几分钟 DNS 生效，搞定

HTTPS 证书 Cloudflare 自动签发，不用管。这一步我当时折腾了一会儿才搞明白 DNS 改在哪里，其实就是去你买域名的那个网站后台改 nameserver。

 

写文章的工作流

搭好之后，日常写文章就三步：

1. 在 src/content/blog/ 里新建一个 .md 文件，写文章
2. git add . && git commit -m "新文章" && git push
3. 等一分钟，上线了

就这么简单。

用 VS Code 写 Markdown 很舒服，装一个 Markdown Preview 插件可以实时预览。

 

进阶：加功能

基础博客搭好之后，可以慢慢加功能：

• MDX 支持 — npx astro add mdx，让文章里可以嵌入自定义组件（比如视频播放器），我博客里的弹幕播放器就是这么做的
• RSS 订阅 — npm install @astrojs/rss，一行命令的事
• Sitemap — npx astro add sitemap，帮搜索引擎收录你的站
• 评论系统 — Waline（免费，需要另外部署，稍微麻烦一点）
• 音乐播放器 — 这个就是自己写了，参考我的建站日志 #2
• 深色模式 — Tailwind 的 dark: 前缀 + JavaScript 切换

我的博客源码在 GitHub 上，想参考的话可以直接看。

 

常见问题

Q：不太会编程，能搞吗？

能。我自己就没什么编程基础，代码主要靠 Claude Code 生成。你真正需要会的就是写 Markdown，语法很简单，几分钟的事。

Q：Cloudflare Pages 真的免费吗？有什么限制？

真的免费。每月 500 次构建、无限带宽、无限请求。个人博客完全够用。唯一的限制是单文件不能超过 25MB（视频和大图注意压缩）。

Q：文章能用中文吗？

当然。文件名、标题、正文全部可以用中文。

Q：手机上能写文章吗？

可以。在 GitHub 网页版直接编辑 Markdown 文件，保存后自动触发部署。不过体验一般，还是电脑上写比较舒服。

Q：以后想换框架怎么办？

文章都是 Markdown 格式的，是通用的。换任何框架都可以直接迁移，不会被锁死。

 

就这些了。有什么问题可以在评论区问我。