mobile wallpaper 1mobile wallpaper 2mobile wallpaper 3mobile wallpaper 4mobile wallpaper 5mobile wallpaper 6mobile wallpaper 7
975 字
3 分钟
基于Astor模板构建一个好看的blog
2025-11-16

第一步:配置环境依赖#

安装 Node.js#

访问 Node.js 官网 下载并安装最新版本的 Node.js。建议使用 LTS 版本。

安装完成后,打开终端或命令提示符,运行以下命令验证 Node.js 是否安装成功:

node -v
npm -v

如果显示版本号,则表示安装成功

安装pnpm#

可以通过npm安装pnpm,代码如下:

npm install -g pnpm

安装完成后,打开终端或命令提示符,运行以下命令验证 pnpm 是否安装成功:

pnpm -v

如果显示版本号,则表示安装成功。

安装Git#

访问 Git 官网 下载并安装最新版本的 Git。

安装完成后,打开终端或命令提示符,运行以下命令验证 Git 是否安装成功:

git --version

如果显示版本号,则表示安装成功。

第二步:选择Astor模板并配置博客#

这里提供两个开源的Astor模板,你也可以根据自己的需求选择其他模板。#

1、Mizuki#

Astro-theme-Mizuki是一个基于Astro的现代化静态博客模板,具有丰富的功能和美观的设计,无论您是想写生活类博客、技术类博客、或者是知识库、系列文档等,主题都可以满足您的需求。

访问 Mizuki 以获取更多支持或赞助作者,本文只介绍如何安装和配置模板,感谢作者的贡献。

项目启动步骤#

1、克隆项目#

git clone https://github.com/matsuzaka-yuki/mizuki.git
cd Mizuki

2、安装依赖#

pnpm install

3、启动项目#

pnpm dev

4、配置博客#

您需要根据自己的需求进行配置:

·编辑 src/config.ts 文件来自定义博客设置
·更新站点信息、主题颜色、横幅图片和社交链接
·配置翻译设置和特殊页面功能

关于如何配置博客的详细说明,请参考项目的 官方文档

5、编写博客文章#

src/content/posts文件夹中创建一个新的Markdown文件,按照模板的格式编写博客文章。

2、Firefly#

Firefly是一款基于Astro框架和Fuwari模板开发的清新美观且现代化个人博客主题,专为技术爱好者和内容创作者设计。该主题融合了现代 Web 技术栈,提供了丰富的功能模块和高度可定制的界面,让您能够轻松打造出专业且美观的个人博客网站。

访问 Firefly 以获取更多支持或赞助作者,本文只介绍如何安装和配置模板,感谢作者的贡献。

项目启动步骤#

1、克隆项目#

Fork 到自己仓库在克隆(推荐)

git clone https://github.com/you-github-name/Firefly.git
cd Firefly

2、安装依赖#

pnpm install

3、启动项目#

pnpm dev

4、配置博客#

您需要根据自己的需求进行配置:

·编辑 src/config.ts 文件来自定义博客设置
·更新站点信息、主题颜色、横幅图片和社交链接
·配置翻译设置和特殊页面功能

关于如何配置博客的详细说明,请参考项目的 官方文档

5、编写博客文章#

src/content/posts文件夹中创建一个新的Markdown文件,按照模板的格式编写博客文章。


第三步:打包网站#

1、打包项目#

在项目根目录下运行以下命令,将网站打包成静态文件:

pnpm build

2、预览静态文件#

打包完成后你可以在根目录下运行以下命令,预览静态文件:

pnpm preview

站点构建完毕后,你可以将静态文件部署到任何静态文件服务器上,例如Vercel、Tencent Edgeone等。#

部署站点一章中将介绍如何部署站点#

分享

如果这篇文章对你有帮助,欢迎分享给更多人!

基于Astor模板构建一个好看的blog
https://blog.sherry.qzz.io/posts/dev/buildblog/
作者
Sherry
发布于
2025-11-16
许可协议
CC BY-NC-SA 4.0

部分信息可能已经过时

目录