手写字体制作教程

Appearance

部署到私有服务器指南 ​

第一步：本地构建（已完成） ​

bash
npm run build

构建后的静态文件在：.vitepress/dist 目录

📤 第二步：上传到服务器 ​

方式A：使用 FTP/SFTP 客户端（推荐新手） ​

  1. 下载工具：

    • Mac: 使用 Transmit 或 Cyberduck
    • Windows: 使用 FileZilla 或 WinSCP

  2. 连接服务器：

    • 主机：你的服务器IP或域名
    • 用户名：root（或其他用户）
    • 密码：你的服务器密码
    • 端口：22（SSH/SFTP）

  3. 上传文件：

    • 将 .vitepress/dist 目录下的所有文件
    • 上传到服务器的 /var/www/font-tutorial 目录
    • （或其他你想放置的目录）

方式B：使用命令行（推荐熟练用户） ​

bash
# 使用 rsync 同步文件
rsync -avz --delete \
  .vitepress/dist/ \
  root@你的服务器IP:/var/www/font-tutorial/

或使用自动脚本：

bash
# 1. 编辑 deploy-rsync.sh，修改服务器信息
nano deploy-rsync.sh

# 2. 运行脚本
chmod +x deploy-rsync.sh
./deploy-rsync.sh

第三步：配置 Nginx ​

1. 编辑 Nginx 配置文件 ​

在服务器上执行：

bash
# 创建配置文件
sudo nano /etc/nginx/sites-available/font-tutorial

2. 粘贴配置内容 ​

nginx
server {
    listen 80;
    server_name your-domain.com;  # 改成你的域名或IP
    
    root /var/www/font-tutorial;  # 对应你上传的目录
    index index.html;
    
    # 启用 gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml text/javascript;
    
    # 处理 VitePress 的路由
    location / {
        try_files $uri $uri/ $uri.html =404;
    }
    
    # 缓存静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

3. 启用配置并重启 Nginx ​

bash
# 创建软链接
sudo ln -s /etc/nginx/sites-available/font-tutorial /etc/nginx/sites-enabled/

# 测试配置是否正确
sudo nginx -t

# 重启 Nginx
sudo systemctl reload nginx

第四步：访问网站 ​

打开浏览器，访问：

  • http://你的域名
  • 或 http://你的服务器IP

看到首页就说明部署成功了！

🔒 （可选）配置 HTTPS ​

使用 Certbot 自动申请免费 SSL 证书 ​

bash
# 安装 Certbot
sudo apt update
sudo apt install certbot python3-certbot-nginx

# 自动配置 HTTPS
sudo certbot --nginx -d your-domain.com

# 自动续期（已自动配置）
sudo certbot renew --dry-run

🔄 后续更新流程 ​

每次修改内容后：

bash
# 1. 本地构建
npm run build

# 2. 上传到服务器
rsync -avz --delete .vitepress/dist/ root@服务器IP:/var/www/font-tutorial/

# 3. 清除浏览器缓存，刷新查看

或者直接运行：

bash
./deploy-rsync.sh

🐛 常见问题 ​

1. 访问后显示 403 Forbidden？ ​

检查文件权限：

bash
sudo chown -R www-data:www-data /var/www/font-tutorial
sudo chmod -R 755 /var/www/font-tutorial

2. 修改后没生效？ ​

清除浏览器缓存，或强制刷新（Ctrl+Shift+R / Cmd+Shift+R）

3. Nginx 配置错误？ ​

bash
# 查看 Nginx 错误日志
sudo tail -f /var/log/nginx/error.log

# 查看访问日志
sudo tail -f /var/log/nginx/access.log

快速命令备忘 ​

bash
# 重新构建
npm run build

# 上传文件
rsync -avz --delete .vitepress/dist/ root@服务器:/var/www/font-tutorial/

# 重启 Nginx
sudo systemctl reload nginx

# 查看 Nginx 状态
sudo systemctl status nginx

🎉 完成！你的字体教程网站已经上线了！