通过trmux搭建个人博客#

项目介绍#

Fuwari一个基于 Astro 构建的现代化个人博客主题，专注于技术分享与实践。

✨ 特性#

🚀 基于 Astro 4.0+ 构建，性能卓越
📱 完全响应式设计，支持移动端
🌙 支持深色/浅色主题切换
📝 支持 Markdown 和 MDX 格式
🔍 内置搜索功能
📊 文章阅读时间统计
🏷️ 标签和分类系统
📈 SEO 优化
🎨 可自定义配置
💬 评论系统支持
📡 RSS 订阅支持

🛠️ 技术栈#

框架: Astro
样式: Tailwind CSS + Stylus
交互: Svelte
构建工具: Vite
包管理: pnpm
代码规范: Biome

🚀 环境安装#

环境要求#

Node.js 18+
pnpm

更新trmux环境#

1
pkg update && pkg upgrade -y

安装curl(等会下载nvm需要)#

1
pkg install curl -y

安装nvm环境#

1
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

创建bashrc文件#

1
touch ~/.bashrc

给bashrc文件权限#

1
chmod 644 ~/.bashrc

将nvm配置写入bashrc文件#

1
echo 'export NVM_DIR="$HOME/.nvm"
2
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # 加载nvm' >> ~/.bashrc

执行bashrc文件#

1
source ~/.bashrc

安装Node.js(这后面的数字可以改，截止这个文章发布最新版是25，所以我填的是25)#

1
nvm install 25
2
nvm alias default 25

验证是否安装成功(安装成功后可以返回版本号，如果没有了，就是没有安装成功)#

1
node -v

安装pnpm#

1
npm install -g pnpm

安装Fuwari#

先打开Fuwari官方仓库

点击跳转Fuwari官方仓库

复制仓库克隆地址，然后按照教程官方仓库里面的安装，不会的，照我下面这个安装

这下面每一行都是一个指令，先复制一行，然后去执行，执行完后，在复制下一行，执行下一行的，就这样，一直执行到最后一行，把trmux输出的链接，复制到浏览器打开(懒得在写一行指令解释一下，所以干脆把指令全部写出来，一个你们一个个执行就行了)

1
git clone https://github.com/saicaca/fuwari
2
cd fuwari
3
pnpm install
4
pnpm dev

这个 http://localhost:4321/ 网址，把它输到浏览器就可以看到你的博客了

📝 使用指南#

创建新文章#

使用内置脚本快速创建新文章：

1
pnpm new-post helloword

清理未使用的图片#

清理 src/content/assets 目录下未被引用的图片文件：

1
pnpm clean

配置博客#

编辑 src/config.ts 文件来自定义博客配置：

1
export const siteConfig: SiteConfig = {
2
  title: "Fuwari",
3
  subtitle: "技术分享与实践",
4
  lang: "zh_CN",
5
  themeColor: {
6
    hue: 250,
7
    fixed: false,
8
  },
9
  banner: {
10
    enable: false,
11
    src: "assets/images/demo-banner.png",
12
    position: "center",
13
  },
14
  favicon: [
15
    {
16
      src: "/favicon/icon.png",
17
    }
18
  ]
19
}

文章格式#

文章使用 Markdown 格式，支持 frontmatter：

1
---
2
title: 文章标题
3
published: 2024-01-01
4
description: 文章描述
5
image: ./cover.jpg
6
tags: [标签1, 标签2]
7
category: 分类
8
draft: false
9
---
10

11
# 文章内容
12

13
这里是文章正文...

📁 项目结构#

1
├── public/                 # 静态资源
2
├── src/
3
│   ├── components/         # 组件
4
│   ├── content/           # 内容
5
│   │   ├── posts/         # 博客文章
6
│   │   └── assets/        # 资源文件
7
│   ├── layouts/           # 布局
8
│   ├── pages/             # 页面
9
│   ├── styles/            # 样式
10
│   └── config.ts          # 配置文件
11
├── scripts/               # 脚本工具
12
└── package.json

🎨 自定义#

主题颜色#

在 src/config.ts 中修改 themeColor 配置：

1
themeColor: {
2
  hue: 250,        // 主色调 (0-360)
3
  fixed: false,    // 是否固定颜色
4
}

样式定制#

全局样式：src/styles/main.css
Markdown 样式：src/styles/markdown.css
变量定义：src/styles/variables.styl

📦 部署#

构建后的静态文件位于 dist/ 目录，可部署到任何静态托管平台。

🤝 贡献#

欢迎提交 Issue 和 Pull Request！

📄 许可证#

MIT License

🙏 致谢#

感谢所有为这个项目做出贡献的开发者们！尤其感谢上游仓库