安装 Git (版本管理工具)#

Git 用来管理你博客的所有文件版本，方便你后期更新和维护。更重要的是，它能让你轻松地从 GitHub 上获取博客主题。

1. 下载 Git：访问 Git 官网 (https://git-scm.com/downloads)，根据你的操作系统（Windows, macOS, Linux）下载对应的安装包。
2. 安装 Git：运行下载的安装包，一路使用默认选项点击“下一步”即可完成安装。
3. 验证安装：
   • Windows用户：在开始菜单搜索“命令提示符”或“PowerShell”并打开。
   • macOS/Linux用户：打开“终端”应用。
   • 在打开的命令窗口中，输入以下命令然后按回车：

     1
     git --version
     

   • 如果看到类似 git version 2.x.x 的版本号输出，说明 Git 安装成功。

安装 Node.js (JavaScript 运行环境)#

Node.js 是让 Astro 能够在本地运行预览效果的基础环境。

1. 下载 Node.js：访问 Node.js 官网 (https://nodejs.org/zh-cn/download)。建议下载 LTS（长期支持版），因为它更稳定。同样，选择适合你操作系统的安装包。
2. 安装 Node.js：运行下载的安装包，同样使用默认选项安装即可。
3. 验证安装：
   • 在刚才的命令窗口（终端或命令提示符）中，输入以下命令并按回车：

     1
     node --version
     

   • 如果看到类似 v18.x.x 或更高的版本号输出，说明 Node.js 安装成功。

安装 pnpm (高效的包管理器)#

pnpm 是一个用于下载和管理 Astro 所需依赖包的工具，它比 Node.js 自带的 npm 更快、更节省磁盘空间。

NOTE

注意：如果是windows系统，建议win + R，输入cmd回车，打开命令提示符进行操作，普通终端可能不认npm的路径。

1. 安装 pnpm：
   • 在命令窗口中，输入以下命令并按回车：

     1
     npm install -g pnpm
     

   • 这里的 -g 代表“全局安装”，这样你在电脑的任何位置都可以使用 pnpm 命令。
2. 验证安装：
   • 安装完成后，输入以下命令验证：

     1
     pnpm --version
     

   • 如果看到版本号，恭喜你，所有环境准备工作都已完成！

去哪里找主题？#

你可以在两个主要地方寻找灵感：

• GitHub：全球最大的代码托管平台，搜索 “Astro blog theme” 或 “Astro blog template”，按 “Stars”（收藏数）排序，就能找到最热门的主题。
• Astro 官方主题展示：访问 Astro 主题网站，这里有官方收录的各种主题，分类清晰。

为了让大家快速上手，这里推荐一个非常优秀且持续更新的主题：

• Fuwari：功能丰富，界面现代，对中文支持友好，有侧边栏、文章目录等实用功能。

你可以先浏览几个主题看看预览效果，选择你更喜欢的一个。本教程后续操作将以这个主题为例，但步骤对所有主题都是通用的。

Fork 主题仓库 (复制一份到你的名下)#

选定主题后，我们需要把它“复制”一份到自己的 GitHub 账号下。这个操作在 GitHub 上叫做 Fork。

1. 登录 GitHub：如果没有账号，请先前往 GitHub.com 注册一个，这是免费的。
2. 进入主题仓库：在你选中的主题 GitHub 页面（例如 https://github.com/saicaca/fuwari），点击页面右上角的 Fork 按钮。
3. 确认 Fork：在弹出的页面中，你可以修改仓库名称（比如改成 my-blog），然后点击绿色的 Create fork 按钮。

等待几秒钟，GitHub 就会在你的个人账户下创建一个完全一样的仓库副本。现在，这个仓库就完全归你所有了，你可以自由地修改它。

将主题克隆到本地电脑#

现在，我们需要把这个存放在 GitHub 云端的仓库，下载到你的本地电脑上，这个操作叫做 Clone (克隆)。

1. 获取仓库地址：

   • 在你刚刚 Fork 好的自己名下的仓库页面，点击绿色的 Code 按钮。
   • 确保弹出的窗口选中 “Local” 标签下的 HTTPS 选项。
   • 复制下面显示的仓库地址（类似 https://github.com/你的用户名/你的仓库名.git）。

2. 打开git bash：在你想要本地存放代码的文件夹里，鼠标右键，应该可以在右键菜单栏里看到Open Git Bash here

3. 执行克隆命令：

   • 输入以下命令（将 [粘贴你复制的仓库地址] 替换为你刚刚复制的地址）并按回车：

     1
     git clone [粘贴你复制的仓库地址]
     

   • 例如：git clone https://github.com/你的用户名/my-blog.git

4. 进入项目文件夹：

   • 克隆完成后，你会看到桌面上出现了一个新的文件夹，名字就是你的仓库名。
   • 在命令窗口中，输入以下命令进入这个文件夹：

     1
     cd 你的仓库名
     

   • 例如：cd my-blog

启动开发服务器#

依赖安装完成后，我们就可以启动 Astro 内置的开发服务器，实时预览博客了。

在命令行中，输入以下命令并按回车：

1
pnpm run dev

你会看到类似下面的输出：

1
> my-blog@0.0.1 dev /Users/你的用户名/Desktop/my-blog
2
> astro dev
3

4
  🚀 astro  vX.X.X  ready in  XXX ms
5

6
  ┃ Local    http://localhost:4321/
7
  ┃ Network  use --host to expose

在浏览器中预览#

1. 打开你电脑上的浏览器（Chrome、Edge 或 Safari 等）。
2. 在地址栏中输入 http://localhost:4321，然后按回车。

你应该就能看到你选择的博客主题的默认样子了！

TIP

这里有一个非常酷的功能： 现在，你可以保持这个浏览器标签页开着，然后去修改博客文件夹里的任何文件（比如后面会提到的配置文件），只要一保存，浏览器里的页面就会自动刷新，立即显示你修改后的效果。这就是 Astro 强大的热更新（HMR）能力，让你能即时获得反馈。

停止开发服务器#

当你暂时不想预览了，可以在命令行窗口中按下 Ctrl + C（按住 Ctrl 键，再按 C 键），根据提示输入Y或N即可停止开发服务器。之后如果想再次预览，重新运行 pnpm run dev 即可。

修改网站的基本信息（网站名称、作者等）#

大部分博客主题都会把网站标题、作者名、网站描述等基本信息放在一个统一的配置文件里。这个文件通常叫做 config.js 或 config.ts，就放在博客项目的根目录下。

1. 在博客项目根目录下，找到 astro.config.mjs 或 config.ts 或类似名字的文件。不同主题名字可能略有不同，但通常都带有“config”字样。如果根目录下有好几个配置文件，优先找名字最像的那个。
2. 你会看到类似下面的内容（以常见配置为例）：

   1
   // 示例配置，实际内容以你的主题为准
   2
   export default defineConfig({
   3
     site: 'https://example.com', // 你的网站最终地址
   4
     base: '/',
   5
     integrations: [ ...
   6
   
   7
   // 有些主题会有一个单独的配置文件，比如 src/config.ts
   8
   export const SITE_TITLE = '博客标题';
   9
   export const SITE_DESCRIPTION = '博客描述';
   10
   export const AUTHOR = '作者名';
   

3. 将 SITE_TITLE、AUTHOR 等引号里的内容，改成你自己的信息。
4. 保存文件（快捷键 Ctrl+S 或 Command+S）。然后立刻去看浏览器里的博客，标题是不是已经变了？

删除示例文章，创建自己的第一篇文章#

博客的文章通常都放在 src/content/posts/ 或 src/pages/posts/ 目录下，文件格式是 .md 或 .mdx（Markdown，一种简单的标记语言）。

1. 在博客项目文件夹中，找到存放文章的目录（例如 src/content/posts/）。

2. 你会看到里面有一些主题自带的示例文章（比如 first-post.md、my-awesome-article.md 等）。选中它们，然后删除。这样你的博客文章列表就清空了。

3. 现在，我们来创建自己的第一篇文章。在该目录下，新建一个文本文件，命名为 我的第一篇博客.md（注意，文件名最好用英文和数字，避免空格，例如 my-first-post.md）。

4. 打开一个新的md文件，把下面的内容复制进去：

   1
   ---
   2
   title: 搭建自己的博客网站！
   3
   published: 2026-03-13
   4
   description: 无需服务器，用最简单的方法搭建自己的博客网站。
   5
   image: "./cover.png"
   6
   tags: [Astro, Github, Vercel, Git, VS Code, 腾讯云]
   7
   category: 教程
   8
   draft: false
   9
   ---
   10
   
   11
   ## 你好，世界！
   12
   
   13
   终于，我拥有了一个属于自己的博客！
   14
   
   15
   使用 Astro 搭建真的非常简单。接下来，我会在这里记录我的学习、生活和思考。
   16
   
   17
   **主要步骤回顾：**
   18
   1.  安装了 Git 和 Node.js。
   19
   2.  Fork 了一个喜欢的主题。
   20
   3.  用 `git clone` 拉到了本地。
   21
   4.  运行 `pnpm install` 和 `pnpm run dev`。
   22
   5.  现在，我开始写自己的第一篇文章了！
   23
   
   24
   感谢阅读，下次见！
   

   NOTE

   注意： 文件最上面 --- 包围起来的部分叫做 Frontmatter，它定义了文章的标题、日期、描述等元数据。不同的主题，Frontmatter 里需要的字段可能不一样（比如有些需要 date 而不是 pubDate），请务必对照你所选主题的官方文档进行确认和调整。上面的例子是一个比较通用的模板。

5. 保存文件。回到浏览器，刷新一下页面（虽然热更新应该会自动刷新，但首次创建文件有时需要手动刷新一下），你应该就能在博客首页或文章列表里看到你刚刚创建的文章标题了。点击进去，就能看到完整内容。

将本地的修改推送回 GitHub#

在部署之前，我们需要先把刚才在本地做的修改（修改配置、删除示例文章、新增文章）同步到你 Fork 的 GitHub 仓库里。

打开命令行，确保当前在博客项目的根目录，然后依次输入以下三条命令（每输入一条按一次回车）：

1
# 命令1: 将我们所有的修改添加到 Git 的暂存区
2
git add .
3

4
# 命令2: 将这些修改打包成一个版本，并附上备注信息 "第一次自定义博客"
5
git commit -m "第一次自定义博客"
6

7
# 命令3: 将这个版本推送到 GitHub 仓库（通常默认分支叫 main 或 master）
8
git push origin main

如果你的默认分支叫 master，请将最后一条命令改为 git push origin master。

TIP

可以在VS Code上安装git插件，直接点提交和同步修改就能推送到GitHub仓库！

现在，你 GitHub 仓库里的代码就和本地完全一致了。

在 Vercel 上导入并部署项目#

1. 注册/登录 Vercel：访问 Vercel 官网，点击 “Sign Up” 或 “Log in”。建议使用你的 GitHub 账号进行登录，这样操作最方便。
2. 授权：如果是第一次登录，Vercel 会请求授权访问你的 GitHub 账号和仓库，点击同意即可。
3. 导入项目：登录后，你会看到 Vercel 的控制台仪表盘。点击 “Add New…” 按钮，然后从下拉菜单中选择 “Project”。
4. 选择仓库：在 “Import Git Repository” 页面，你会看到你的 GitHub 仓库列表。找到你刚才 Fork 并推送了修改的那个博客仓库（比如 my-blog），然后点击旁边的 “Import” 按钮。
5. 配置项目：Vercel 非常智能，它会自动检测到这是一个 Astro 项目，并帮你填好所有的构建配置（你通常不需要修改任何东西）。直接点击页面底部的 “Deploy” 按钮。
6. 等待部署完成：Vercel 会开始构建和部署你的网站，并在页面上显示实时日志。大约一两分钟后，你会看到一个 “Congratulations!” 的庆祝页面，以及一个形如 https://你的项目名.vercel.app 的域名。

恭喜！ 现在，任何人都可以通过这个 *.vercel.app 的链接访问你的博客了！

WARNING

注意： 由于网络原因，vercel.app 这个域名在国内部分地区可能无法直接访问。这就是为什么很多博主会绑定自己的域名。关于如何注册自己的专属域名（如 yourname.com），以及如何使用 Cloudflare 来加速和保护你的网站，我会在另一篇单独的教程中详细讲解，这里先埋个伏笔。

让更新变得自动化#

你可能会问：“以后我写了新文章，怎么更新到网上的博客呢？” 答案非常简单。

以后，每次你在本地写了新文章或做了任何修改，只需要在本地修改文件，将修改推送到 GitHub。Vercel 会自动检测到你仓库的更新，并立即开始重新部署你的网站。 你什么都不用做，只需要等一两分钟，刷新你的博客网站，新内容就上线了。这就是自动化部署的魅力。

至此，你已经完成了全部核心步骤！你拥有了一个完全属于自己的、高速、现代的博客网站，并且掌握了一套极其简单的内容更新流程。快去享受创作和分享的乐趣吧！