用户名:  密码:   
网站首页即时通讯活动公告最新消息科技前沿学人动向两岸三地人在海外历届活动关于我们联系我们申请加入
栏目导航 — 美国华裔教授专家网科技动向科技前沿
关键字  范围   
 
放弃Shopify,10分钟用cursor做一个免费跨境独立站
来源:跨境Ai视界 | 作者:TechTerry | 2024/10/9 20:10:16 | 浏览:58 | 评论:0

最近我在做一些多店铺的运营,需要做多品牌备案,就随手把品牌域名注册下来了,只是为了防止后面被别人抢注。

但是亚马逊上面很多恶意投诉是可以用图片投诉的,如果有个上线的品牌网站的话,相对来说好申诉一些。

说起做跨境电商的网站,很多人的第一反应就是Shopify等类似的平台。但其实我只是想做一个品牌展示的网站,放几个产品就好了。

因为前期客户也不会在我的独立站下单,所以不需要支付功能。那就是只需要一个主页,加几个页面放about和contact就行了,单独的collection都不需要。

那既然这样,我就没有必要每月给shopify交29美元,把这钱续费Claude不香吗?

技术栈
需求确定后,就想了下整个流程。免费的服务器首选Vercel,主要是部署Nextjs相对方便点,但是后续收费贵,暂时不用考虑这一点,等收费了可以再做迁移。

总结技术栈就是,域名购买namesilo + Web框架Nextjs + 免费主题模板astro + 流量中转Cloudflare。

同时我最近把代码编辑器从vs code切换到了cursor。Cursor内置的cladue可以辅助编程,可以基于整个web项目,提供建议,效率提高很多。

这也是我只用10分钟就可以做好一个品牌独立站的关键。

Astro主题
Astro主题是轻量级网站模板,可以生成纯HTML页面,加载速度快,对SEO友好,同时支持多种前端框架组件和Markdown内容管理。

我选用的是其中的免费主题 Quick Store。模板就只有一个落地页,没其他东西了。果真是像名字说的那样,quick store。。。

网站:https://astro.build/themes/details/quick-store/

放弃Shopify,10分钟用cursor做一个免费跨境独立站

Cursor编辑器
Cursor是一款融合AI技术的创新代码编辑器,内置基于ChatGPT,Claude等AI助手,能理解项目上下文并提供智能代码补全、重构建议和问题解答。

我以鞋子的产品展示网站为例,来实际使用下cursor。现在我已经把quick store的代码拉到了本地。

Cursor的界面和 vs code几乎一模一样,该有的功能,插件都有了,可以算是平替了。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

我先用npm install安装一下,然后进入开发模式。现在,正片开始。

首先用快捷键”Command“+”L” 调出AI chat界面。然后@codebase,让AI扫描整个项目。

可以看到,他已经给我了一些建议,和设计方式,我直接点Apply,测试全部自动运行。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

修改后的代码可以自动输入到文件里,我选择接受试一下。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

我手动创建了about.astro文件,点击chatbot的apply按钮,代码自动导入进去,得到了about页面。丑是丑了点,毕竟我也没给什么要求嘛。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

Contact页面也是一样的流程。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

然后去主页更新一下hero模块。描述还是比较简单,如果有更高要求,可以继续优化下文字描述。不过这几个页面是在我只输入两行字后,就出来的,效率提升呈几何增长。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

现在我们来优化下product部分。我从pexels无版权网站选了几张图片,也写了产品名称和价格,把信息输入给chatbot。可以看到,cursor已经自动把产品信息填入到代码中了。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

最后,我们来更新下footer部分。更新后,加入了导航,也添加了社交媒体的图标链接。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

我们再来看下主页,已经全部换成我们的信息了。回顾整个过程,我也就和他说了最多5句话,就把需求全部实现了。我只想说,用Cursor做个产品展示的landing page简直是降维打击。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

Github托管代码
直接fork原作者项目,再把我修改后的的版本,上传上去。因为我增加了几个页面,还是和源代码有一点点小区别,里面放了预览版本可以看网站演示。

