快速开始

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

1
前置条件

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

Github账号 (https://github.com/ 进行注册) 用途：代码仓库存储
重要提醒：请在Github中创建一个组织，用于后续代码推送（详见第6步）
Supabase账号（https://supabase.com/ 进行注册）用途：数据库
Google Cloud Console账号 （https://console.cloud.google.com/）用途：用户登录
Replicate账号 （https://replicate.com/ 进行注册）用途：调用AI生成API
Stripe （https://stripe.com/）或 Creem （https://creem.io/ ）用途：网站用户支付系统

2
模型选择界面

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

$模型选择界面截图$

3
内容配置界面

按照内容配置要求，将必要的信息填写完成

可自由增加、删减Features,why choose,Pricing,faq部分的内容卡片数量，和自行上传图片

$内容配置界面截图$

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);

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);

$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配置就完成了，进入最后预览确认界面，点击推送

6
授权Github App推送代码

为什么需要Github App授权？

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

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

创建Github组织

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

访问 https://github.com/organizations/new

$Github组织创建页面，选择免费计划$

选择 "Free" 免费计划

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

$Github创建组织页面，显示组织名称输入框$

点击 "Complete Setup" 完成创建

$Github组织创建完成页面$

✅ 完成！

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

7
把代码部署到Vercel

⚠️ 重要变更通知

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

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

仓库转移操作

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

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

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

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

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

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

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

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

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

$部署成功页面$

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

$部署成功页面$

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

$GitHub环境变量文件$

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

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

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

$Vercel GitHub登录$

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

$Vercel导入仓库$

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

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

$Vercel环境变量配置$

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

$Vercel域名配置$

🎉 恭喜完成配置！

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

网站已部署

AI模型已配置

支付系统已就绪

📖相关文档

📚

项目说明

了解 HappyShip 的核心功能和技术优势

📝

产品更新日志

查看最新功能更新和产品动态

HappyShip

快速开始

1前置条件

2模型选择界面

3内容配置界面

4AI模型配置

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

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

(3)参数配置

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

5功能集成配置

(1)NEXTAUTH_SECRET和NEXTAUTH_URL配置

(2)GOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRET配置

(3)配置Supabase

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

Stripe 支付版本

Creem 支付版本

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

(5)配置Stripe

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

6授权Github App推送代码

为什么需要Github App授权？

创建Github组织

✅ 完成！

7把代码部署到Vercel

⚠️ 重要变更通知

仓库转移操作

🎉 恭喜完成配置！

📖相关文档

目录

1
前置条件

2
模型选择界面

3
内容配置界面

4
AI模型配置

5
功能集成配置

6
授权Github App推送代码

7
把代码部署到Vercel