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

本教程使用Astro框架的Mizuki主题搭建个人博客(云端)教程内不涉及云服务器的租赁也不需要准备工作一、本地项目搭建安装Git、node.js、VSCode不会安装Git配置教程Node.js配置教程下载Mizuki主题将下载的文件解压到一个非中文路径并使用VSCode打开下载遇到困难云盘链接/s/1TElejdXl_AKmQNJYosA1lA密码8888二、创建空白个人仓库使用Github或Gitee创建个人仓库教程使用Github进行演示在网页的右上角找到“”并点击找到”new repository“或“新建仓库”仓库名称-必填介绍-选填公开性-按照个人意愿选择模板、readme、.gitignore、声明-都不添加项目文件中已经附带点击“创建仓库”后网页会进行自动跳转三、将本地文件提交到仓库找到Git Bush并打开确认下载并解压完成的文件所在位置并以下列格式输入以下代码后按下回车或者直接在项目文件夹内右键选择“Open Git Bush herecd {你的项目文件路径} 例如注意是 “/” 而不是 “\” cd F:/Projects/IDE_projects/MizukiMaster按照仓库页面提示输入下列代码git init git commit -m first commit git branch -M main git remote add origin {你的仓库地址} git push -u origin main若出现网络问题可以使用Gitee来创建仓库提交成功后刷新仓库仓库内会正确显示上传的文件本地编辑认识项目基本架构与编辑项目内容通过VSCode打开项目所在文件夹了解下列目录作用注意图片路径可以自行添加文件夹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/src\config.ts文件为配置文件可以在此处进行页面配置此文件包注释根据实际需求按照注释内容修改即可// 特色页面开关配置关闭未使用的页面有助于提升 SEO关闭后请记得在 navbarConfig 中移除对应链接 featurePages: { anime: true, // 番剧页面开关 diary: true, // 日记页面开关 friends: true, // 友链页面开关 projects: false, // 项目页面开关 skills: false, // 技能页面开关 timeline: false, // 时间线页面开关 albums: false, // 相册页面开关 devices: false, // 设备页面开关 },文章内容为Markdown格式您可以通过下列编辑器快速编辑教程使用Obsidian进行演示Obsidian - 免费Typora - 付费VSCode Markdown All in One插件 -免费或是其它您已经在使用的编辑器Markdown编辑器可以给您提供更为优秀的界面显示网站内对文章的编写有一定的要求您需要在文章的开头加上“文章属性”文章属性的添加通过—三个减号进行添加其中下列属性必须添加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 ---您也可以在文件提供的示例中查看编写方式draft #是否为草稿 image #封面图片 licenseName #许可证名称 author #作者 sourceLink #该帖子内容的来源链接或参考资料博客模板是使用 Astro 构建的。对于教程中未提及的其他事项您可以在 Astro 文档 中找到答案。编辑.gitigrone文件确保不需要上传的文件或文件夹被忽略若您使用了Obsidian进行文章的编辑Obsidian会自动在目录下创建.obsidian文件夹# 忽略所有的.obsidian文件夹 .obsidian/若您配置完成了Git则使用Git可快速将您的项目文件提交到云端仓库点击Git按钮输入所需提交内容的简要介绍点击提交按钮点击“同步更改X个“之后您的项目文件皆可以通过这种方式将文件保存到云端仓库本地部署本地部署有助于您快速预览项目安装node.js按下“WinX”选择“终端Windows PowerShell”并打开后输入npm install pnpm install在“命令提示符”中输入以下命令确定是否正确安装并被识别npm -v pnpm -v输入cd {你的项目路径}后回车cd F:\Projects\IDE_projects\MizukiProject确保此时已经进入项目文件夹使用pnpm dev以开发环境运行项目较快进入项目但显示的页面为开发页面并非实际部署在服务器上的页面输入pnpm build来进行生产环境的构建运行完成后项目中会创建一个dist文件夹输入pnpm preview启动一个本地服务器预览浏览实际显示的页面您可以把dist文件夹上传到各种你希望部署的平台按下CtrlC来结束项目的运行遇到问题并在系统设置中搜索“编辑系统环境变量点击“环境变量“在“系统变量”中找到“Path”选择“编辑”在其中填入你的node.js插件安装路径例如 D:\Tools\nodejs\node_global\node_modules\云端部署在您每次提交仓库后下列工具都会自动重新部署您的网页可以使用下列工具部署教程使用EdgeOne进行演示VercelCloudflare PagesEdgeOne首次登录账号点击“创建项目”选择“通过Git仓库创建”链接Git仓库后选择你需要部署的分支一般是main或master加速区域选择全球可用区不含中国大陆请按照如下规则填写框架预设选择 “Astro” 或 “静态网站”编译命令修改为pnpm i pnpm build输出目录设置为distNode.js 版本建议选择 18.x 或更高版本部署完成后网页会自动给你提供一个域名进行访问可以在网页的“项目设置”中修改项目信息快打开看看吧个人域名的申请与使用需要支付一定的费用您可以通过百度云、腾讯云、阿里云来申请一个域名需要实名认证教程使用腾讯云演示。在各个官网的搜索栏搜索”域名注册“选择一个便宜的就行注意续费价格有的域名首年便宜但续费价格高如图购买完成后返回“控制台”并选择“域名注册-我的域名”可以查看到已购买的域名打开EdgeOne控制台用的什么搭建就打开哪个平台的控制台点击“域名管理-添加自定义域名“填写一个带有主机记录的域名地址例如example.reclock55.com其中reclock55.com为购买的域名点击“下一步”后网站会要求验证“域名归属权“在“域名控制台-我的域名”处点击添加“解析”按照要求填写对应数据后点击确定点击“新建”按照以下方式填写主机记录你的自定义前缀记录类型CNAME记录值先随便填一个回到EdgeOne页面点击“验证”此时应该显示验证完成随后网页会给你提供一个主机地址找到新建的解析将主机地址改为EdgeOne提供的地址等待一小段时间后网站就能正常通过自定义域名访问添加SSL证书可能会遇到以下情况您的连接不是私密连接攻击者可能会试图从example.xxx窃取您的信息例如密码、消息或信用卡信息在注册域名的平台搜索“SSL证书“教程使用腾讯云演示选择“申请免费证书”“证书绑定域名”处填写自定义域名请尽量选择注册域名时选择的服务商来申请可以省去很多麻烦提交申请后网站会提示“添加解析记录”在“域名控制台”处填写对应的解析记录需要等待一段时间可以选择“自动续费”来避免证书过期在“SSL证书”界面点击对应证书后的“部署”页面选择“边缘安全加速平台EO”并选择自定义域名若是通过其它平台申请的证书在EdgeOne控制台-域名管理-HTTPS配置”处点击“配置”选择“申请免费证书“或者“使用SSL托管证书”按照要求配置后点击保存等待一段时间后再次访问网站发现“不安全“提示消失参考资料Mizuki文档Astro文档EdgeOne文档