手写字体制作教程

Appearance

字体制作教程网站 ​

一个专为手写字体制作爱好者打造的完整教程网站，使用 VitePress 构建。

✨ 特性 ​

  • 完整的字体制作教程体系
  • 🔍 内置搜索功能
  • 简洁现代的 UI 设计（参考 Midjourney 文档风格）
  • 完全响应式设计
  • ⚡ 快速的静态站点生成
  • 🌙 支持深色模式

快速开始 ​

前置要求 ​

  • Node.js 18+
  • npm 或 yarn

安装依赖 ​

bash
npm install

本地开发 ​

bash
npm run dev

访问 http://localhost:5173 查看网站。

构建生产版本 ​

bash
npm run build

构建完成后，静态文件将生成在 .vitepress/dist 目录。

预览生产版本 ​

bash
npm run preview

📁 项目结构 ​

fontWebsite/
├── .vitepress/          # VitePress 配置
│   ├── config.mts       # 站点配置文件
│   └── theme/           # 自定义主题
│       ├── index.ts     # 主题入口
│       └── style.css    # 自定义样式
├── guide/               # 入门指南
├── design/              # 字体设计基础
├── digitize/            # 手写与数字化
├── practice/            # 字体制作实战
├── advanced/            # 高级技巧
├── publish/             # 发布与分享
├── tools/               # 工具推荐
├── faq/                 # 常见问题
├── public/              # 静态资源
│   └── hero-image.svg   # 首页图标
├── index.md             # 首页
├── package.json         # 项目配置
└── README.md            # 本文件

编写内容 ​

所有文档使用 Markdown 格式编写。

创建新页面 ​

  1. 在相应目录下创建 .md 文件
  2. 在 .vitepress/config.mts 中的 sidebar 添加链接

Markdown 增强 ​

VitePress 支持多种 Markdown 增强功能：

自定义容器 ​

markdown
::: tip 提示
这是一个提示
:::

::: warning 警告
这是一个警告
:::

::: danger 危险
这是一个危险提示
:::

::: info 信息
这是一个信息提示
:::

代码块 ​

markdown
\```js
const hello = 'world'
\```

表格 ​

markdown
| 功能 | 支持 |
|------|------|
| 搜索 |    |
| 深色模式 |  |

🚢 部署 ​

VitePress 生成的是纯静态文件，可以部署到任何地方！

方式一：部署到自己的服务器 🖥️ ​

1. 手动部署 ​

bash
# 本地构建
npm run build

# 上传到服务器（使用 SCP）
scp -r .vitepress/dist/* user@your-server:/var/www/font-tutorial/

# 或使用自动化脚本
chmod +x deploy.sh
./deploy.sh

2. 自动同步部署（推荐） ​

bash
# 配置 deploy-rsync.sh 中的服务器信息
chmod +x deploy-rsync.sh
./deploy-rsync.sh  # 一键部署

服务器配置（Nginx）： 参考项目中的 nginx.conf 文件配置您的 Web 服务器。

Apache 配置： 在网站根目录创建 .htaccess:

apache
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

方式二：部署到 Vercel（免费） ​

  1. 将项目推送到 GitHub
  2. 访问 Vercel
  3. 导入 GitHub 仓库
  4. Vercel 会自动检测 VitePress 项目并配置
  5. 点击部署即可

Vercel 配置（自动检测）：

  • Build Command: npm run build
  • Output Directory: .vitepress/dist

方式三：部署到 Netlify ​

  1. 将项目推送到 GitHub
  2. 访问 Netlify
  3. 导入 GitHub 仓库
  4. 配置构建设置：
    • Build command: npm run build
    • Publish directory: .vitepress/dist
  5. 点击部署

方式四：部署到 GitHub Pages ​

  1. 在 .vitepress/config.mts 中设置 base:
ts
export default defineConfig({
  base: '/repo-name/', // 你的仓库名
  // ... 其他配置
})
  1. 创建 .github/workflows/deploy.yml:
yaml
name: Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: .vitepress/dist
  1. 推送到 GitHub，Actions 会自动部署

自定义样式 ​

在 .vitepress/theme/style.css 中修改样式变量：

css
:root {
  --vp-c-brand-1: #667eea;  /* 主色调 */
  --vp-c-brand-2: #764ba2;  /* 次要色 */
}

配置说明 ​

主要配置文件在 .vitepress/config.mts：

  • title: 网站标题
  • description: 网站描述
  • themeConfig.nav: 顶部导航
  • themeConfig.sidebar: 侧边栏导航
  • themeConfig.search: 搜索配置
  • themeConfig.socialLinks: 社交链接

常见问题 ​

搜索功能不工作？ ​

VitePress 内置的本地搜索需要构建后才能使用。在开发模式下，搜索索引可能不完整。

如何添加 Google Analytics？ ​

在 .vitepress/config.mts 中添加：

ts
export default defineConfig({
  head: [
    ['script', { 
      async: '', 
      src: 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID' 
    }],
    ['script', {}, `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'GA_MEASUREMENT_ID');
    `]
  ]
})

如何自定义 404 页面？ ​

创建 404.md 文件在根目录。

相关资源 ​

📄 许可证 ​

MIT License

👤 作者 ​

手写博主 / 硬笔书法爱好者

Happy Writing! ✍️