静态博客（推荐）#

不需要服务器和数据库，生成一堆 HTML 文件，部署到免费托管平台就能跑。速度快、安全、基本不花钱。

本站用的是 Astro。如果你不想折腾，Hexo 是最省心的选择。

动态博客（需要服务器）#

需要买服务器和域名，要维护数据库，成本和门槛都更高。

• WordPress：插件和主题海量，后台可视化，不用写代码。缺点是重、需要服务器、容易被攻击。
• Typecho：超轻量 PHP 博客，简洁快速。
• Halo：Java 写的现代博客，界面好看，自带后台。

新手入门建议先用静态博客，等有明确需求了再考虑动态。

CSS 框架#

• Tailwind CSS：原子化 CSS，灵活、体积小、性能好。适合改主题、做自定义网页。
• Bootstrap 5：老牌全能，组件多，兼容性强，新手零门槛。适合快速做官网和后台页面。

前端框架#

• Vue 3 + Vite：上手容易，生态强，文档全。适合个人站、工具站、中小后台。
• React + Next.js：支持 SSR，SEO 强。适合复杂网站、电商、大型项目。

1. 安装必备工具#

先装这三个，安装时一路默认下一步就行。

• Git
• Node.js（LTS 版本）
• 注册 GitHub 账号

装完后打开命令行，依次输入下面的命令，能显示版本号就说明装好了。

1
node -v
2
npm -v
3
git -v

2. 创建 GitHub 仓库#

1. 点右上角 + → New repository
2. 仓库名填 你的GitHub用户名.github.io，必须严格一致
3. 描述可以随便填，比如“我的博客”
4. 勾选 Add a README file
5. 点 Create repository

3. 配置 SSH 密钥#

SSH 用于免密码推送代码到 GitHub，配一次以后都不用输密码。

打开 Git Bash，输入：

1
ssh-keygen -t rsa -C "你的邮箱"

然后连按四次回车。

接着进入 C:\Users\你的用户名\.ssh，用记事本打开 id_rsa.pub，全选复制里面的内容。

回到 GitHub，进入 Settings → SSH and GPG keys → New SSH key，名称随便填，把刚才复制的内容粘贴到 Key 里，保存。

测试一下：

1
ssh -T git@github.com

提示确认时输入 yes，看到 “successfully authenticated” 就说明配好了。

这一步两个博客通用，做完再往下走。

4. 搭建 Astro 博客#

如果你用的是现成的 Astro 主题，下载主题压缩包，解压到博客文件夹，然后装依赖就行。不需要执行 npm create astro。

如果你有一定前端基础，想从零开始：

1
npm create astro@latest   # 创建 Astro 项目
2
npm install               # 安装依赖
3
npm run dev               # 本地启动

运行后终端会显示一个本地地址，类似 http://localhost:4321，浏览器打开就能看到效果。

5. 推送到 GitHub#

在博客文件夹里右键，选 Git Bash Here，依次执行：

1
git add .                          # 添加所有文件
2
git commit -m "初始化博客"          # 提交，描述随便填
3
git branch -M main                 # 把分支名改成 main
4
git remote add origin git@github.com:你的用户名/你的用户名.github.io.git
5
git push -u origin main            # 推送到远程

等一会儿，访问 你的用户名.github.io 就能看到博客了。

6. 搭建 Hexo 博客#

Hexo 的教程网上很多，流程和上面基本一样。区别主要在命令上，可以参考这个视频：Hexo 博客搭建教程。

Cloudflare Pages#

1. 登录 Cloudflare
2. 进入 Workers & Pages → Create application → Pages → Connect to Git
3. 选择你的博客仓库
4. 构建设置：
   • 构建命令：pnpm run build（或 npm run build）
   • 输出目录：dist
5. 点部署，完成后会给你一个 xxx.pages.dev 的域名

其他选择#

• Netlify：老牌平台，功能全面，但 2026 年调整了定价，免费版有带宽限制。
• Vercel：适合 Next.js 项目，免费版仅限非商业用途。
• GitHub Pages：最省事，和仓库直接绑定，但国内访问速度一般。