手写字体制作教程

Appearance

快速开始指南 ​

第一步：安装依赖 ​

bash
cd /Users/yangyanmin/Desktop/fontWebsite
npm install

第二步：启动开发服务器 ​

bash
npm run dev

访问：http://localhost:5173

第三步：编辑内容 ​

所有教程内容都在 Markdown 文件中，直接编辑即可：

  • guide/ - 入门指南
  • design/ - 字体设计
  • digitize/ - 数字化流程
  • practice/ - 实战教程
  • advanced/ - 高级技巧
  • publish/ - 发布指南

第四步：构建生产版本 ​

bash
npm run build

生成的文件在 .vitepress/dist 目录。

第五步：部署上线 ​

方式1：Vercel（推荐） ​

  1. 推送代码到 GitHub
  2. 访问 https://vercel.com
  3. 导入仓库，一键部署

方式2：自己的服务器 ​

bash
# 使用 rsync 脚本
chmod +x deploy-rsync.sh
./deploy-rsync.sh

📁 项目结构 ​

fontWebsite/
├── .vitepress/          # VitePress 配置
│   ├── config.mts       # 网站配置
│   └── theme/           # 自定义主题
├── guide/               # 入门指南（3章已完成）
├── design/              # 字体设计（4章已完成）
├── digitize/            # 数字化（4章已完成）
├── practice/            # 实战（4章已完成）
├── advanced/            # 高级（4章已完成）
├── publish/             # 发布（3章已完成）
├── tools/               # 工具推荐（已完成）
├── faq/                 # 常见问题（已完成）
├── index.md             # 首页
├── package.json         # 项目配置
├── README.md            # 详细文档
├── nginx.conf           # Nginx 配置
├── deploy.sh            # 部署脚本
└── deploy-rsync.sh      # 自动部署脚本

已完成内容 ​

核心功能 ​

  • VitePress 完整配置
  • 侧边栏导航（6大章节）
  • 内置搜索功能（中文支持）
  • Midjourney 风格样式
  • 响应式设计
  • 深色模式支持

教程内容 ​

  • 3篇完整入门教程
  • 21个章节框架内容
  • 工具推荐页面
  • FAQ 常见问题（25个）

部署配置 ​

  • Vercel 配置
  • GitHub Actions
  • Nginx 配置
  • 自动部署脚本

自定义网站 ​

修改主题色 ​

编辑 .vitepress/theme/style.css：

css
:root {
  --vp-c-brand-1: #667eea;  /* 改成你喜欢的颜色 */
  --vp-c-brand-2: #764ba2;
}

修改网站信息 ​

编辑 .vitepress/config.mts：

ts
export default defineConfig({
  title: "你的网站标题",
  description: "你的网站描述",
  // ...
})

修改首页 ​

编辑 index.md

添加新章节 ​

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

内容填充建议 ​

当前状态 ​

  • 所有章节都有框架内容
  • 不会出现404错误
  • 显示"持续更新中"提示

下一步 ​

  1. 优先完善核心章节：

    • 入门指南（已有详细内容）
    • FontForge 基础（已有详细内容）

  2. 根据用户反馈补充：

    • 看哪些章节浏览量高
    • 优先写用户最需要的

  3. 渐进式完善：

    • 不必追求一次写完
    • 边运营边完善

📞 需要帮助？ ​

如果遇到问题：

  1. 查看 README.md 详细文档
  2. 访问 VitePress 官网：https://vitepress.dev
  3. 或者随时联系我！

祝您的字体教程网站大获成功！ 🎉✨