零基础搭建astro个人博客
为什么选择 Astro？ Astro 采用独特的“孤岛架构”（Islands Architecture），能够移除页面中多余的 JavaScript，让你的博客拥有极致的加载速度和极佳的 SEO 表现。
🛠 第一阶段：本地开发环境搭建
建议将 Node.js 及其包管理器路径规范化，避免占用 C 盘并方便管理。【均以node安装在D盘根目录下为例】
- 安装 Node.js 与 路径定制
-
下载：前往 Node.js 官网 下载 LTS 稳定版。
-
目录准备：在安装目录（如
D:\nodejs）新建两个文件夹：node_global和node_cache。 -
指令配置：以管理员身份运行终端，执行：
# 设置全局安装路径与缓存路径npm config set prefix "D:\nodejs\node_global"npm config set cache "D:\nodejs\node_cache"
# 验证（若路径正确则配置成功）npm config get prefixnpm config get cache
#版本验证 如果显示版本号，则表示安装成功node -vnpm -v- 环境变量（让指令全局生效）
[此电脑]-单击右键-[属性]-[高级系统设置]-[环境变量]
- 系统变量：新建
NODE_PATH，路径为D:\nodejs\node_global\node_modules。 - 用户变量：编辑
Path，将其中的C:\Users\...\npm修改为：D:\nodejs\node_global。 - 系统变量：在
Path变量中添加：%NODE_PATH%。
# 测试（配置有没有生效） #按 Win + X -> 选择 终端（管理员） npm install express -g // -g代表全局安装- PNPM 极速包管理器
PNPM 采用硬链接机制，不仅省空间，安装速度更是远超 npm。
# 设置国内镜像源npm config set registry https://registry.npmmirror.com
# 验证镜像地址npm config get registry
# 全局安装 pnpmnpm install -g pnpm
# 设置 pnpm 全局存储路径pnpm config set store-dir "D:\nodejs\pnpm_store"
#【重要】设置 pnpm 的全局安装路径pnpm config set global-dir "D:\nodejs\node_global"
#验证 如果显示版本号，则表示安装成功pnpm -v- Git 安装
访问 下载并安装适合您操作系统的 Git 版本。
-
编辑器：选择 VS Code
-
分支命名：推荐 main
-
HTTPS 传输：选择 OpenSSL library
-
终端：使用 Windows Terminal
# 验证 如果显示版本号，则表示安装成功git --version- 安装 VScode
修改项目代码
🚀 第二阶段：初始化 Mizuki 博客项目
主题推荐：
-
Fuwari：一个用Astro构建的静态博客模板。
-
Mizuki：一个现代化、功能丰富的静态博客模板，采用 Astro 构建，具备高级功能和精美设计。
这里以基于Astro开发的高颜值 Mizuki主题 为例进行演示。
- 克隆与安装
git clone https://github.com/matsuzaka-yuki/mizuki.gitcd Mizukipnpm install- 本地调试
-
配置文件：修改 src/config.ts，定制你的站名、社交链接和主题色。
-
启动预览：在 VS Code 中打开项目，安装 Astro 插件（必备），然后运行：
pnpm dev此时访问 http://localhost:4321 即可实时预览你的博客。
☁️ 第三阶段：多平台部署（全球加速）
准备工作：
第一步：创建 GitHub 仓库
- 登录你的 GitHub 账号
- 点击右上角的 ”+” 号，选择 “New repository”
- 填写仓库名称（如：mizuki-blog）
- 选择公开（Public）或私有（Private）仓库
- 勾选 “Add a README file”（可选）
- 点击 “Create repository” 创建仓库
- 将你的 Mizuki 博客代码推送到这个仓库
第二步：修改后推送到Github
安装Git-desktop
- 添加本地仓库
- 打开 GitHub Desktop，点击 File-> Add Local Repository…。
- 点击 Choose…，找到并选择你的项目文件夹。
- 点击 Add Repository。如果文件夹尚未被 Git 管理，软件会提示你将其创建为一个新的 Git 仓库，确认即可 。
- 检查或修改远程仓库地址（对应命令行 git remote set-url）
- 添加仓库后，点击顶部菜单 Repository-> Repository settings…。
- 在设置面板中，找到 Primary remote repository和 Remote name。这里通常默认是 origin。
- 你可以在这里将远程仓库的 URL 修改为 SSH 地址（如 git@github.com
/repo-name.git）。注意：使用 SSH 前，你需要提前将 SSH 公钥配置到你的 GitHub 账户中 。
提交与推送更改
- 提交所有更改（对应命令行 git add .和 git commit）
- 在 GitHub Desktop 界面的左侧，你会看到 Changes面板。这里列出了所有新增、修改或删除的文件，相当于执行了 git add .的效果 。
- 在左下角的 Summary字段中，输入本次提交的说明信息，例如 “项目初始化” 。
- 点击其下方的 Commit to main（或 Commit to master）按钮。这一步相当于执行了 git commit -m “项目初始化”，将更改保存到了本地仓库 。
- 推送到远程仓库（对应命令行 git push）
- 提交后，点击界面右上角的 Push origin按钮，即可将本地提交推送到 GitHub 上的远程仓库 。
- 如果是首次推送，这个按钮通常会显示为 Publish repository。点击后，你可以为远程仓库设置名称、描述，并选择公开（Public）或私有（Private）。
托管方案
- 方案 A：Vercel 自动化部署（海外访问快，最简单）
将代码推送至 GitHub 仓库。
登录 Vercel，导入你的项目 至 Vercel。
Vercel 会自动识别 Astro 框架。
Build Command 填入：pnpm i && pnpm build。
Output Directory：dist。
点击 Deploy，此后你只需 git push，网站就会自动更新。
- 方案 B：腾讯云 EdgeOne Pages（国内访问丝滑）
适用于已备案域名，利用全站加速（ECDN）提供极致体验。
配置重点：
构建命令：pnpm i && pnpm build。
Node 版本：务必选择 18.x 或以上。
输出目录：dist。
- 方案 C：打包网站
运行以下命令将网站打包成静态文件，生成到 dist 目录中：
pnpm build生成的 dist 目录可以部署到您自己的服务器上。
🔄 第四阶段：源码同步与版本更新
当主题作者更新了功能，而你也修改了代码时，使用以下命令实现“无损合并”： 第一次更新并合并看这个⬇
博客源码更新#1 检查上游仓库git remote -v#2 关联原作者仓库（仅需执行一次）如果已经有了就跳过这步git remote add upstream https://github.com/matsuzaka-yuki/Mizuki.git#3 检查上游仓库git remote -v#4 获取原作者更新git fetch upstream#5 确认上游分支git branch -r#6.1 确认 upstream/main 合并更新到你的分支git merge upstream/main#6.2 确认 upstream/master 合并更新到你的分支git merge upstream/master#7 报错 fatal: refusing to merge unrelated histories 一般只出现在第一次拉取git merge upstream/master --allow-unrelated-histories#8 在 GitHub Desktop 中处理冲突# 冲突时保留自己的 src/content（文章）和 src/config.ts（配置）修改对应信息以及发布文章参考--[官方文档](https://docs.mizuki.mysqil.com/Basic-Layout/site-config/)第二次及以后更新并合并看这个⬇
#1 获取原作者更新git fetch upstream#2 确认 upstream/master 合并更新到你的分支git merge upstream/master#3 默认提交合并说明 ESC并输入以下代码:wq#4 Gtihub desktop 选择push代码部分信息可能已经过时