1493 字
121 行
10 分钟
使用 Fuwari 初步构建个人博客

为什么要搭建个人博客#

简单来说,就是积淀价值。

脑中的想法会消失,写下的文字不会——记录是留存思想与经验的手段。

思绪是网状的,文章是线性的——表达促使想法变得清晰。

如果这些价值还能传递出去,启发他人、链接同频者,那就再好不过了。

让 Fuwari 模板在本地运行#

首先,需要掌握 Git、GitHub 和 VSCode 的基本用法。

如果你想搭建个人博客,有两条基本路径:

  • 从零开始写:挑选一个合适的框架,自己动手。在有 AI 辅助的当下,这也不会特别困难。优点是能够完全按照自己的想法进行深度定制,缺点是会相对麻烦。
  • 基于现成模板修改:这也是我采用的方式。这样可以很方便地搭建博客,也能在此基础上进一步调整成自己喜欢的样子,我后面的文章就会介绍具体的修改过程。

Fuwari 是 saicaca 大佬基于 Astro 框架开发的一款个人博客模板,被广泛使用和二改。我比对了很多模板,最终选择了 Fuwari,再根据自己的需求做一些修改。

创建仓库并克隆到本地#

你可以选择 Fork Fuwari 仓库,或者直接 点这里 使用 Fuwari 模板生成新仓库。

然后在终端或 VSCode 中把刚刚生成的仓库 clone 到本地。

安装依赖#

在命令行中输入:

Terminal window
node -v

如果未显示版本号,你需要先安装 Node.js(选择下载安装程序),装好后再次运行该命令即可看到版本号。

安装 pnpm(一个比自带的 npm 更高效的 Node.js 包管理器):

Terminal window
npm install -g pnpm

在项目根目录使用 pnpm 安装项目依赖:

Terminal window
pnpm install

你还可以按需给 VSCode 安装 Astro、Biome、Markdown All in One 等插件,方便后续开发。

本地部署#

接下来在本地启动开发服务器:

Terminal window
pnpm dev

