HappyShip Logo

HappyShip

使用文档

快速开始

欢迎使用 HappyShip!本指南将帮助您从零开始创建并部署您的第一个 AI 驱动的网站。

1
前置条件

在开始之前,请确保您已准备好以下账户:

2
模型选择界面

点击进入配置页面(配置页面的文字变成可点击的超链接,导航到template页面),选择要创建的模版,在预设的6个主题中选择自己喜欢的

模型选择界面截图

3
内容配置界面

📹 视频教程

观看上方视频,快速了解如何使用 JSON 配合 AI 工具完成内容配置。

🤖 JSON 配合 AI 填写

📋 操作步骤

  1. 1.

    从英语配置中导出 JSON 文件

    点击"导出 en.json"按钮下载模板文件

  2. 2.

    将 JSON 文件放到 ChatGPT 等 AI 软件中

    可以使用 ChatGPT、Claude 等 AI 助手

  3. 3.

    让 AI 帮我们改写 JSON 中的内容

📝 推荐提示词

你好,我要改写这份 JSON 文件的内容,只修改内容,不要修改字段名。然后我希望主题是:nano banana ai image generator。我希望最后你给到我的是一份可下载的 JSON 文件。

⚠️ 重要提醒:你可以自己修改提示词,但一定要包含这句话:"只修改内容,不要修改字段名",否则可能会出现 JSON 导入不成功的情况。

🌍 多语言 JSON 导入

🔄 如何导入其他语言的 JSON?

  1. 1.

    先在第一步生成英语的 JSON

    确保英文配置已经完成并导入成功

  2. 2.

    让 AI 帮我们从英语的 JSON 翻译到你需要的语言

    使用下方的提示词模板

  3. 3.

    最后再导入到 HappyShip

    切换到对应语言标签,上传翻译后的 JSON 文件

📝 翻译提示词示例

好,接下来请你把这份 JSON 的内容全部翻译成中文只修改内容,不要修改字段名。我希望最后你给到我的是一份可下载的 JSON 文件。

💡 提示:可以将"中文"替换成任何你需要的语言,如日语、韩语、西班牙语等。

💳 用户积分配置

这里分为月付年付一次性三种积分模式,其中计划分为 StarterProPremium,也就是低中高三个等级。

📅 月付 (Monthly)

用户按照月来付款,一个月付款一次。你希望给他多少积分,就填写对应多少积分。

📆 年付 (Yearly)

用户一年付一次款。你希望一年给他多少积分,就填多少积分。

💰 一次性 (One-time)

用户一次性付款,能获得多少积分。

4
AI模型配置

(1)选择单模型还是多模型配置

注意:MVP版本只能配置单模型,如果需要生成网站支持多模型生成,请升级到Pro版本

然后打开Replicate,找到你需要的模型,点击进去模型页面,按照图片中箭头指引,在模型名字隔壁有复制按钮,点击复制,然后填入HappyShip页面中的AI模型版本输入框

Replicate模型复制示例

注:多模型配置,需要填写模型版本和模型名称,模型版本对应的是上面所讲到Replicate中复制的模型号,模型名称可以你自己自定义,你希望在网站中这个模型叫什么名字,就填写什么

(2)自定义每次生成所需要消耗的积分数量

您可以根据模型的复杂度和使用成本来设置每次生成所需的积分数量。

(3)参数配置

在Replicate选中的模型界面,在左侧,如图所示,会有多个要求填写的参数,找到你模型需要填写的参数,在HappyShip中选中

Replicate参数配置示例

比如下方图中在Replicate中显示,要填入prompt和aspect ratio,那就要在HappyShip网站中相对应勾选

Replicate参数配置示例

注:这一步很重要,要认真填写,仔细对照模型input参数是否对应HappyShip网站中设置的选择参数。目前HappyShip网站中设置的选择参数是最主流,最常见的,暂时不支持配置step,seed,output_num等,未来会接入
提示:Replicate模型页面中的参数,只有带*星号是必填的,别的都是选填,可填可不填,可以在HappyShip模型参数配置选项中看看支持哪些,然后看看当前模型有没有匹配的字段,然后勾选上

(4)参数默认值可填写,可不填写

一般来说不用填

5
功能集成配置

(1)NEXTAUTH_SECRET和NEXTAUTH_URL配置

NEXTAUTH_SECRET直接点击右侧按钮,自动生成

