如何快速搭建一个属于自己的网站？_阿里开发者的专栏文章_微信文章

阿里妹导读

本文将详细介绍如何使用低代码开发平台，以可视化的方式添加多种风格的门户组件，快速高效地构建移动端和PC端门户网站。

一、引言

对于新手建站，网上的帖子纷繁复杂又良莠不齐，想要找到合适的建站指导流程实属不易。传统建站流程主要包括需求分析、页面设计、前后端开发以及上线后的更新与维护等阶段。

1、需求分析与准备阶段

根据网站功能需求，确定软硬件设备的种类和规格。
完成基础环境的配置及网络环境的搭建。

2、网站开发阶段

从零开始设计网站的页面布局。
编写并调试前后端代码，包括业务逻辑、数据库交互及API接口开发。

3、版本更新与迭代阶段

对功能需求的调整可能需要重新设计界面，甚至重构大量代码。

4. 网站运维阶段

正式上线后，持续的服务器维护、性能监控、安全防护及数据管理工作，会长期占用大量人力和技术资源。

随之而来的问题是：

投入成本高：传统建站方式需要购买服务器硬件设备以及组建包含设计、开发、运维等，综合的技术团队。需要持续投入大量的人力和资金。
开发周期长：从零开始设计网站，编写和调试后端代码，包括业务逻辑、数据库操作和API。当进行版本更新时，需要重新设计页面，重构代码，导致迭代成本增加。
复杂度高：从底层开始搭建和配置服务器环境，包括操作系统、数据库、基础应用的选择与部署，网络环境的搭建等一系列复杂的步骤。
维护成本高：运维人员需持续进行网站状态监控、数据备份、系统恢复、故障排除等一系列维护工作，以确保网站服务能够稳定运行。

本文将详细介绍如何使用低代码开发平台，以可视化的方式添加多种风格的门户组件，快速高效地构建移动端和PC端门户网站。 一站式以最优成本快速构建性能卓越的网站，实现快速上线。

二、建站教程

利用低代码开发平台建站主要包括三个主要流程，分别是部署资源、基于应用模板创建应用和最终发布上线。

部署资源

本方案的技术架构包括以下基础设施和云服务：

域名：一个已经完成备案的域名。
云解析 DNS：一组按照要求添加的DNS解析记录。
专有网络 VPC：一个专有网络，构建云上私有网络。
云数据库 RDS：一个云数据库 RDS MySQL 实例，为门户网站提供数据服务。
多端低代码开发平台魔笔：魔笔平台，提供一站式的应用创建和全生命周期管理。

当用户访问网站时，请求通过DNS解析至魔笔平台，借助魔笔平台提供的SSL证书，建立客户端与魔笔之间的加密连接。同时，对网站数据的修改会同步更新至后端数据库，从而简化前后端数据交互的流程。

低代码开发平台“魔笔”

魔笔是一款功能强大的低代码开发工具，能够通过可视化操作快速搭建网站：

提供丰富的门户组件库，包括图表、导航栏、轮播图等多种风格。
无需编写复杂代码，拖拽式设计快速生成网站页面。
支持移动端和PC端的同步适配，确保跨端用户体验一致性。

首次使用魔笔平台，请先单击开通魔笔空间[1]，进入页面后，无需任何操作即可完成试用版魔笔空间的开通。

创建专有网络VPC和交换机

在搭建网站时，特别是当涉及到云服务或更复杂的架构时，创建专有网络（VPC，Virtual Private Cloud）和交换机（Subnet，子网）是确保安全、性能和灵活性的重要步骤。在创建专有网络页面，配置1个专有网络和1台交换机。配置交换机时，请确保交换机所属的可用区的ECS处于可用状态，从而为RDS数据库实例构建云上的私有网络。

具体配置信息可参见下表：

3.创建云数据库RDS

阿里云RDS是一款即开即用的高性能数据库服务，无需复杂的部署和运维工作：

支持MySQL、PostgreSQL等主流数据库引擎，兼容性强。
提供自动备份、性能优化和高可用架构，确保数据的安全性和稳定性。
操作界面友好，减少对专业数据库管理经验的依赖。

创建 RDS MySQL 实例、数据库、数据库账号时注意需要记录创建的 RDS MySQL 数据库的名称、账号、密码用于之后的门户网站搭建配置。

（1）在实例列表页面，按照以下配置完成数据库实例创建。

（2）在实例基本信息页面：

在左侧导航栏，选择实例列表。

在实例列表页面，单击目标实例，进入实例管理页面。

（3）创建数据库账号：

在左侧导航栏，选择 账号管理 。然后在 用户账号 页签下，单击 创建账号 。在 创建账号 面板，设置数据库账号名称，选择账号类型为 普通账号 ，设置密码。

