为什么要搭建个人博客
简单来说,就是积淀价值。
脑中的想法会消失,写下的文字不会——记录是留存思想与经验的手段。
思绪是网状的,文章是线性的——表达促使想法变得清晰。
如果这些价值还能传递出去,启发他人、链接同频者,那就再好不过了。
让 Fuwari 模板在本地运行
首先,需要掌握 Git、GitHub 和 VSCode 的基本用法。
如果你想搭建个人博客,有两条基本路径:
- 从零开始写:挑选一个合适的框架,自己动手。在有 AI 辅助的当下,这也不会特别困难。优点是能够完全按照自己的想法进行深度定制,缺点是会相对麻烦。
- 基于现成模板修改:这也是我采用的方式。这样可以很方便地搭建博客,也能在此基础上进一步调整成自己喜欢的样子,我后面的文章就会介绍具体的修改过程。
Fuwari 是 saicaca 大佬基于 Astro 框架开发的一款个人博客模板,被广泛使用和二改。我比对了很多模板,最终选择了 Fuwari,再根据自己的需求做一些修改。
创建仓库并克隆到本地
你可以选择 Fork Fuwari 仓库,或者直接 点这里 使用 Fuwari 模板生成新仓库。
然后在终端或 VSCode 中把刚刚生成的仓库 clone 到本地。
安装依赖
在命令行中输入:
node -v如果未显示版本号,你需要先安装 Node.js(选择下载安装程序),装好后再次运行该命令即可看到版本号。
安装 pnpm(一个比自带的 npm 更高效的 Node.js 包管理器):
npm install -g pnpm在项目根目录使用 pnpm 安装项目依赖:
pnpm install你还可以按需给 VSCode 安装 Astro、Biome、Markdown All in One 等插件,方便后续开发。
本地部署
接下来在本地启动开发服务器:
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 来完成网站的基础配置。下面提供一个配置样例:
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 账号登录,然后导入你的仓库,平台就会自动构建并发布。构建成功后,你的博客便拥有了一个在线地址,全世界的人都可以访问了。
当然,此时博客的域名一般是所选平台的子域名。如果想拥有一个定制网址,你也可以购买一个合适的域名,并将其绑定到你的博客上。
至此,你的个人博客便搭建完成了。下一步,就是为你的博客添加第一篇文章。