NEXTAUTH_URL,这里需要填写你的网站域名,你需要提前购买一个域名,这是未来和你的网站代码绑定的

假设,你的域名是happyship.app,那这一栏填写:

https://happyship.app

末尾不要带 / ,否则代码会出错

(2)GOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRET配置

首先你要注册一个Google Cloud Console账号,网址:https://console.cloud.google.com/ ,这是用谷歌账号登录的

进入到后台页面,按照图示操作

Google Console配置步骤1
Google Console配置步骤2

然后Project name就随意填写一个名字就好,点击create

Google项目创建

等待创建成功后,右上角点击select project,之后左侧dashboard按照图示,鼠标放到APIS & Services,选择Oauth consent screen

Google OAuth同意屏幕配置

进到界面,选择Get Started,然后填写好相应的信息,根据真实信息填写就好

Google OAuth表单填写

Audience选择 外部,接着按要求填写好剩下的信息,最后创建就好

Google受众选择外部
创建OAuth客户端
选择Web应用程序

创建好后 点击右侧 Create Oauth Client

选择Web应用程序

选择Web Application

选择Web应用程序

然后接下来两个添加URL的部分都要填写,假设,我购买的域名是happyship.org

那第一个就填写https://happyship.org

第二个 填写:https://happyship.org/api/auth/callback/google

注:大家填写的时候,就直接复制我这个,然后把happyship.org替换成你的域名就好,这一步很重要,不要配置错了

Google URLs配置

然后点击Create,你会获得Client ID和Client secret,填写进去HappyShip上配置界面对应的输入框就好

Google客户端凭据

(3)配置Supabase