命令行会输出本地服务器的地址(通常是 http://localhost:4321/ ),在浏览器中打开该地址就能预览网页效果了。

Astro 支持热重载。这意味着你修改代码并保存后,浏览器页面会自动更新,无需重启服务器,甚至不用手动刷新页面。

个人博客的基础配置#

现在你看到的网页还只是个模板,要让它真正成为你的个人博客,个性化配置必不可少。

文件结构简介#

仓库里纷繁复杂的文件一定看得你眼花缭乱。其实,你真正需要修改的只是其中少数几个,哪怕要做较大的改动,大部分文件也是不需要动的。

根目录下,你可以先关注:

  • README.md:你的仓库说明。
  • public/:存放不需要 Astro 处理的静态资源,目前只有用于存放网站图标的 favicon/ 文件夹。
  • src/:项目的核心源代码。

src/ 目录下,你可以先关注:

  • content/:存放网站具体内容的核心文件夹。其中:
    • posts/ 中所有的 .md 和 .mdx 文件都会被 Fuwari 识别为博客文章。你可以自由创建子目录来分类管理文章及相关的图片等资源。里面已存放了几篇默认文章。
    • spec/ 用于存放博客中非文章的独立页面,目前只有一个 About 页面,你可以在博客顶部看到页面入口。
  • layouts/:存放布局组件,即页面模板,为多个页面提供可复用的 UI 结构。有需要可以在这里进一步修改页面布局。
  • components/:存放项目中所有可复用的 UI 组件。有需要可以修改。
  • pages/:Astro 项目的核心文件夹,导入内容和组件,决定网站的页面,其中的路径直接对应网页地址。
  • config.ts(注意是 src/ 目录下的,不是 content/ 目录下的):网站的配置文件,也是接下来修改的重点。

网站基础配置#

编辑 config.ts 来完成网站的基础配置。下面提供一个配置样例:

config.ts
import type {
ExpressiveCodeConfig,
LicenseConfig,
NavBarConfig,
ProfileConfig,
SiteConfig,
} from "./types/config";
import { LinkPreset } from "./types/config";
/**
* 站点全局配置
* 包括网站标题、副标题、语言、主题颜色、横幅图片、层级目录以及网站图标等基础信息。
*/
export const siteConfig: SiteConfig = {
// 基础设置
title: "网站标题",
subtitle: "网站副标题",
lang: "zh_CN", // 语言设为中文
// 主题颜色
themeColor: {
hue: 250, // 主题颜色的默认色相(0-360)
fixed: false, // 是否对访客隐藏主题颜色选择器
},
// 网站顶部的横幅图片
banner: {
enable: false,
src: "assets/images/bg.png", // 不以 '/' 开头,表示相对于 /src 目录。如果以 '/' 开头,则表示相对于 /public 目录。其余路径同理
position: "center", // 控制选取图片的哪个区域,仅支持 'top'、'center'、'bottom'
credit: {
enable: false, // 是否显示
text: "", // 署名文本
url: "", // (可选)原始作品或作者主页的链接
},
},
// 层级目录(Table of Contents)
toc: {
enable: true, // 是否在文章右侧显示层级目录
depth: 2, // 目录中显示的最大标题层级(1-3)
},
// 网站图标
favicon: [
// 留空此数组以使用默认 favicon
{
src: '/favicon/icon.png', // favicon 路径,相对于 /public 目录
theme: 'light', // (可选)'light' 或 'dark',仅在浅色和深色模式使用不同 favicon 时设置
sizes: '32x32', // (可选)favicon 尺寸,仅在需要不同尺寸时设置。建议放置多个尺寸,可用相关工具生成
}
],
};
/**
* 导航栏配置
* 定义页面顶部导航栏中显示的链接,支持内置预设(首页、归档、关于)以及自定义外部链接。
*/
export const navBarConfig: NavBarConfig = {
links: [
LinkPreset.Home,
LinkPreset.Archive,
LinkPreset.About,
{
name: "GitHub",
url: "https://github.com/saicaca/fuwari", // 内部链接无需包含 base 路径,因为会自动添加
external: true, // 显示外部链接图标,并在新标签页中打开
},
],
};
/**
* 个人资料配置
* 设置博客侧边栏或作者卡片中展示的头像、姓名、简介以及社交链接列表。
*/
export const profileConfig: ProfileConfig = {
avatar: "assets/images/avatar.png",
name: "name",
bio: "bio",
links: [
{
name: "QQ",
icon: "fa6-brands:qq", // 访问 https://icones.js.org/ 获取图标代码。若未包含所需图标集,则安装 `pnpm add @iconify-json/<图标集名称>`
url: "https://qm.qq.com/q/*",
},
{
name: "Email",
icon: "material-symbols:mail",
url: "mailto:*@qq.com",
},
{
name: "Bilibili",
icon: "fa6-brands:bilibili",
url: "https://space.bilibili.com/*",
},
{
name: "GitHub",
icon: "fa6-brands:github",
url: "https://github.com/*",
},
],
};
/**
* 许可证配置
* 用于文章页脚的版权声明,可启用并指定许可证名称和对应的 URL。
*/
export const licenseConfig: LicenseConfig = {
enable: true,
name: "CC BY-NC-SA 4.0",
url: "https://creativecommons.org/licenses/by-nc-sa/4.0/",
};
/**
* 代码高亮主题配置
* 设置博客中代码块的高亮主题。
*/
export const expressiveCodeConfig: ExpressiveCodeConfig = {
// 注意:部分样式(如背景颜色)已被覆盖,详见 astro.config.mjs 文件
theme: "github-dark",
};

你还可以在 src/constants/constants.ts 中调整横幅图片尺寸、页面宽度等参数。

完成这些配置后,网站才算真正成为你的个人博客。

部署到互联网#

要让全世界都能看到你的网页,需要把仓库部署到服务器上。你当然可以自己花钱买一台服务器,不过,免费的静态网站托管平台显然是更具性价比的选择。

Vercel 、Netlify 、GitHub Pages 等平台都可以选择,你可以自行了解它们之间的优劣。参考 Astro 官方指南 即可完成部署:通常只需在所选平台用 GitHub 账号登录,然后导入你的仓库,平台就会自动构建并发布。构建成功后,你的博客便拥有了一个在线地址,全世界的人都可以访问了。

当然,此时博客的域名一般是所选平台的子域名。如果想拥有一个定制网址,你也可以购买一个合适的域名,并将其绑定到你的博客上。

至此,你的个人博客便搭建完成了。下一步,就是为你的博客添加第一篇文章。