【新手向】搭建个人网站-静态博客

本教程使用Astro框架的Mizuki主题搭建个人博客(云端)
教程内不涉及云服务器的租赁（也不需要）

准备工作

一、本地项目搭建

1. 安装Git、node.js、VSCode

不会安装？
Git配置教程
Node.js配置教程

2. 下载Mizuki主题
   

3. 将下载的文件解压到一个非中文路径，并使用VSCode打开

下载遇到困难？
云盘链接

/s/1TElejdXl_AKmQNJYosA1lA
密码：8888

二、创建空白个人仓库

1. 使用Github或Gitee创建个人仓库，教程使用Github进行演示

2. 在网页的右上角找到“+”并点击

3. 找到”new repository“或“新建仓库”

   1. 仓库名称-必填
   2. 介绍-选填
   3. 公开性-按照个人意愿选择
   4. 模板、readme、.gitignore、声明-都不添加，项目文件中已经附带
      

4. 点击“创建仓库”后，网页会进行自动跳转
   

三、将本地文件提交到仓库

1. 找到Git Bush并打开
2. 确认下载并解压完成的文件所在位置，并以下列格式输入以下代码后，按下回车（或者直接在项目文件夹内右键选择“Open Git Bush here"）

cd {你的项目文件路径} 例如（注意是 “/” 而不是 “\” ）： cd F:/Projects/IDE_projects/MizukiMaster

3. 按照仓库页面提示，输入下列代码

git init git commit -m "first commit" git branch -M main git remote add origin {你的仓库地址} git push -u origin main

若出现网络问题，可以使用Gitee来创建仓库

4. 提交成功后，刷新仓库，仓库内会正确显示上传的文件

本地编辑

认识项目基本架构与编辑项目内容

1. 通过VSCode打开项目所在文件夹
2. 了解下列目录作用，注意：图片路径可以自行添加文件夹

src/ ├── content/ │ ├── posts/ # 博客文章 (Markdown) │ │ ├── *.md # 单文件形式文章 │ │ └── guide/ # 文件夹形式文章 │ └── spec/ # 特殊页面 │ ├── about.md # 关于页面 │ └── friends.md # 友链页面 └── data/ # 结构化数据 ├── anime.ts # 番剧数据 ├── devices.ts # 设备数据 ├── diary.ts # 日记数据 ├── friends.ts # 日记数据 ├── projects.ts # 项目展示 ├── skills.ts # 技能数据 └── timeline.ts # 时间线 public/ ├── assets/ │ ├── anime/ #本地加载的动漫界面图片 │ ├── desktop-banner/ #电脑模式下主页显示图片 │ ├── font/ #字体 │ ├── home/ #主页图片 │ ├── mobile-banner/ #移动端主页显示的图片 │ ├── music/ │ │ ├── cover/ #本地加载音乐时，音乐封面 │ │ └── url/ #本地加载音乐时，音乐文件 │ └── projects/ #项目图片 ├── favicon/ #标签栏图片 ├── images/ │ ├── albums/ #相册图片 │ │ ├── AcgExample/ │ ├── device/ #设备图片 │ └── diary/ #日记图片 └── pio/models/pio/ #看板娘模型文件 ├── motions/ └── textures/

2. src\config.ts文件为配置文件，可以在此处进行页面配置，此文件包注释，根据实际需求按照注释内容修改即可

// 特色页面开关配置（关闭未使用的页面有助于提升 SEO，关闭后请记得在 navbarConfig 中移除对应链接） featurePages: { anime: true, // 番剧页面开关 diary: true, // 日记页面开关 friends: true, // 友链页面开关 projects: false, // 项目页面开关 skills: false, // 技能页面开关 timeline: false, // 时间线页面开关 albums: false, // 相册页面开关 devices: false, // 设备页面开关 },

3. 文章内容为Markdown格式，您可以通过下列编辑器快速编辑，教程使用Obsidian进行演示
   1. Obsidian - 免费
   2. Typora - 付费
   3. VSCode+ Markdown All in One插件 -免费
   4. 或是其它您已经在使用的编辑器

Markdown编辑器可以给您提供更为优秀的界面显示

4. 网站内对文章的编写有一定的要求，您需要在文章的开头加上“文章属性”，文章属性的添加通过"—"（三个减号）进行添加，其中下列属性必须添加

title #标题 tags #标签 description #介绍 category #分类 published #发布时间

例如：

--- title: My First Blog Post published: 2026-04-01 description: This is the first post of my new Astro blog. image: ./cover.jpg tags: [Foo, Bar] category: Front-end draft: false ---

5. 您也可以在文件提供的示例中查看编写方式

draft #是否为草稿 image #封面图片 licenseName #许可证名称 author #作者 sourceLink #该帖子内容的来源链接或参考资料

6. 博客模板是使用 Astro 构建的。对于教程中未提及的其他事项，您可以在 Astro 文档 中找到答案。
7. 编辑.gitigrone文件，确保不需要上传的文件或文件夹被忽略

