不会前端也能写官网？没问题，Devbox+Cursor 带你起飞

2024/12/3 0:03:05

本文主要是介绍不会前端也能写官网？没问题，Devbox+Cursor 带你起飞，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

大家平时都是怎么给自己的产品开发官方网站的？

是不是先在本地配置好环境，然后使用 IDE 写代码，写完代码后部署到服务器生成预览链接，团队协作成员再打开浏览器访问，然后你再修改，再部署，再访问，再修改，再部署，再访问…

今天给你们分享一个丝滑的方案，让你告别繁琐的本地环境配置，告别反复沟通修改，告别部署上线配置一大堆服务器和证书，只需3分钟就能完成部署上线。

先给你们看看效果，网站预览地址：https://iceivijrqqpj.hzh.sealos.run/

下面是详细教程。

创建开发环境

首先进入 Sealos 桌面，打开 Devbox 应用，新建一个项目。因为我的官网项目是基于 Next.js 开发的，所以我选择了 Next.js 作为运行环境。

Devbox 为开发者提供了几个非常实用的功能：

灵活的资源配置：可以根据项目需求自由调整 CPU 和内存，选择合适配置既保证性能又能控制成本。
一键启用 HTTPS：系统自动分配安全域名，再也不用为配置 SSL 证书发愁。
全自动域名管理：从开发到测试环境，域名配置全程由系统处理，开发者可以专注于代码本身。

因为这是一个从本地迁移的项目，我对环境做了一些定制化调整：

Node 环境升级到 20.x 版本
pnpm 包管理器更新至 8.x

不过对于全新项目来说，Devbox 的默认配置已经足够优秀，你可以直接开始开发之旅！

Cursor AI 助力开发

环境准备好后，我们直接用 Cursor 连接开发环境。在操作选项中选择使用 Cursor 连接：

首次打开会提示安装 Devbox 插件，安装后即可自动连接开发环境。

有了 Cursor AI 的加持，编码效率直接起飞！

接下来我克隆了项目仓库，这一切都在云端，但使用起来跟本地开发完全一样。

来看看实际的开发过程：AI 助力，效率翻倍

我鼠标放这里代码就帮我写完了！！！

{/* Tabs */}
<div className="mb-9 flex flex-wrap justify-center gap-4 text-sm font-medium sm:text-base">
  {Object.keys(mockData).map((tab) => (
    <button
      key={tab}
      className={`rounded-md px-2 py-1 ${
        activeTab === tab
          ? 'rounded-md bg-[#FAFCFF] text-black'
          : 'text-custom-secondary-text hover:bg-[#FAFCFF]/80'
      }`}
      style={{
        boxShadow:
          activeTab === tab
            ? '0px 4px 4px 0px rgba(19, 51, 107, 0.05), 0px 0px 1px 0px rgba(19, 51, 107, 0.08)'
            : '',
      }}
      onClick={() => handleTabChange(tab)}
    >
      {tab}
    </button>
  ))}
</div>