快速开始

感谢选择 ShipAny，这是一个 NextJS 开发框架，用于快速开发 AI SaaS 项目。

获取 ShipAny 代码

  1. 在 ShipAny 官网下单购买

https://shipany.ai/pricing

  1. 支付完成后，进入订单中心

https://shipany.ai/my-orders

选择订单进行激活。

  1. 绑定你的 Github Username 进行激活

activate

  1. 激活成功后，你将在 Github 通知中心收到邀请，点击邀请链接加入 ShipAny 代码仓库

本地开发

拉取项目代码

  1. 进入 ShipAny 代码仓库（如果未加入仓库，打开会是 404）

https://github.com/shipanyai/shipany-template-one

  1. 选择 git clone 的方式，或者直接下载源代码到你的本地电脑

ssh-clone-project

克隆代码：

git clone [email protected]:shipanyai/shipany-template-one.git my-shipany-project

安装项目

  1. 进入项目根目录
cd my-shipany-project
  1. 安装项目依赖
pnpm install

开发调试

  1. 复制环境变量配置文件
cp .env.example .env.development
  1. 启动开发服务器
pnpm dev

pnpm-dev

  1. 本地预览

在浏览器打开 http://localhost:3000 ，即可预览你的项目

preview

定制化修改

修改网站配色

  1. 选择一个 shadcn 主题调试器
  1. 为你的项目调制一套主题配色：

theme-generator

ShipAny 使用 tailwindcss4，请使用 oklch 颜色格式，复制主题样式

  1. 粘贴主题样式到项目文件：src/app/theme.css

theme-css

  1. 重新进入项目预览页面，即可看到你定制的主题

theme-preview

修改落地页内容

  1. 打开落地页内容文件：src/i18n/pages/landing/en.json

  2. 使用 AI 辅助生成新的落地页内容

提示词参考：

I want to build a landing page for my product named "Flux AI Image Generator", please update the landing page json file, content reference @Web @https://www.flux.ai/
  1. 使用 AI 生成的内容，替换掉默认的内容

update-landing

  1. 预览新的落地页

new-landing

  1. 更新其他落地页内容文件

根据你的需求，把 src/i18n/pages/landing 下的所有文件都更新

修改网站多语言文案

  1. 打开网站多语言文件：src/i18n/messages/en.json

  2. 使用 AI 生成新的内容

提示词参考：

update content of this file, for my new project "Flux AI", which is an AI Image Generator, with keywords "flux ai, ai image generator"
  1. 修改所有文件内容

根据你的网站信息，把 src/i18n/messages 目录下的所有文件都更新

修改网站协议

在网站正式上线之前，请根据你网站提供的服务，更新网站协议。

网站协议内容位于： src/app/(legal) 目录下

  1. 更新隐私政策

使用 AI 生成新的隐私政策内容。

提示词参考：

update privacy-policy according to landing page content @en.json
with brand name "ShipAny", domain "shipany.ai", contact email is "[email protected]"

用新的内容替换 src/app/(legal)/privacy-policy/page.mdx 文件中的内容，更新隐私政策。

  1. 更新服务条款

使用 AI 生成新的服务条款内容。

提示词参考：

update terms-of-service according to landing page content @en.json
with brand name "ShipAny", domain "shipany.ai", contact email is "[email protected]"

用新的内容替换 src/app/(legal)/terms-of-service/page.mdx 文件中的内容，更新服务条款。

修改网站 Logo 和 Icon

请为你的网站生成 Logo 和 Icon 图片，分别替换 public/logo.png，public/favicon.ico 两个文件。

可用于生成 Logo 的网站推荐：

修改网站地图

网站地图文件地址：public/sitemap.xml，默认内容如下：

<?xml version='1.0' encoding='utf-8' standalone='yes'?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://shipany.ai/</loc>
    <lastmod>2024-12-24T10:00:00+00:00</lastmod>
  </url>
</urlset>

请根据你的网站在线上运行的域名和需要暴露给搜索引擎的页面路径，更新此文件。

修改配置内容

开发环境的配置文件是：.env.development，线上环境的配置文件是：.env.production

请根据项目实际情况，配置这两个文件的内容。配置参考：

# -----------------------------------------------------------------------------
# Web Information
# -----------------------------------------------------------------------------
NEXT_PUBLIC_WEB_URL = "http://localhost:3000"
NEXT_PUBLIC_PROJECT_NAME = "ShipAny"
 
# -----------------------------------------------------------------------------
# Database with Supabase
# -----------------------------------------------------------------------------
# https://supabase.com/docs/guides/getting-started/quickstarts/nextjs
# Set your Supabase DATABASE_URL
DATABASE_URL = ""
 
