Eternally

Announcement

Welcome to my blog! This is a sample announcement.

Learn More

标签

1991 字

10 分钟

博客搭建

2025-11-24

教程

/

博客

Mizuki博客的搭建教程#

大学学软件技术专业，教非常水且老旧的Web前端开发课程，想着的闲着没事干还有个备案了域名，就顺手搭个博客顺便自学一下使用实用性强的前端吧！
了解到基于Astro的Mizuki，界面挺好看的所以打算用这个框架。

前期准备#

大致流程
本地部署Mizuki，使用Markdown编写文章 -> 推送到远程仓库/本地运行构建 ->
使用静态页面托管服务链接至远程仓库/直接将生成的文件同步至Web服务器根目录 -> 网站更改成功

本地部署一下Mizuki#

推荐安装node.js
部署Mizuki需要在拉取matsuzaka-yuki/Mizuki的仓库Git拉取
如果要在本地进行页面调试，请安装Node.js（推荐安装）
node.js的默认包管理器是npm,但是Mizuki推荐使用pnpm包管理器，
没有的可以使用npm install -g pnpm@latest-10来安装

拉取git仓库#

使用以下git命令，从Mizuki官方仓库拉取源代码
git clone https://github.com/matsuzaka-yuki/Mizuki.git

matsuzaka-yuki

/

Mizuki

Waiting for api.github.com...

00K

0K

Waiting...

注意
如果没有安装node.js可以跳过补全依赖及后面的步骤
直接去修改配置文件和编写博客文章的Makerdown
请务必注意，在执行包管理器相关指令时，务必在项目目录下执行，否则会报错！

补全依赖#

执行指令

1
pnpm install

修改基础配置#

TIP
Mizuki大部分配置都集中在src/config.ts文件中
具体配置含义，查询官方文档
下面说几个我改了的配置吧

博客属性配置#

可以在 SiteConfig 代码块，更改框架的语言，标题，副标题，网站URL，站点开始运行日期
featurePages 代码块，开启或关闭Mizuki的特色页面，关闭返回404，删除导航栏的入口即可
homeText 代码块，设置主页横幅显示的字
toc 代码块，设置博客文章的目录功能
ProfileConfig 代码块，配置简介头像、名字、签名、个人链接
MusicPlayerConfig 代码块，配置音乐播放器
FooterConfig 代码块，是页脚的配置，可以插入html，也可以在代码块内部写，也可以引入外部html文件（但是貌似写不了复杂的CSS样式）

关于备案信息悬挂#

可以直接在 FooterConfig 的customHtml内部加入需要插入的html代码

1
<a class="transition link text-[var(--primary)] font-medium inline-flex items-center" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">
2
    <img alt="" src="备案标致图片文件地址" class="h-4 mr-1">‘备案号’
3
</a>
4
<br>
5
<a class="transition link text-[var(--primary)] font-medium inline-flex items-center" href="https://beian.mps.gov.cn/#/query/webSearch?code=‘公安备案号’" target="_blank">
6
    <img alt="" src="/favicon/foot-ga.png" class="h-4 mr-1">公安备案号
7
</a>

TIP
在项目根目录下执行pnpm dev即可启动开发服务器
在浏览器里访问 localhsot:4321 即可实时预览界面

由于我在html代码中加入的CSS样式，双引号好像会和配置文件的引号冲突，所以从外部引入html文件。
把上述html代码写入 src/FooterConfig.html 文件后，发现插入的位置在页脚部分的头部，个人比较喜欢把备案信息放在页面的最低端，所以还要更改页脚模块的配置。
页脚模块位置src/components/Footer.astor
浏览代码后发现有 customFooterHtml 部分，更改为一下位置试试

1
<!--<div class="border-t border-[var(&#45;&#45;primary)] mx-16 border-dashed py-8 max-w-[var(&#45;&#45;page-width)] flex flex-col items-center justify-center px-6">-->
2
<div class="transition border-t border-black/10 dark:border-white/15 my-10 border-dashed mx-32"></div>
3
<!--<div class="transition bg-[oklch(92%_0.01_var(&#45;&#45;hue))] dark:bg-black rounded-2xl py-8 mt-4 mb-8 flex flex-col items-center justify-center px-6">-->
4
<div class="transition border-dashed border-[oklch(85%_0.01_var(--hue))] dark:border-white/15 rounded-2xl mb-12 flex flex-col items-center justify-center px-6">
5
    <div class="transition text-50 text-sm text-center">
6

7
        &copy; <span id="copyright-year">{currentYear}</span> {profileConfig.name}. All Rights Reserved. /
8
        <a class="transition link text-[var(--primary)] font-medium" href={url('rss/')} onclick={`event.preventDefault(); navigateToPage('${url('rss/')}')`}>RSS</a> /
9
    <a class="transition link text-[var(--primary)] font-medium" href={url('atom/')} onclick={`event.preventDefault(); navigateToPage('${url('atom/')}')`}>Atom</a> /
