Bolt.diy 创意建站 | 不懂代码，你也可以快速建站

前言

最近看到阿里云有这样一个活动【Bolt.diy 一步搞定创意建站】。整个操作过程无需复杂配置，一键部署即可快速搭建个性化网站，操作丝滑到连小白都能轻松上手，免费额度直接领，云资源+开发工具全包揽，尤其适合想低成本验证创意的开发者——从个人作品集到企业官网，全程省心高效，这种“零门槛+高自由度”的建站福利必须安利给大家，手快有手慢无，领取免费额度，一键部署 Bolt.diy：https://www.aliyun.com/solution/tech-solution/fc-bolt-diy?utm_content=g_1000403257
在文章开始之前，我们先来简单介绍一下什么是 Bolt.diy？

Bolt.diy

那么什么是 Bolt.diy？简单来说，Bolt.diy 是 Bolt.new 的一个开源版本，它提供了更高的灵活性和可定制性，通过自然语言交互简化开发流程，并提供全栈开发支持，同时允许用户二次开发。对于 Bolt.diy 我们也可以简单理解为是一个基于 AI 的 Web 开发工具，用户可以通过自然语言与 AI 交互，描述需求后，Bolt.diy 会自动生成相应的代码框架。例如，用户只需说“我想创建一个简单的博客网站”，Bolt.diy 就会立即生成一个完整的博客网站框架‌。并且 Bolt.diy 完全在浏览器中运行，无需任何本地配置，特别简单方便。

方案架构

对于本次测评方案【Bolt.diy 一步搞定创意建站】，整个方案是基于云原生应用开发平台 CAP 构建 Web 服务，利用其函数计算资源与阿里云百炼的模型服务能力，快速完成 Bolt.diy 开源项目的部署，部署过程可以称得上为一键部署，部署完成后通过浏览器直接访问示例应用，生成创意网站。方案架构图如下

部署操作

在部署操作开始之前，首先需要你准备好以下资源，包括开通阿里云百炼服务和函数计算服务，具体的开通操作这里就不再详细介绍了，挺简单的，直接登录阿里云百炼大模型服务平台 以及 登录函数计算服务控制台 按照提示开通服务即可。

这里需要说明的是，如果你是新人，首次开通百炼后，您可领取新人免费额度（有效期：30 至 180 天），用于模型推理服务。同样的首次开通函数计算服务的话，也可以参考文档（点此领取）来领取提供的免费试用额度。如果不是新人的话，直接部署就可以，按量付费消耗也不多。按量付费，是一种先使用后付费的计费方式。您只需为实际使用的函数计算资源付费，不需要提前购买资源。

应用部署

这里我们直接点击部署文档为我们准备的项目模板，点击 前往部署 打开我们提供的云原生应用开发平台 CAP 项目模板，全部不用改动，按照模板的默认设置即可，直接点击【部署项目】

在项目资源预览页面确认涉及到的资源项目开通状态后，点击【确认部署】

等待部署完成之后找到应用生成的 访问地址

点击访问地址，在浏览器中，会自动跳转为 HTTPS 链接地址。提示安全证书警告或错误，可以选择点击高级选项，然后点击继续前往以访问该网站


进入示例应用之后如图所示

配置百炼 API-KEY

进入示例应用之后，需要配置百炼 API-KEY，那么需要我们首先登录 阿里云百炼大模型服务平台。点击【应用】，选择左侧菜单【API-Key】，然后点击【创建我的API-KEY】

在弹出的创建新的API-KEY 弹窗页面选择【归属业务空间】以及描述后，点击【确定】完成API-Key 的创建

创建完成后，点击列表的【查看】按钮并复制 API-KEY 后面备用

复制好我们创建的API Key 之后，就可以点击示例应用的编辑按钮来配置百炼 API-KEY。点击编辑按钮

输入我们复制好的 API Key 并点击 对勾，确认

创意建站

那么在配置好阿里云百炼服务平台创建的API Key 之后，我们就可以点击在 Bolt.diy 示例应用页面的默认示例来创建网站，这里我选择创建一个中文星座的提示语

这里我们可以看到对应Bolt.diy 示例应用的几个工作区域，在操作区域我们可以等待网站代码生成完成之后点击 【Preview】预览生成的页面，同时也可以点击【Download Code】 下载生成的源码文件

当你在AI 回答区域看到以下内容的时候，说明代码生成结束

在看到代码生成结束之后，同时也出现了 Terminal Error 的错误，这个时候可以单击【 Ask Bolt】，让 AI 自动处理问题

或者遇到不能自动预览时，可以尝试执行命令npm install安装依赖，然后执行命令npm run dev运行项目