首先注册一个Supabase账号 (https://supabase.com/) ,有免费额度,尽管用,用超了代表你也开始赚钱了

注册好后,会自动导航到创建部分,首先创建的Organiaztion,也就是组织,一个组织,有两个免费的数据库可以配置,这里我们先创建组织,自定义名字

Supabase组织创建

创建好组织后,在下一个界面会让我们Create new project,这就是数据库,我们要自己配置好名字和密码

Supabase项目创建

等待创建好后,左侧Dashbord点击最下边的Project Setting,然后选择Data API,这里的project url 复制下来,填写到HappyShip中Supabase URL的输入框

Supabase项目URL

接下来点击Go to Api

Supabase转到API

这里会显示ANON KEY和Service Role Key,填写到HappyShip的NEXT_PUBLIC_SUPABASE_ANON_KEY和SUPABASE_SERVICE_ROLE_KEY输入框,到这里,环境变量就配置好了,不过数据库我们还要配置

Supabase API密钥

左侧DashBorad,找到SQL Editor,点击进去,然后把下面的sql命令复制进去,然后点击右侧绿色按钮run 直到返回Success. No rows returned ,到这里 数据库就完全配置好了,已经可以用了

Supabase SQL编辑器

SQL命令 - 根据支付方式选择:

Stripe 支付版本
CREATE TABLE IF NOT EXISTS public.users_profile (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  email VARCHAR UNIQUE NOT NULL,
  name VARCHAR,
  avatar VARCHAR,
  credits INTEGER DEFAULT 0,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- 添加索引提高查询性能
CREATE INDEX IF NOT EXISTS users_profile_email_idx ON users_profile(email); 

-- 订阅表
CREATE TABLE subscriptions (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID NOT NULL REFERENCES users_profile(id) ON DELETE CASCADE,
  stripe_subscription_id TEXT UNIQUE NOT NULL,
  stripe_customer_id TEXT NOT NULL,
  stripe_price_id TEXT NOT NULL,
  plan_name TEXT NOT NULL, -- 'pro' or 'premium'
  status TEXT NOT NULL DEFAULT 'active', -- 'active', 'canceled', 'past_due', 'incomplete'
  current_period_start TIMESTAMP WITH TIME ZONE,
  current_period_end TIMESTAMP WITH TIME ZONE,
  credits_per_month INTEGER NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引
CREATE INDEX idx_subscriptions_user_id ON subscriptions(user_id);
CREATE INDEX idx_subscriptions_stripe_subscription_id ON subscriptions(stripe_subscription_id);
CREATE INDEX idx_subscriptions_status ON subscriptions(status);

-- 生成历史表
CREATE TABLE IF NOT EXISTS generation_history (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID NOT NULL REFERENCES users_profile(id) ON DELETE CASCADE,
  url VARCHAR NOT NULL, -- R2存储的URL
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引
CREATE INDEX idx_generation_history_user_id ON generation_history(user_id);
CREATE INDEX idx_generation_history_created_at ON generation_history(created_at DESC);
Creem 支付版本
CREATE TABLE IF NOT EXISTS public.users_profile (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  email VARCHAR UNIQUE NOT NULL,
  name VARCHAR,
  avatar VARCHAR,
  credits INTEGER DEFAULT 0,
  created_at TIMESTAMP DEFAULT NOW(),
  updated_at TIMESTAMP DEFAULT NOW()
);

-- 添加索引提高查询性能
CREATE INDEX IF NOT EXISTS users_profile_email_idx ON users_profile(email); 

CREATE TABLE public.subscriptions (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID NOT NULL REFERENCES users_profile(id) ON DELETE CASCADE,
  creem_subscription_id TEXT UNIQUE NOT NULL,
  creem_customer_id TEXT NOT NULL,
  creem_price_id TEXT NOT NULL,
  plan_name TEXT NOT NULL, -- 'pro', 'premium', etc.
  status TEXT NOT NULL DEFAULT 'active', -- 'active', 'canceled', 'past_due', 'incomplete', 'trialing'
  current_period_start TIMESTAMP WITH TIME ZONE,
  current_period_end TIMESTAMP WITH TIME ZONE,
  credits_per_month INTEGER NOT NULL,
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
  updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引提高查询性能
CREATE INDEX idx_subscriptions_user_id ON subscriptions(user_id);
CREATE INDEX idx_subscriptions_creem_subscription_id ON subscriptions(creem_subscription_id);
CREATE INDEX idx_subscriptions_status ON subscriptions(status);
CREATE INDEX idx_subscriptions_plan_name ON subscriptions(plan_name);

-- 生成历史表
CREATE TABLE IF NOT EXISTS generation_history (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID NOT NULL REFERENCES users_profile(id) ON DELETE CASCADE,
  url VARCHAR NOT NULL, -- R2存储的URL
  created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
);

-- 创建索引
CREATE INDEX idx_generation_history_user_id ON generation_history(user_id);
CREATE INDEX idx_generation_history_created_at ON generation_history(created_at DESC);
Replicate账单设置

(4)配置Replcate,api调用平台

首先注册一个replicate账号(https://replicate.com/),然后到Accout Seeting --- Billing绑定好支付信息(需要支持美元付款的双币信用卡,可以选择国内的中国银行万事达卡,我就是用这个)

Replicate账单设置

然后点击左上角头像,找到Api Tokens,点击进去,创建一个新的API KEY,最后再把这个key复制 放到HappyShip的REPLICATE_API_TOKEN 输入框 就好了

Replicate API令牌

(5)配置Stripe

请先确保你注册了Stripe,并且开通了商户,Stripe开通教程:https://mp.weixin.qq.com/s/br0anhSFN8qXlnbogk-sfg

创建好Stripe商家后,会进入一个test/sandbox模式,也就是测试模式,这里需要退出来,进入真实模式

进入了真实模式之后,在右侧会有Publishable key和Secret key,直接复制进去HappyShip的STRIPE_SECRET_KEY和NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY输入框中

Stripe密钥配置

接着点击左侧Product catalog,然后如图示,右侧创建产品

Stripe产品目录

接着填写产品名字,还有设置价格。价格一般是把币种选择为USD,然后输入你希望的价格,然后名字的话,我们一共要创建两个产品,分别填写PRO和PREMIUM,然后Description可以空着,最重要的是一点要选择Recurring

Stripe产品定价

创建好两个产品后,分别点击进去两个产品,如图所示,找到price id,复制进去HappyShip中的STRIPE_PRO_PRICE_ID和STRIPE_PREMIUM_PRICE_ID

注:看清楚哪个是pro,哪个是premium,别搞混了

Stripe价格ID

接着点击左下角Developers,在弹出的栏目选择Webhooks,接着Add destination

Stripe Webhooks配置

接着在如图箭头所示的箭头,分别查找,然后勾选

  • customer.subscription.created
  • customer.subscription.deleted
  • invoice.paid
Stripe Webhook事件选择1

配置好后如图2所示

Stripe Webhook事件选择2

点击下一步,默认勾选Webhook

Stripe端点URL配置

最后只需要修改Endpoint URL

举个例子,我的域名是happyship.org,那这里就要填

https://happyship.org/api/stripe/webhooks

大家实际做的时候,只需要把我这个复制,然后把域名替换就好,好了之后点击Create,就大功告成了

Stripe端点URL配置

最后创建好后,重新打开这个webhooks,点进去,右侧有个secret,把这串secret复制,粘贴到HappyShip的STRIPE_WEBHOOK_SECRET配置

Stripe Webhook密钥

到这一步全部在HappyShip网站的配置就完成了,进入最后预览确认界面,点击推送

(6)配置Creem(替代Stripe的支付方案)

说明:如果您已经配置了Stripe,可以跳过此步骤。Creem是Stripe的替代方案,两者选择其一即可。

首先注册一个Creem账号(https://www.creem.io/

根据提示正常创建好商户,然后添加产品,我们一共创建两个产品,名字分别是PRO和PREMIUM,Description自己填写就好,这个无所谓

Return URL不用填写

Creem产品创建页面

然后记得一定要选中Subscription,然后把币种、金额这些设置你自己想要的,我这里就选择USD

然后Tax category就选择Digital Goods就好,接着别的不用配置,滑动到最下面点击Create Product就好。Pro 和 Premium都是这样设置,只是名字和价格不同

Creem订阅设置

创建好后,如图所示,进入Product页面,然后点击每列产品右侧三个点,然后点击Copy Price ID,然后分别对应填入HappyShip中的Creem Pro Product ID和Creem Premium Product ID输入框中

Creem Price ID复制

接着点击右上角 Developers

Creem开发者选项

然后先复制Api Key到HappyShip的Creem API Key输入框

Creem API Key复制

接着点击Webhooks --- Create WebHooks

名字随意,回调url格式如下:比如我的域名是happyship.app,那我就填写:

回调URL格式:

http://happyship.app/api/creem/webhooks

注意:大家可以复制我这段,然后把域名替换成你自己的就好

Creem Webhook创建

接着点击进去刚刚创建好的WebHooks,如图所示,点击Reveal,把Webhooks Secret复制到HappyShip的Creem Webhook Secret输入框,就好了

Creem Webhook Secret复制

到这一步Creem配置就完成了,进入最后预览确认界面,点击推送

(7)配置Cloudflare R2(图片存储服务)

说明:Cloudflare R2是用于存储用户上传图片的对象存储服务,配置后可以实现图片的上传和访问功能。

首先进入Cloudflare(https://www.cloudflare.com/zh-cn/),注册一个账号

Cloudflare注册页面

进入后在左侧Dashboard往下滑,找到R2对象存储,然后点进去后,点击右侧的创建存储桶

R2对象存储创建存储桶

然后正常填写存储桶的名字就好,别的配置保持默认不用变

然后点击左上角R2对象存储回到R2主界面

返回R2主界面

然后如图所示,点击API,然后点击下面的管理API令牌

管理API令牌

进去后点击下面的创建User令牌

创建User令牌

名字任意,然后权限设置成最上面的"管理员读和写",别的保持默认,然后滑动到最下面,点击创建

设置令牌权限

重要配置说明:

  • Cloudflare R2 Access Key ID对应的就是"访问密钥 ID"
  • Cloudflare R2 Secret Access Key对应的就是"机密访问密钥"
  • Cloudflare R2 Endpoint对应的就是"为 S3 客户端使用管辖权地特定的终结点"

直接复制到HappyShip对应位置就好

复制API凭据

接下来点击完成,返回R2的主界面,点击进去我们刚才创建的存储桶,点击设置,然后点击左侧的自定义域,点击添加,然后自定义一个存储桶的域名

比如我的主域名是happyship.app,那给存储桶的域名一般是image.happyship.app,或者asset.happyship.app,这样的子域名,不能直接拿主域名,而是要在前边加入任意的后缀

注意:这一步的前提是,你的主域名要绑定在了Cloudflare,如果还没有绑定,可以看一下我这篇公众号文章,滑到底部,有讲怎么把购买后的域名绑定到Cloudflare(https://mp.weixin.qq.com/s/O2XQ2HXgaAD6lT9josg3FQ

自定义域名配置

绑定好了之后,在HappyShip需要填写的CLOUDFLARE_R2_PUBLIC_URL,比如我绑定的子域名是image.happyship.app,那我需要填写:https://image.happyship.app

然后Cloudflare R2 Bucket Name对应的就是你存储桶之前的命名

如果你忘记了名字,可以看我图片这里,找到你自己存储桶的名字

查看存储桶名字

6
授权Github App推送代码

为什么需要Github App授权?

为了提高安全性,HappyShip 现在使用 Github App 的方式来推送代码,而不是传统的 OAuth 方式。这样您只需要授权特定组织的读写权限,而不是所有代码库的权限,大大降低了安全风险。

重要:这个授权过程只需要进行一次,后续所有的代码库都将自动在您的组织下创建和推送。

创建Github组织

首先,您需要在Github中创建一个组织来存放您的项目代码:

2

选择 "Free" 免费计划

3

填写组织名称(建议使用您的用户名或项目名称)

Github创建组织页面,显示组织名称输入框
4

点击 "Complete Setup" 完成创建

Github组织创建完成页面

✅ 完成!

组织创建完成后,当您在 HappyShip 中点击"推送代码"时,系统会自动引导您安装 Github App 到这个组织。安装完成后,所有后续的代码库都会自动在这个组织下创建。

7
把代码部署到Vercel

⚠️ 重要变更通知

Vercel 近期变更了政策,不再允许用户免费部署组织中的代码库。为了继续使用免费部署服务,您需要将代码库从组织转移到个人账户。

操作步骤:在代码推送到组织后,进入组织仓库的 Settings → Danger Zone → Transfer repository,点击并输入指定字符串,确认转移到个人账户。

仓库转移操作

代码推送到组织后,需要先将仓库转移到个人账户,然后再进行Vercel部署:

1

进入组织中的代码仓库页面

Github仓库Settings页面,显示Danger Zone中的Transfer repository选项
2

点击 Settings → 然后鼠标往下滑动到页面底部,找到 Danger Zone → Transfer repository

Github仓库Settings页面,显示Danger Zone中的Transfer repository选项
Github仓库Settings页面,显示Danger Zone中的Transfer repository选项
3

Select one of my organizations : 选择你的个人Github用户名作为新的所有者

4

输入指定的确认字符串,点击确认转移

仓库转移确认对话框,显示输入确认字符串的界面

后续即可按照常规Vercel流程进行部署:

部署成功页面

点击右上角头像---Your repositories,然后找到刚才在HappyShip创建的仓库,点击进入仓库页面,找到名字叫做环境变量的文件,点开,然后复制里边的内容

部署成功页面
部署成功页面

注:不要复制带# 号的内容,就只复制下面配置的,如图

GitHub环境变量文件

之后,在推送成功页面打开Vercel,如果没注册过账号的,注册一下。每个账号都有免费额度,足够用了,还是那句话,等你需要付费的时候,你已经开始赚钱了,前期不要考虑这么多,最快捷最方便把网站启动才是关键,专心搞流量

接着注册登录后,选择Continue with Github,然后登陆在HappyShip网站上你登录的Github账号

注:这里一定要是同一个Github账号,否则会出现代码不同步的情况。

Vercel GitHub登录

当你创建好后,就会出现类似我图片中这样,让你选择一个你Github目前账号中存在的代码仓库,进行导入。如果你记得仓库名,就直接点击右侧import,这时候我们可以回到刚才的推送成功页面,然后如图所示,找到刚才生成的仓库名

Vercel导入仓库
Vercel导入仓库

接着往下拉,如图所示,鼠标点开Environment Variables,把我们刚才在环境变量文件中复制的东西一次性粘贴进去。

注:这里不需要一行一行粘贴,直接像我刚才提到的,除去#号的段落,别的一次性复制,然后Vercel支持一次性粘贴,好了之后点击Deploy就好了,然后等待生成成功

Vercel环境变量配置

生成好后,进入这个项目,然后上方一栏找到Setting,点击后左侧找到Domains,可以把你购买的域名添加进去,这就就大功告成了

Vercel域名配置

🎉 恭喜完成配置!

您已经成功完成了 HappyShip 的完整配置流程。现在您的 AI 驱动网站已经准备就绪,可以开始为用户提供服务了!

网站已部署
AI模型已配置
支付系统已就绪

目录