logo
English
Build Your Own Web Toolbox

在部署项目之前，我们需要先将代码托管到 GitHub 上。

创建 GitHub 仓库

  1. 登录 GitHub 账号
  2. 点击右上角的 ”+” 按钮，选择 “New repository”
  3. 填写仓库信息：
    • Repository name: web-toolbox
    • Description: 在线工具箱项目
    • Visibility: Public
    • Initialize with: README
  4. 点击 “Create repository” 创建仓库

提交代码

# 添加远程仓库
git remote add origin git@github.com:你的用户名/web-toolbox.git

# 创建并切换到 main 分支
git checkout -b main

# 添加所有文件
git add .

# 提交代码
git commit -m "初始化项目"

# 推送到远程仓库
git push -u origin main

Netlify 部署

Netlify 是一个现代化的静态网站托管平台，提供了自动化部署、CDN 分发等功能。

注册 Netlify

  1. 访问 Netlify 官网
  2. 使用 GitHub 账号登录
  3. 完成账号设置

配置部署

  1. 点击 “New site from Git”
  2. 选择 GitHub 作为代码源
  3. 授权 Netlify 访问你的 GitHub 仓库
  4. 选择 web-toolbox 仓库
  5. 配置构建设置：
    • Build command: npm run build
    • Publish directory: dist
    • Node.js version: 16

环境变量配置

在 Netlify 的项目设置中添加必要的环境变量：

  1. 进入项目设置 > Build & deploy > Environment
  2. 添加以下环境变量：
    • JUHE_API_KEY: 聚合数据 API 密钥
    • NUXT_PUBLIC_API_BASE: API 基础 URL

自动化部署

配置 GitHub Actions

创建 .github/workflows/deploy.yml 文件：

name: Deploy to Netlify

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build
        env:
          JUHE_API_KEY: ${{ secrets.JUHE_API_KEY }}
          NUXT_PUBLIC_API_BASE: ${{ secrets.NUXT_PUBLIC_API_BASE }}

      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2
        with:
          publish-dir: './dist'
          production-branch: main
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

配置 GitHub Secrets

  1. 在 GitHub 仓库设置中添加以下 secrets：
    • JUHE_API_KEY: 聚合数据 API 密钥
    • NUXT_PUBLIC_API_BASE: API 基础 URL
    • NETLIFY_AUTH_TOKEN: Netlify 访问令牌
    • NETLIFY_SITE_ID: Netlify 站点 ID

性能优化

代码分割

Nuxt.js 默认支持自动代码分割，但我们可以通过以下方式进一步优化：

  1. 使用动态导入组件：
<script setup>
const WeatherCard = defineAsyncComponent(() =>
  import('~/components/WeatherCard.vue')
)
</script>
  1. 配置路由级别的代码分割：
// nuxt.config.ts
export default defineNuxtConfig({
  experimental: {
    payloadExtraction: true
  },
  routeRules: {
    '/tools/**': { swr: true }
  }
})

静态资源优化

  1. 图片优化：
<template>
  <nuxt-img
    src="/images/logo.png"
    width="200"
    height="100"
    format="webp"
    loading="lazy"
  />
</template>
  1. 配置资源缓存：
// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/images/**': { headers: { 'cache-control': 'max-age=31536000' } }
    }
  }
})

SEO 优化

  1. 配置页面元数据：
<script setup>
useHead({
  title: '在线工具箱',
  meta: [
    {
      name: 'description',
      content: '功能丰富的在线工具箱，包含天气查询、快递查询、汇率转换等实用工具'
    }
  ]
})
</script>
  1. 添加 sitemap：
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap'],
  sitemap: {
    hostname: 'https://your-domain.com'
  }
})

域名配置

  1. 在 Netlify 的域名设置中添加自定义域名
  2. 配置 DNS 记录：
    • 添加 CNAME 记录指向 Netlify 提供的域名
    • 等待 DNS 解析生效

监控与维护

  1. 使用 Netlify Analytics 监控网站访问情况
  2. 定期检查并更新依赖包：
# 检查更新
npm outdated

# 更新依赖
npm update
  1. 监控网站性能：
    • 使用 Lighthouse 进行性能评分
    • 定期检查并优化加载速度
    • 监控错误日志

总结

通过本文的指导，我们完成了：

  1. 项目代码托管到 GitHub
  2. Netlify 自动化部署配置
  3. 性能优化和 SEO 设置
  4. 域名配置和网站维护

现在，你的在线工具箱项目已经成功部署到线上环境，可以被用户访问使用了。记得定期维护和更新，确保网站始终保持良好的性能和用户体验。