项目地址是:https://github.com/TechTerryDev/quickstore-shoes

放弃Shopify,10分钟用cursor做一个免费跨境独立站

Vercel部署
因为Vercel的免费版本够用了,我们直接选择导入github代码进去。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

部署完成后,可以查看网站预览的链接:https://quickstore-shoes.vercel.app/

放弃Shopify,10分钟用cursor做一个免费跨境独立站

Cloudflare中转
由于我手边没有闲置的域名,无法实际演示,就简单说下流程。首先在vercel-settings中添加你的域名。Vercel会给一个A记录,和一个CNAME,这两个都输入到cloudflare中的DNS中。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

在Cloudflare中添加你的域名自动解析。解析完成后,你需要把域名商的DNS改成cloudflare给你的。比如说我是在namesilo买的域名,就在那里改DNS指向到cloudflare。

放弃Shopify,10分钟用cursor做一个免费跨境独立站

最后,cloudflare代理成功后,vercel的记录也成功后,网站就可以正常打开了。如果有需要的可以在cloudflare里注册域名邮箱。

我现在用的是yandex的域名邮箱,注册的比较早,当时还不收费,现在可能要收费了,大家自行测试下。

总结
好了,整个过程就是这样。回顾一下,我们用了这么几样东西:

1.Astro主题 - 搭静态网站真香
2.Cursor编辑器 - AI帮写代码,基础前端可以毕业了
3.Github - 托管代码,修改后及时同步到vercel
4.Vercel - 免费部署,联动github
5.Cloudflare - DNS解析加CDN,网站加速

说实话,最让我惊艳的还是Cursor这个编辑器。AI辅助简直就是开挂,几句话的功夫就把网站做出来了。

对比之下,我以前用Shopify折腾半天的事,现在10分钟就搞定,还省了不少钱。

这种方式特别适合,就想做个简单展示页的卖家。当然,要是以后生意做大了,想加支付功能或者换网站框架,也是无成本切换。

在AI时代,新品牌想做个产品展示网站,真成了两句话的事。省下的时间精力,都能放在研究产品和运营上。

希望我这个经历能给大家一点启发,有想法的朋友,欢迎加我微信讨论。

相关栏目:『科技前沿
这样图解Transformer应该没人看不懂了吧——Transformer工作原理 2024-10-16 [28]
Nature:智能体涌现出语言 2024-10-16 [23]
50个顶级ChatGPT论文指令 2024-10-10 [74]
推荐五种简单有效的数据可视化方式 2024-10-10 [60]
这么有深度的文章是ChatGPT写的? 2024-10-10 [52]
讲透一个强大的算法模型,CNN!! 2024-10-10 [46]
人类与 AI 协同的三种模式 2024-10-10 [65]
11 种经典时间序列预测方法! 2024-10-09 [47]
美国宇航局(NASA)航天器发现木卫二咸海中可能存在生命! 2024-10-09 [68]
Codon加持,Python 编译速度提升100倍?几乎可以拳打 c/c++! 2024-10-09 [56]
相关栏目更多文章
最新图文:
:北京452万人将从北京迁至雄安(附部分央企名单) :《2019全球肿瘤趋势报告》 :阿尔茨海默病预防与干预核心讯息图解 :引力波天文台或有助搜寻暗物质粒子 :Sail Through the Mist - SoCal Innovation Forum 2019(10/5) 游天龙:《唐人街》是如何炼成的:UCLA社会学教授周敏的学术之路 :“为什么海外华人那么爱国,但是让他回国却不愿意?...“ :学术出版巨头Elsevier 彻查433名审稿人“强迫引用”黑幕
更多最新图文
更多《即时通讯》>>
 
打印本文章
 
您的名字:
电子邮件:
留言内容:
注意: 留言内容不要超过4000字,否则会被截断。
未 审 核:  是
  
关于我们联系我们申请加入后台管理设为主页加入收藏
美国华裔教授专家网版权所有,谢绝拷贝。如欲选登或发表,请与美国华裔教授专家网联系。
Copyright © 2024 ScholarsUpdate.com. All Rights Reserved.