待整个问题都处理之后，就可以直接预览我们生成的中文星座产品页面了，具体的页面效果放大后如图

代码下载

对于符合我们预期的网站页面，我们需要下载的话，可以直接在 Bolt.diy 示例应用的命令行区域执行如下命令来对网站页面进行构建打包操作

npm run build

待命令执行完成后，左侧的Files中会新增一个名为dist的文件夹。之后点击上方的【Download Code】下载代码压缩文件

代码下载之后，后面我们就可以将我们下载的代码部署在自有服务器或者云服务器，并通过配置nginx 配置文件访问的方式来访问具体的中文星座产品页面，后面我们再详细讲，这里我先说一下 Bolt.diy 更换模型提供方的操作。

更换模型提供方

如果我们有其他模型提供方的话，那么我们也可以切换不同的模型提供方，并通过配置的方式来实现，这里我们切换模型提供方为【Deepseek】，然后点击 【Get API Key】，前往模型提供方官网获取 API Key

点击模型提供方【Deepseek】的 【Get API Key】后会跳转到Deepseek 的开发者开放平台，选择左侧菜单【API keys】并点击【创建 API key】，在弹出的创建 API key 页面输入 API key 的名称并【创建】

创建完成后在弹窗页面直接点击【复制】复制我们创建的Deepseek 的API key

复制完成后，回到更换模型提供方页面，参照前面的配置API key 的方式，点击编辑按钮后粘贴API key 后对勾即可，配置完成后，我们就可以用新的模型来进行创意建站了

到这里，我们基于云原生应用开发平台 CAP 及函数计算服务 部署搭建 Bolt.diy 开源项目 的操作就算完成了，并且我们也已经下载了我们通过 Bolt.diy 自然语言交互式开发方式获得的中文星座页面的源码，下面我们来尝试在本地部署源码并访问。其实你在本地部署源码成功之后，那么推而广之，你就可以将源码部署在云服务器或者自有服务器了。

本地部署

上面我们已经下载了编译好的前端代码，那么我们就可以在本地下载一个nginx ，然后将编译好的前端页面文件直接放在nginx 目录下的 html/dist 里面就可以在本地访问了。

nginx 下载安装

首先需要下载具体的nginx ，nginx 下载地址：https://nginx.org/en/download.html 这里我们可以选择nginx 的历史版本下载自己经常用的，这里我经常用的nginx 是1.8 版本

下载完成后直接本地解压即可，这里由于我是在本地电脑部署的，需要下载Windows-* 开头的版本，解压后可以看到如下的文件结构

进入 conf 目录，编辑nginx.conf 文件内容为如下内容

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/dist;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

这里主要关注配置文件中的访问端口 80 以及前端文件的目录配置

将我们下载的中文星座页面解压后文件目录中的 dist 目录复制并粘贴在 nginx 目录下的 html 文件夹下


下面我们回到 nginx 目录，找到nginx.exe 应用程序，右键选择以管理员身份运行

本地访问

下面我们就可以在浏览器输入具体的访问地址来访问我们本地部署的页面了，访问地址：http://127.0.0.1/ 访问效果如图

相似的配置，我们就可以将我们的前端页面通过nginx 转发的方式部署在远程服务器进行访问了。

新的尝试

这里我有一个场景，比如现在适逢初级会计招生宣传阶段，那么作为一个会计培训企业，就需要在企业的官网挂一个初级会计招生的宣传页面，页面中可以包含一些套餐信息，优惠信息，备考建议，以及一些学习咨询等内容，基于这个想法，下面我们来尝试通过 Bolt.diy 自然语言的方式来快速生成我们的初级会计招生宣传页面。

初级会计考试的招生宣传页面

在AI 对话框中输入我们的需求【我需要生成一个初级会计考试的招生宣传页面】下面是Bolt.diy 帮我们生成的页面，以及当前页面包含的主要部分

对于当前生成的初级会计考试招生宣传页面，我是不太满意的，内容过于简单，且页面也过于传统，更像是很久之前的风格，那么基于此，我需要对当前生成的页面进行一些调整，下面针对页面问题，我提出我的优化需求，优化需求内容较多，这里我通过代码片段的方式展示

对上面页面做以下调整：
* 宣传标题的年份替换为 2025年
* 课程特色以图文的形式展示，图片内容要展示授课教师图片，课程详细的文字内容介绍通过点击图片跳转
* 课程特色下面增加同级目录，展示报名套餐，比如：套餐A（书+课）、 套餐B（课+在线考试）、套餐C（1V1私教）
* 报名流程可以通过文字和图片结合展示的方式，引用官方的报名流程图展示
* 常见问题需要展示问题和答案

