610 字
2 分钟
本博客搭建教程-Mizuki博客的构建
- 声明 本教程参考Mizuki官方文档 结合个人经验总结的教程
一、环境准备
1.安装
Windows系统环境：node.js22以上版本 git任意版本
node.js安装：点击
git安装：点击
2.验证
安装完成后打开终端或命令提示符验证安装
node -vnpm -vgit --version如果显示版本号，则表示安装成功
3.安装pnpm
接下来安装pnpm包管理器，可以使用npm安装
npm install -g pnpm安装完成后，打开终端或命令提示符，运行以下命令验证 pnpm 是否安装成功
pnpm -v如果显示版本号，则表示安装成功
二、部署项目
1.拉取项目
打开git软件，将Mizuki 项目拉取到本地
git clone https://github.com/LyraVoid/Mizuki.git2.安装依赖
进入Mizuki项目目录下使用 pnpm 安装项目依赖
pnpm install三、配置博客
1.编辑config.ts文件
Mizuki博客可以通过编辑 src/config.ts 文件来自定义博客设置
基本界面
const SITE_LANG = "ja"; // 语言代码，例如：'en', 'zh_CN', 'ja' 等。const SITE_TIMEZONE = 8; //设置你的网站时区 from -12 to 12 default in UTC+8export const siteConfig: SiteConfig = { title: "Mizuki", subtitle: "One demo website", siteURL: "https://mizuki.mysqil.com/", // 请替换为你的站点URL，以斜杠结尾 siteStartDate: "2025-01-01", // 站点开始运行日期，用于站点统计组件计算运行天数 timeZone: SITE_TIMEZONE,
lang: SITE_LANG,
themeColor: { hue: 60, // 主题色的默认色相，范围从 0 到 360。例如：红色：0，青色：200，蓝绿色：250，粉色：345 fixed: false, // 对访问者隐藏主题色选择器 },-
siteStartDate：站点开始运行日期，格式为YYYY-MM-DD -
siteURL：你的网站 URL，必须以斜杠结尾，例如https://example.com/ -
title：网站的主标题，显示在浏览器标签页和页面头部 -
subtitle：网站的副标题，通常显示在主页横幅下方 -
lang：网站的默认语言，影响日期格式、翻译等功能 -
timeZone：网站的时区设置，影响日期显示和时间计算 -
hue：主题色的色相值，可以是 0-360 之间的任何数值 -
fixed：设置为true时，访客将无法更改主题色
标题配置
// 顶栏标题配置navbarTitle: { // 显示模式："text-icon" 显示图标+文本，"logo" 仅显示Logo mode: "logo", // 顶栏标题文本 text: "MizukiUI", // 顶栏标题图标路径，默认使用 public/assets/home/home.png icon: "assets/home/home.png", // 网站Logo图片路径 logo: "assets/home/default-logo.png",},mode：显示模式，"text-icon"显示图标+文本，"logo"仅显示Logotext：顶栏标题文本icon：顶栏标题图标路径，默认使用public/assets/home/home.png- 图标建议尺寸：32x32 像素，格式为 PNG 或 WebP
logo：网站Logo图片路径
其他更多设置项见Mizuki官方教程
2.本地启动
运行以下命令启动开发服务器
pnpm dev启动成功后，您可以在浏览器中访问 http://localhost:4321 查看您的博客本地预览
3.打包
运行以下命令打包成静态文件，生成到 dist 目录中
pnpm build生成的 dist 目录就可以部署到自己的服务器上啦
如果需要部署到云服务器或者静态托管教程的话看本站下一篇文章 点击
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
部分信息可能已经过时