10
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href={url('sitemap-index.xml')}>Sitemap</a><br>
11
        Powered by
12
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://astro.build">Astro</a> &
13
        <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">Mizuki</a>&nbsp; Version <a class="transition link text-[var(--primary)] font-medium" target="_blank" href="https://github.com/matsuzaka-yuki/mizuki">7.6</a><br>
14
         {customFooterHtml && (
15
            <div class="mb-2" set:html={customFooterHtml}></div>
16
        )}
17

18
    </div>
19
</div>

刷新后备案号部分已经到页面的最底部了

博客文章编写#

在 src/content/posts/ 路径下创建一个新的makerdown文件，向里面自由的添加内容吧！

TIP
使用包管理器命令 pnpm new-post <文件名>快速创建Makerdown文件

新创建的Makerdown文件的属性解释

title: 文章标题（必需）
published: 发布日期（必需）
description: 文章描述，用于 SEO 和预览
image: 封面图片路径（相对于文章文件）
tags: 标签数组，用于分类
category: 文章分类
draft: 设置为 true 在生产环境中隐藏文章
pinned: 设置为 true 将文章置顶
lang: 文章语言（仅当与站点默认语言不同时设置）

Makerdown语法
Mizuki在原始的Makerdown语法基础上，做了增强
详情请看官方文档的文章编写/Makerdown/增强
Makerdown官方文档

编写完成makerdown后，就可以开始生成实际的网页文件了。

部署到公网#

说到公网部署，对于Mizuki构建的这种静态网站，有两种比较好的方式。

在云服务商购买一台单独的VPS
使用各大互联网服务商的Pages服务

两种方法下面都会提到，在此之前我们需要先去注册一个域名

注册域名#

有很多网络服务商都提供域名注册服务，国内提供商自然是阿里云和腾讯云。国外服务商推荐 Dynadot 和 spaceship ，可以不用提交实名信息。

部署到VPS#

Mizuki是一个基于Astro的网站构建工具，所以需要运行构建程序将配置转为实际的HTML、CSS和JS代码

运行构建命令#

1
pnpm build

构建的网站完整文件在项目 /dist/ 文件夹内

上传网站文件#

TIP
使用1Pane面板服务的话，直接将 dist 目录的文件压缩成压缩包，在面板中直接添加新网站即可

将文件上传至Nginx网站目录的根目录下，配置Nginx监听80和443端口，记得在VPS防火墙设置放行80和443端口，并设置网页主页文件index.html

配置域名#

在注册域名的服务商处，设置一条解析，IP自然是指向你的VPS

配置证书#

使用certbot来申请Let’s Encrypt证书

安装certbot
ubuntu可以执行指令
1
sudo apt-get install certbot
arch系可以执行指令
1
sudo pacman -S certbot

开始申请证书

1
//基础语法
2
sudo certbot --nginx -d 你的域名
3
//如果想申请多个域名的证书使用
4
sudo certbot --nginx -d example.com -d www.example.com
5
//申请泛域名证书
6
sudo certbot --nginx -d *.example.com

输入指令后，会出现几个交互步骤，按照提示要求输入即可

输入邮箱：用于接收证书到期提醒（一定要填正确，避免证书过期忘记续期）
同意服务条款：输入 A 并回车
是否共享邮箱：输入N 并回车（不想接收EFF的邮件就选N）
确认域名：如果显示的域名正确，直接回车即可
选择HTTP跳转HTTPS：输入 2 并回车（这样访问HTTP会自动跳转到HTTPS，更安全）

当显示“Successfully obtained certificate”时，就说明证书申请成功，并且已经自动配置到Nginx里了！

设置证书自动续期#

1
//设置定时任务,第一次打开会让你选择编辑器，选择一个你熟悉的
2
sudo crontab -e
3
//在文件末尾添加一行内容，意思是每月1号的0点0分，自动执行续期命令
4
0 0 1 * * sudo certbot renew --quiet

编辑完成后，输入一下内容，测试自动续期是否正常

1
sudo certbot renew --dry-run

至此，成功完成了博客在VPS上的部署，使用https协议加上你的域名就可以访问了

使用Pages部署#

TIP
有很多的网络服务上都提供了Pages服务，用于个人部署静态页面
这些服务通常是免费的，通过链接远程代码仓库拉取构建源码
自动构建最新上传的页面，不需要手动上传

我这边使用Cloudfare（赛博大善人）的Pages为例

博客搭建

https://evil-enruo.cn/posts/博客搭建/

作者

Eternally

发布于

2025-11-24

许可协议

CC BY-NC-SA 4.0

部分信息可能已经过时

Markdown Tutorial

美しいミズキ

Mizuki博客的搭建教程#

前期准备#

本地部署一下Mizuki#

拉取git仓库#

补全依赖#

修改基础配置#

博客属性配置#

关于备案信息悬挂#

博客文章编写#

部署到公网#

注册域名#

部署到VPS#

运行构建命令#

上传网站文件#

配置域名#

配置证书#

设置证书自动续期#

使用Pages部署#