经过优化后的页面我们可以看到已经按照我上面提出的页面调整内容进行了调整，包括年份的替换，课程特色修改等内容

这里我们看到对于 Bolt.diy 来说，并不能直接生成图片并嵌套在通过自然语言生成的页面中，那么我们可以尝试通过上传图片并制定替换的方式来尝试看是否可以替换掉指定位置无法展示的图片，从而让我们的页面变得更好看。这里我通过上传附件的方式上传提前命名好的图片，并通过文字描述指定图片替换的位置，尝试替换图片操作

这里我其实并不知道Bolt.diy 通过附件上传图片后的图片原始文件名是否还和本地的一样，只能说希望一样，然后可以按照对应的图片名进行具体位置的替换。需求的详细文字描述内容如下

对上面页面再次调整：
* 用图片001.png 和002.png 分别替换课程特色缺失的图片
* 为套餐A增加背景图片4.png，为套餐B增加背景图片2.png，为套餐C增加背景图片3.png
* 用图片1.png替换报名流程图中缺失的图片

添加了附件之后的 Bolt.diy 执行有点耗时，具体耗时时间没有统计，大概耗时10分钟左右，那么下面我们先来看一下Bolt.diy 在执行页面优化调整的时候，是否真的按照我们的描述进行了图片的替换，下面先来看效果图

通过红框部分的前后对比图，我们实际上大概知道，Bolt.diy 在执行我们的自然语言提出的优化调整需求时，确实进行了调整，只是我们上传的附件图片并没有被正确的引入，那么这里我们再来看一下源码

通过源码分析来看，我们的需求描述内容 Bolt.diy 确实执行了，并且也是完全按照我们提出的优化需求进行替换的，只是替换后的图片路径，对应左侧的资源文件来看，并没有将我们上传的附件作为资源文件放在左侧资源下。因此在我们看到页面展示时，并没有看到具体的页面展示图片。那么最终的效果图就像这样，虽然页面看起来还是不美，但是还是可以继续优化的，这里受限于时间，页面优化先告一段落

尝试后的发现

经过我们上面尝试的效果来看，目前Bolt.diy 主要是支持文本类型的自然语言的交互内容的开发，并不支持像上面我通过上传附件图片，并通过指定附件名称的方式来替换页面中具体位置未展示图片的操作，个人推测应该是因为在AI 对话框中输入的内容经过AI 自然语言分析之后会转化成对应的页面样式内容的展示，并不会直接将我们上传的附件图片做为原始文件传递到生成的页面资源下。
那么到这里就是我个人理解的错误了，对于AI 对话框的附件上传，正确的理解其实是为了方便当需求描述内容过多时，不用手动输入AI对话框，而是可以通过上传附件解析的方式来进行后续的页面生成操作。不过总的体验还是不错的，页面生成的质量，效率都是可以的，唯一的遗憾是不够美。
那么其实想让上面的图片展示出来，就可以通过下载代码，本地二次开发补充资源文件以及修改引用图片路径的方式来进行尝试，理论上肯定是可行的，只是需要调整一下图片资源文件的存放位置及路径配置等。

问题整理

关于附件

这里的问题其实也不完全算是 Bolt.diy 的问题，因为没有在代码区域找到上传资源图片的入口，所以想到了通过在AI 对话框上传附件图片的方式，同时结合文字描述来替换右侧网页中的图片，但是尝试后的结果是不行的，AI 对话框中上传的附件资源仅会用于AI 对话内容的分析，而不会将附件资源转移到右侧页面目录下的资源文件中

关于发布

目前的 Bolt.diy 还不支持直接通过配置的方式一键发布到远程服务器或者自有服务器，

但是在上面我的文章中，我记录了通过nginx 配置来实现本地部署前端页面资源包的方式发布前端页面并访问的操作，大家也可以通过相似的操作，在远程服务器或者自有服务器配置并上传资源到指定nginx 目录下后实现访问。当然也可以参考部署文档中提到的将生成的代码部署到自主管理的云服务器环境的操作

到这里，关于本次基于云原生应用开发平台 CAP 和 函数计算 快速搭建Bolt.diy 并一步搞定创意建站的部署操作就结束了，由于时间比较分散，每次写文章时总会部署一遍（来回删除并部署，是心理上为了避免资源浪费来的操作，哈哈）。那么整个这篇文章写下来大概部署删除操作了四次，不过每次一键部署很快的，几分钟搞定，并不耽误时间。对于资费的问题，大家可以通过函数计算控制台查看，

大家可以看到，虽然我来回部署了四次，但是函数资源的消耗量其实并不高，对于个人学习或者企业正式使用来说，成本方面是完全可控的。