# -----------------------------------------------------------------------------
# Auth with next-auth
# https://authjs.dev/getting-started/installation?framework=Next.js
# Set your Auth URL and Secret
# Secret can be generated with `openssl rand -base64 32`
# -----------------------------------------------------------------------------
AUTH_SECRET = "Zt3BXVudzzRq2R2WBqhwRy1dNMq48Gg9zKAYq7YwSL0="
AUTH_URL = "http://localhost:3000/api/auth"
AUTH_TRUST_HOST = true
 
# Google Auth
# https://authjs.dev/getting-started/providers/google
AUTH_GOOGLE_ID = ""
AUTH_GOOGLE_SECRET = ""
NEXT_PUBLIC_AUTH_GOOGLE_ID = ""
NEXT_PUBLIC_AUTH_GOOGLE_ENABLED = "false"
NEXT_PUBLIC_AUTH_GOOGLE_ONE_TAP_ENABLED = "false"
 
# Github Auth
# https://authjs.dev/getting-started/providers/github
AUTH_GITHUB_ID = ""
AUTH_GITHUB_SECRET = ""
NEXT_PUBLIC_AUTH_GITHUB_ENABLED = "false"
 
# -----------------------------------------------------------------------------
# Analytics with Google Analytics
# https://analytics.google.com
# -----------------------------------------------------------------------------
NEXT_PUBLIC_GOOGLE_ANALYTICS_ID = ""
 
# -----------------------------------------------------------------------------
# Analytics with OpenPanel
# https://openpanel.dev
# -----------------------------------------------------------------------------
NEXT_PUBLIC_OPENPANEL_CLIENT_ID = ""
 
# Analytics with Plausible
# https://plausible.io/
NEXT_PUBLIC_PLAUSIBLE_DOMAIN = ""
NEXT_PUBLIC_PLAUSIBLE_SCRIPT_URL = ""
 
# -----------------------------------------------------------------------------
# Payment with Stripe
# https://docs.stripe.com/keys
# -----------------------------------------------------------------------------
STRIPE_PUBLIC_KEY = ""
STRIPE_PRIVATE_KEY = ""
STRIPE_WEBHOOK_SECRET = ""
 
NEXT_PUBLIC_PAY_SUCCESS_URL = "http://localhost:3000/my-orders"
NEXT_PUBLIC_PAY_FAIL_URL = "http://localhost:3000/#pricing"
NEXT_PUBLIC_PAY_CANCEL_URL = "http://localhost:3000/#pricing"
 
NEXT_PUBLIC_LOCALE_DETECTION = "false"
 
ADMIN_EMAILS = ""
 
NEXT_PUBLIC_DEFAULT_THEME = "light"
 
# -----------------------------------------------------------------------------
# Storage with aws s3 sdk
# https://docs.aws.amazon.com/s3/index.html
# -----------------------------------------------------------------------------
STORAGE_ENDPOINT = ""
STORAGE_REGION = ""
STORAGE_ACCESS_KEY = ""
STORAGE_SECRET_KEY = ""
STORAGE_BUCKET = ""
STORAGE_DOMAIN = ""
 
# Google Adsence Code
# https://adsense.com/
NEXT_PUBLIC_GOOGLE_ADCODE = ""

项目检查

在提交项目代码前，请检查以下内容是否都已按照实际情况修改。

  • 修改网站配色。src/app/theme.css
  • 修改落地页内容。src/i18n/pages/landing/*.json
  • 修改多语言文案。src/i18n/messages/*.json
  • 修改网站协议。src/app/(legal)/**/page.mdx
  • 修改网站 Logo 和 Icon。public/logo.png，public/favicon.ico
  • 修改网站地图。public/sitemap.xml
  • 修改配置内容。.env.development，.env.production

提交代码

  1. 创建 Github 仓库

请务必选择私有仓库，不要公开发布 ShipAny 的代码，拒绝盗版。

create-project

  1. 将修改后的项目代码，提交到项目 Github 仓库
git remote set-url origin https://github.com/your-username/your-project-name.git
git add .
git commit -m "update landing page"
git push origin main

部署上线

可参考以下步骤，使用 Vercel 把项目快速部署上线。

其他部署方式可参考：

  1. 在 Vercel 控制台创建新项目，导入代码仓库，一键部署

vercel-new-project

  1. 等构建完成，即可在 Vercel 控制台看到你的项目

vercel-console

  1. 打开域名，即可访问你的项目

vercel-preview

前置说明