从零到一快速独立搭建 Landing Page - Sora FM 案例解析

Link1987
1,172 阅读6分钟

Sora FM 是一个 AI 视频生成器，作者是 idoubi, 已将代码开源。Sora FM 的Landing Page 已上线，核心功能目前还在开发中。

我已 fork 代码，在本地开发调试，构建，并部署到自己了 Vercel 中 sorafm-virid.vercel.app/ , 如果你感兴趣，也可以自己动手试一试。

image.png

下面我将以 Sora FM 为案例，介绍如何从零到一快速独立搭建一个 Landing Page。

什么是 Landing Page?

Landing Page 是营销活动的一部分，有两个作用：1 是向用户介绍产品。2 是推广和转化，比如注册服务、点赞关注转发、购买产品等。

Landing Page 就像 PPT，要尽可能早的发布，甚至在产品还没有时就先发布，先给用户看到，获得反馈。

从零到一明确目标

当站在前端螺丝钉的视角时，我们的目标可能是按照设计稿和文案使用前端技术写一个简单的页面。不过，当我们从零到一独立开发时，需要站在产品的视角看问题，那么有以下几个关键目标：

  1. 页面可以通过自主域名公网访问。

  2. 页面含有明确的产品信息。

  3. 页面应能促进用户转化。

  4. 页面要有美观的 UI。

  5. 考虑搜索引擎优化（SEO）以增加页面的可见性。

从零到一开始设计方案

原型设计

原型设计要考虑页面长什么样，包含哪些信息和功能，关键文案怎么写，推广方式怎么实现。

我们可能会自己设计原型，也可能是交给其他合作伙伴来设计，不过我们要知道并且主动关注原型中这些关键信息。

访问 sora.fm/ 我们可以看到，Sora FM 的界面简单优雅，并且作者在 Header, Banner, Footer 添加了个人社交媒体，微信群，Product Hunt 引流方式。另外 sora.fm 本身就是一个非常好的可以获取自然流量的域名。

本文假设已经设计好了，就是 Sora FM 目前的效果。

UI 设计

如果我不懂设计，那我可以做出一个漂亮的页面吗？可以的，我们直接借鉴互联网中已经存在的无数页面即可。另外，最好从我们自己之前的产品或是跨领域的页面中借鉴，这样可以避免抄袭问题，对方大概率也不会介意。

Sora FM 就是借鉴了作者自己的另一个项目 aiwallpaper.shop/

实现方案

实现方案设计的第一步不是选择什么语言和框架，而是先想想是否不需要开发就能解决问题！

对于纯静态的 Landing Page，可以不需要编写代码，直接使用建站工具即可，比如阿里云/腾讯云的建站服务，Wix，Pages Kit 等。

Sora FM 的 Landing Page 只是系统的一部分，因此选择了更加灵活的工具和服务：Nextjs, Tailwindcss, Postgresql, Vercel 等目前主流的开发工具。

部署方案

轻量的个人服务建议优先考虑把服务部署在 Serverless 中，这样既降低了成本，又提高了效率，所谓降本增效～

Vercel 是目前主流的应用开发平台, 前端、后端、DB 都是 Serverless, 非常方便。

从零到一开始实现

你可以从 github.com/linchen1987… 或 github.com/all-in-aigc… 中 fork 项目，将项目直接 clone 到本地。在此基础上阅读代码，跑通流程，部署服务。

数据设计和准备

这个 Landing Page 中有一些视频数据，使用一个表来存储这些数据

CREATE TABLE videos (
    id SERIAL PRIMARY KEY,
    user_uuid VARCHAR(255) NOT NULL,
    video_description TEXT,
    video_url VARCHAR(255),
    cover_url VARCHAR(255),
    post_url VARCHAR(255),
    user_nickname VARCHAR(50),
    user_avatar_url VARCHAR(255),
    created_at timestamptz,
    uuid UUID UNIQUE NOT NULL
);

本地通过 Homebrew 安装 Postgresql wiki.postgresql.org/wiki/Homebr…

如果不了解 Postgresql 怎么使用, 可以直接询问 ChatGPT.

填充一些数据