若您使用了Obsidian进行文章的编辑，Obsidian会自动在目录下创建.obsidian文件夹

# 忽略所有的.obsidian文件夹 .obsidian/

8. 若您配置完成了Git，则使用Git可快速将您的项目文件提交到云端仓库

   1. 点击Git按钮

   2. 输入所需提交内容的简要介绍

   3. 点击提交按钮
      

   4. 点击“同步更改X个“
      

   5. 之后您的项目文件皆可以通过这种方式将文件保存到云端仓库

本地部署

本地部署有助于您快速预览项目

1. 安装node.js
2. 按下“Win+X”，选择“终端（Windows PowerShell）”并打开后输入

npm install pnpm install

3. 在“命令提示符”中输入以下命令确定是否正确安装并被识别

npm -v pnpm -v

4. 输入cd {你的项目路径}后回车

cd F:\Projects\IDE_projects\MizukiProject

5. 确保此时已经进入项目文件夹
6. 使用pnpm dev以开发环境运行项目（较快进入项目，但显示的页面为开发页面，并非实际部署在服务器上的页面）
7. 输入pnpm build来进行生产环境的构建，运行完成后，项目中会创建一个dist文件夹
8. 输入pnpm preview启动一个本地服务器预览（浏览实际显示的页面）
9. 您可以把dist文件夹上传到各种你希望部署的平台
10. 按下Ctrl+C来结束项目的运行

遇到问题？

1. 并在系统设置中搜索“编辑系统环境变量"

2. 点击“环境变量“
   

3. 在“系统变量”中，找到“Path”，，选择“编辑”，在其中填入你的node.js插件安装路径

例如 D:\Tools\nodejs\node_global\node_modules\

云端部署

在您每次提交仓库后，下列工具都会自动重新部署您的网页

1. 可以使用下列工具部署，教程使用EdgeOne进行演示

   1. Vercel
   2. Cloudflare Pages
   3. EdgeOne

2. 首次登录账号，点击“创建项目”，选择“通过Git仓库创建”
   

3. 链接Git仓库后，选择你需要部署的分支，一般是main或master

4. 加速区域选择：全球可用区（不含中国大陆）

5. 请按照如下规则填写

   1. 框架预设：选择 “Astro” 或 “静态网站”
   2. 编译命令：修改为pnpm i && pnpm build
   3. 输出目录：设置为dist
   4. Node.js 版本：建议选择 18.x 或更高版本
      

6. 部署完成后，网页会自动给你提供一个域名进行访问
   

7. 可以在网页的“项目设置”中，修改项目信息

8. 快打开看看吧

个人域名的申请与使用

需要支付一定的费用

1. 您可以通过百度云、腾讯云、阿里云来申请一个域名，需要实名认证，教程使用腾讯云演示。

2. 在各个官网的搜索栏，搜索”域名注册“

3. 选择一个便宜的就行，注意续费价格（有的域名首年便宜，但续费价格高，如图）
   

4. 购买完成后，返回“控制台”，并选择“域名注册-我的域名”可以查看到已购买的域名

5. 打开EdgeOne控制台（用的什么搭建，就打开哪个平台的控制台）

6. 点击“域名管理-添加自定义域名“，填写一个带有主机记录的域名地址，例如：example.reclock55.com，其中reclock55.com为购买的域名
   

7. 点击“下一步”后，网站会要求验证“域名归属权“
   

8. 在“域名控制台-我的域名”处点击添加“解析”

9. 按照要求填写对应数据后点击确定
   

10. 点击“新建”，按照以下方式填写

    1. 主机记录：你的自定义前缀
    2. 记录类型：CNAME
    3. 记录值：先随便填一个
       

11. 回到EdgeOne页面，点击“验证”，此时应该显示验证完成

12. 随后，网页会给你提供一个主机地址
    

13. 找到新建的解析将主机地址改为EdgeOne提供的地址，等待一小段时间后，网站就能正常通过自定义域名访问

添加SSL证书

可能会遇到以下情况
您的连接不是私密连接，攻击者可能会试图从example.xxx窃取您的信息（例如：密码、消息或信用卡信息）

1. 在注册域名的平台，搜索“SSL证书“，教程使用腾讯云演示

2. 选择“申请免费证书”
   

3. “证书绑定域名”处填写自定义域名

请尽量选择注册域名时选择的服务商来申请，可以省去很多麻烦

4. 提交申请后，网站会提示“添加解析记录”，在“域名控制台”处填写对应的解析记录
   
   

5. 需要等待一段时间，可以选择“自动续费”来避免证书过期

6. 在“SSL证书”界面，点击对应证书后的“部署”页面，选择“边缘安全加速平台EO”，并选择自定义域名
   

7. 若是通过其它平台申请的证书，在"EdgeOne控制台-域名管理-HTTPS配置”处点击“配置”
   

8. 选择“申请免费证书“或者“使用SSL托管证书”按照要求配置后，点击保存
   

9. 等待一段时间后，再次访问网站，发现“不安全“提示消失
   

参考资料

Mizuki文档
Astro文档
EdgeOne文档