（4）创建数据库：

在 创建数据库 面板，设置数据库名称，填写要求参见下表。选择 授权账号 为上一步创建的账号，然后单击创建。

（5）开通外网地址：

在左侧导航栏，选择 数据库连接 。在数据库连接区域下，单击开 通外网地址 。在弹出的对话框中选择否，单击确定。

（6）设置外网地址白名单：

在左侧导航栏，选择 数据库连接 。在 数据库连接区 域下，单击 设置白名单 ，进入白名单设置页面后单击修改。

在弹出的对话框中输入魔笔的IP地址：101.200.211.106，单击确定完成添加。

说明：您需要记录创建的 RDS MySQL 数据库的名称、外网地址、账号、密码用于之后的网站搭建配置。

4.一键部署

还可以通过基于阿里云资源编排服务ROS（Resource Orchestration Service）实现一键部署，通过ROS模板可自动化地完成云资源的创建和配置，跳过上述流程，提高资源的创建和部署效率。相关配置信息可参考下图：

基于应用模板创建应用

创建应用

魔笔提供企业门户网站模板，可以帮您快速完成网站搭建，无需从零开始设计页面布局，提升网站搭建效率。

（1）登录魔笔控制台[2]。

（2）选择 模板市场 > 企业官网模板 进入详情页。在模板详情页面，您可以查看模板的详细布局、基本信息和适用的终端。

（3）单击 选用此模板 ，输入名称后单击下一步。

（4）在 数据库集成资源窗口 中，根据您创建的RDS实例进行填写：

Host： 填写您数据库的公网地址。您可以在 云数据库RDS [3] > 实例列表 ，单击目标实例，进入实例管理页面，选择 数据库链接 ，查看外网地址。
数据库名称： 填写您在上一步创建的数据库的名称，您可以在 云数据库RDS > 实例列表 ，单击目标实例，进入实例管理页面，选择 数据库管理 ，查看数据库名称。
用户名： 填写您在上一步创建的数据库账号。您可以在 云数据库RDS > 实例列表 ，单击目标实例，进入实例管理页面，选择 账号管理 ，查看数据库的登录账号。
密码： 填写您对应数据库账号的密码。

2.编辑网站信息

在应用创建完成后，您可以 查看和编辑当前应用下的全部模块 。本文以新闻数据为例，详细介绍如何执行 编辑操作 。

（1）选择左侧代码，单击 init_data 文件，将触发方式变更为 手动触发 。

（2）单击界面左上方首页。在下拉列表中，选择后台 数据_新闻数据 ，进入后台管理页面。

在后台管理页面：

您可以单击删除，清除模板提供的新闻数据，以便添加您想要展示的新闻数据。
您也可以单击新增按钮，直接为网站添加数据。填写说明请参见下表。

名称	填写说明	示例值
标题	填写展示的新闻标题。	阿里云官网
地址	填写以http/https开头的完整地址链接。	https://www.aliyun.com/
类型	选择新闻所属的行业类型。	行业
发布时间	选择新闻的发布日期。	2024-12-01

（3）完成后，单击提交，即可完成新增数据。

（4）变更完成后，单击界面左上方 后台管理_新闻数据 > 首页 返回网站首页，查看新增数据在网页上的展示情况。

说明：也可以单击H5首页，查看当前页面在移动端的展示情况。

3.新组件添加（可选）

可以通过可视化拖拉拽的方式对魔笔各个组件进行添加和移动。本文以新建数据图表为例，介绍新组件的添加方式。

（1）单击左侧添加组件按钮，向下滑动找到折线图组件，拖动至工作区。

（2）创建新的数据表。若只是想进行简单体验，可以在右侧内容 > 数据源中，直接对数据进行修改。

登录云数据库RDS控制台[4]。
在左侧导航栏，选择 实例列表 。单击目标实例，进入实例管理页面。
在实例管理页面的左侧导航栏，选择 数据库管理 。
单击 登录数据库，使用之前创建的账号和密码登录DMS系统 。
在DMS中，选择相应的数据库，执行SQL命令创建表。示例创建表命令：


CREATE TABLE home_ent (    id INT AUTO_INCREMENT PRIMARY KEY,    e_time VARCHAR(255),    e_value VARCHAR(255),    e_group VARCHAR(255));

插入数据。示例命令：


INSERT INTO home_ent (e_time, e_value, e_group) VALUES ('2023', '1500000', '第一季度'),('2023', '1650000', '第二季度'),('2023', '1450000', '第三季度'),('2023', '1550000', '第四季度'),('2024', '1650000', '第一季度'),('2024', '1500000', '第二季度'),('2024', '1700000', '第三季度'),('2024', '1600000', '第四季度');