INSERT INTO videos (
    user_uuid, 
    video_description, 
    video_url, 
    cover_url, 
    post_url, 
    user_nickname, 
    user_avatar_url, 
    created_at, 
    uuid
) VALUES (
    '8eec323a-c7e0-4bd7-88cd-de63f54593e5', 
    'a futuristic drone race at sunset on the planet mars', 
    'https://cdn.discordapp.com/attachments/1207972096345505863/1208028821186412574/CFzxxpSCn8IaARWi.mp4?ex=65e1cb83&is=65cf5683&hm=0978f03415865f23a489017a980d8158b3c12ae7df3de3994e7044a33c4fdc03&', 
    'https://pbs.twimg.com/ext_tw_video_thumb/1758218015177621504/pu/img/7AU3JclwGmwB417h.jpg', 
    '', 
    'Sam Altman', 
    'https://pbs.twimg.com/profile_images/804990434455887872/BG0Xh7Oa_x96.jpg', 
    NOW(), 
    'f2398059-263f-409a-a605-e5b41698dbb9'
);

INSERT INTO videos (
    user_uuid, 
    video_description, 
    video_url, 
    cover_url, 
    post_url, 
    user_nickname, 
    user_avatar_url, 
    created_at, 
    uuid
) VALUES (
    '123e4567-e89b-12d3-a456-426614174000', 
    'A stylish woman walks down a Tokyo street filled with warm glowing neon and animated city signage. She wears a black leather jacket, a long red dress, and black boots, and carries a black purse. She wears sunglasses and red lipstick. She walks confidently and casually. The street is damp and reflective, creating a mirror effect of the colorful lights. Many pedestrians walk about.', 
    'https://cdn.openai.com/sora/videos/tokyo-walk.mp4', 
    'https://i.vimeocdn.com/video/1799094276-64cc14bbbab00f4163e8a39475a2f2025a4b0164478b440d6075848a80ae56b0-d?mw=2200&mh=1237&q=70', 
    '', 
    'OpenAI', 
    'https://pbs.twimg.com/profile_images/1634058036934500352/b4F1eVpJ_400x400.jpg', 
    NOW(), 
    'f038984c-0b65-43b8-be43-173f1663809c'
);

INSERT INTO videos (
    user_uuid, 
    video_description, 
    video_url, 
    cover_url, 
    post_url, 
    user_nickname, 
    user_avatar_url, 
    created_at, 
    uuid
) VALUES (
    'ba218545-fa9e-4094-942a-81512b457ab6', 
    'A petri dish with a bamboo forest growing within it that has tiny red pandas running around.', 
    'https://cdn.openai.com/sora/videos/petri-dish-pandas.mp4', 
    'https://i.vimeocdn.com/video/1798772972-829d4439a934ddd414264dcd68cec5b515977d87301fa39aaede87d33e0c30c1-d?mw=2000&mh=1126&q=70', 
    '', 
    'OpenAI', 
    'https://pbs.twimg.com/profile_images/1634058036934500352/b4F1eVpJ_400x400.jpg', 
    NOW(), 
    '2bbc6593-9dcb-47cc-b88d-14c852a463e2'
);

使用 nextjs 创建项目脚手架

我们直接使用 fork 的项目代码，所以不用通过 nextjs 创建脚手架了。

实现数据接口

参考项目中 /models/video.ts 中实现的代码。

实现页面、组件和样式

项目试用了 nextjs 和 tailwindcss 来做页面，代码在项目的 /app 目录中。

关于 nextjs 和 tailwindcss 的相关知识，大家去官网查阅即可，这里不做过多讲解。

在生产环境中准备数据

在 Vercel Dashboard 中创建一个数据库（我这里的数据库名称是 "postgres-1" ），创建后直接执行 SQL 脚本即可添加数据。

image.png

部署到 vercel 中

在 Verel 的 Dashboard 中创建项目后，每当我们在 push 代码后，vercel 会自动将最新的代码部署

image.png

设置域名和证书

域名配置涉及到域名购买，DNS配置，HTTPS证书配置等，本文不做讲解。

Vercel 中集成了这些功能，可查阅 相关文档。另外推荐 Cloudflare , 好用便宜又省心。

统计和监控

Vercel 自带统计和监控服务，在 Vercel Dashboard 中开启即可

image.png

总结

本文站在产品视角介绍了如何搭建一个 Landing Page, 并通过一个真实的项目简要介绍了每一步要做什么。

在公司中，我们通常站在开发者螺丝钉的视角，而当我们独立实现一个软件时，即使是在帮助别人实现产品，我们要站在产品负责人的视角看问题。

对于开发者来说，做小产品、做早期产品的上下文和在大厂中的上下文是不一样的。当我们实现一个小产品，或是早期的第一个版本时，在大厂中遇到的高并发，高可靠，基础设施建设等等，这些都不是最重要的。我们需要的是如何站在巨人们的肩膀上快速实现自己想要的东西。

avatar
文章
阅读
粉丝