AI工具链实战：零代码基础，几天内搭建现代化企业官网-平芜编程栈

你爸是不是也说过类似的话：“儿子啊，公司这个网站太老了，客户都说看着像十年前的东西。你懂电脑，能不能帮忙弄一下？” 作为技术人，我们当然想帮忙，但一想到要从前端设计、后端逻辑、服务器部署一路搞下来，时间成本高得吓人。更头疼的是，老一辈的企业官网需求往往很模糊——“要大气”“要好看”“要能展示产品”——这比写清晰的技术需求文档难多了。

这就是AI工具真正能大显身手的地方。过去半年，我亲眼见证了从GPT-4、Midjourney到一系列AI建站工具的能力进化。现在，一个不懂代码的普通人，借助正确的AI工具链，完全有可能在几天内，从零搭建出一个功能完整、设计现代、且支持内容更新的企业官网。这不再是天方夜谭，而是一个可执行、可复现的技术方案。

本文将分享我如何用AI为我父亲的公司重做官网的完整实战过程。这不是一个简单的“AI生成静态页”的玩具项目，而是一个涵盖了需求分析、UI设计、前端开发、内容生成、后端集成乃至部署上线的全流程。你会看到，AI在其中扮演的角色远超“画图工具”，它更是产品经理、UI设计师、前端工程师和内容编辑。更重要的是，我会拆解每个环节的工具选择、实操步骤、遇到的“坑”以及最佳实践，让你不仅能复现，更能理解背后的“为什么”。

如果你正面临类似的需求，或者想探索AI在真实工作流中的落地，这篇文章将为你提供一条清晰的路径。我们开始吧。

1. 这篇文章真正要解决的问题：用AI高效交付一个“可用”的企业官网

在开始之前，我们必须明确目标：用AI辅助，高效、低成本地交付一个“可用”而非“完美”的企业官网。“可用”意味着：

设计现代化：视觉上不落伍，符合当前主流审美。
信息清晰：能完整展示公司介绍、业务、产品/服务、联系方式等核心信息。
易于维护：后台内容更新（如新闻、产品）不需要每次都写代码。
技术可控：部署简单，后续若有开发者接手，代码结构清晰可理解。

这直接解决了几个核心痛点：

需求沟通成本高：与非技术背景的父辈沟通设计，AI生成的视觉稿是绝佳的沟通媒介。
全栈技能门槛：传统开发需要前端、后端、设计、运维多种技能。AI工具链能极大降低每一环的难度。
时间与资金投入大：外包费用高，自己开发周期长。AI方案能将核心搭建时间压缩到几天内。

谁最适合阅读本文？

需要为家庭或朋友的小型企业搭建官网的技术人员。
想学习如何将多种AI工具串联成工作流的开发者或产品经理。
对“AI落地实际项目”感兴趣，希望超越简单对话和生图的实践者。

2. 核心工具链与角色分工：你的AI“虚拟团队”

传统网站开发需要团队协作，而我们的AI方案则是组建一个“虚拟团队”。下表清晰展示了每个环节对应的AI工具及其扮演的角色：

开发阶段	传统角色	AI工具（本方案选用）	AI扮演的角色	关键产出
需求分析与规划	产品经理	ChatGPT-4 / Claude 3	需求分析师 & 信息架构师	网站结构图、页面清单、内容大纲
UI/视觉设计	UI设计师	Midjourney / DALL-E 3 /即时AI	视觉设计师 & 原型设计师	网站整体风格设定、关键页面视觉稿、配色方案
前端代码生成	前端工程师	GPT-4/Cursor/v0.dev	前端开发工程师	完整的HTML/CSS/JS代码，响应式布局
内容填充与优化	内容编辑	ChatGPT-4 / Notion AI	文案撰写与优化师	公司介绍、产品描述、博客文章等文案
后端与部署	后端工程师/运维	GPT-4/Vercel/Supabase	全栈开发顾问 & 运维助手	简单的API逻辑、部署配置、数据库Schema

工具选择逻辑与备选方案：

GPT-4/Cursor：代码生成的核心。Cursor集成了GPT-4并深度理解项目上下文，比单纯聊天生成代码更精准。v0.dev是新兴的“用对话生成前端UI”的神器，适合快速搭建页面原型。
Midjourney/即时AI：Midjourney擅长生成具有艺术感和氛围的视觉素材（如英雄背景图），但控制具体UI组件较难。即时AI、Galileo AI等工具专门针对UI设计，能生成更接近实际代码的组件，是更好的选择。
Vercel/Supabase：Vercel是静态网站部署的王者，关联Git仓库后可实现自动部署。Supabase提供了开箱即用的数据库、认证和存储，完美替代需要自己写后端的场景，且它有一个友好的管理后台，非常适合非技术人员后续维护内容。

这个工具链构成了我们本次实战的基石。接下来，我们从零开始。

3. 环境准备与前置条件

在开始“动工”前，你需要准备好以下环境和账号。这相当于为你的“虚拟团队”配备办公场地和工具。

1. 核心AI工具账号（必须）

OpenAI ChatGPT Plus：用于需求分析、内容生成和复杂的代码逻辑咨询。GPT-4的代码能力是关键。
Cursor：基于GPT-4的AI代码编辑器。我们将主要在这里进行代码编写和项目操作。它提供免费额度，足够本项目使用。
Vercel账号：用于免费、快速的网站部署。使用GitHub账号登录即可。

2. 设计与内容工具账号（强烈推荐）

Midjourney或Leonardo.ai账号：用于生成高质量的背景图、横幅图等视觉元素。
即时AI或Galileo AI账号：用于生成可用的UI设计稿。
Supabase账号：如果你需要动态内容（如新闻列表、产品库），Supabase的免费套餐完全足够。

3. 本地开发环境

Node.js (版本 18+)：现代前端工具链的基础。在终端输入node -v检查。
Git：代码版本管理。在终端输入git --version检查。
一个代码编辑器：除了Cursor，你也可以使用VS Code。

4. 项目初始化在你的工作目录下，我们创建一个最简化的现代前端项目。打开终端，执行以下命令：

# 创建一个项目文件夹 mkdir my-ai-company-website cd my-ai-company-website # 初始化一个新的npm项目（一路回车即可） npm init -y # 创建基本的项目结构 mkdir -p src/{styles, images, pages} touch src/index.html src/styles/main.css

现在，你的项目结构应该如下所示：

my-ai-company-website/ ├── package.json └── src/ ├── index.html ├── styles/ │ └── main.css ├── images/ └── pages/

用Cursor打开my-ai-company-website文件夹，你的“AI开发助手”就位了。

4. 第一步：用AI进行需求分析与网站规划

不要直接让AI“生成一个官网”。低质量的指令只会得到低质量的结果。我们需要进行结构化沟通。

操作步骤：

在Cursor中打开Chat面板（Cmd/Ctrl + K）。
输入清晰的提示词，扮演产品经理的角色：

你是一个经验丰富的网站产品经理。我需要为一家传统制造业公司（主要生产工业阀门）重新设计官网。目标用户是潜在的企业客户和经销商。 请帮我完成以下工作： 1. 列出这类企业官网必备的页面（如首页、关于我们、产品中心、案例展示、新闻动态、联系我们）。 2. 为每个页面规划核心内容模块。例如，“首页”可能需要：导航栏、英雄大图 Banner、公司简介摘要、核心产品展示、优势亮点、合作伙伴Logo墙、页脚。 3. 给出一个简单的网站地图（sitemap）结构图。 4. 为整个网站推荐一个符合工业领域、显得专业可靠的配色方案（提供HEX色码）。

AI的典型输出与我们的处理：AI会给出一个结构清晰的列表。例如：

页面清单：首页、关于我们、产品中心、应用案例、新闻中心、联系我们。
首页模块：导航栏、全屏横幅视频/图片、公司价值主张、产品分类导航、成功案例精选、资质荣誉、动态新闻、联系表单。
配色方案：主色-深蓝色 (#0A2463) 代表专业与信任，辅色-亮橙色 (#FF6B35) 用于按钮和强调，中性色-浅灰色 (#F8F9FA) 为背景。

关键动作：将AI输出的这个规划，整理成一个简单的Markdown文档(PROJECT_BRIEF.md)，放在项目根目录。这是你和AI后续所有工作的“需求文档”，能极大减少歧义和反复。

5. 第二步：用AI生成UI设计稿与视觉资产

有了规划，接下来是视觉设计。这里我们分两步：风格定调和具体生成。

1. 确定整体风格（使用Midjourney或即时AI）在Midjourney中，输入提示词：

professional website hero banner for an industrial valve manufacturer, modern, clean, high-tech, blue and orange color scheme, photorealistic, wide angle, studio lighting --ar 16:9 --style raw

生成几张高质量的横幅图，选取最符合“专业、现代”感觉的一张。下载下来，放入src/images/文件夹，命名为hero-banner.jpg。

2. 生成可参考的UI组件（使用即时AI）在即时AI中，你可以用更具体的描述生成UI片段。例如：

设计一个工业设备公司的产品展示卡片，包含产品图片、名称、简短描述和一个“查看详情”按钮。使用深蓝色和橙色。

将生成的图片作为设计参考，而不是直接使用的代码。我们的目的是让AI（GPT-4/Cursor）理解我们想要的视觉样式。

6. 第三步：用Cursor + GPT-4 编写核心前端代码

这是最核心的环节。我们将以“首页”为例，演示如何与Cursor协作编码。

1. 创建基础HTML结构在Cursor中，打开src/index.html。在Chat中输入（请根据你的PROJECT_BRIEF.md调整）：

基于我们的项目规划，现在开始编写首页的HTML结构。 要求： 1. 使用现代语义化标签（header, nav, main, section, footer）。 2. 包含以下section：导航栏、英雄横幅区、公司简介、产品展示网格、案例精选、页脚。 3. 为每个部分添加有意义的类名，例如 `.hero-section`。 4. 链接我们本地的CSS文件 `styles/main.css`。 5. 在“产品展示”部分，先预留3个产品的卡片结构。

Cursor会生成类似下面的代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>XX阀门制造有限公司 - 专业的工业阀门解决方案提供商</title> <link rel="stylesheet" href="styles/main.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <!-- 导航栏 --> <header class="header"> <nav class="navbar container"> <a href="/" class="logo">Valve<span>Pro</span></a> <ul class="nav-links"> <li><a href="#home">首页</a></li> <li><a href="#about">关于我们</a></li> <li><a href="#products">产品中心</a></li> <li><a href="#cases">应用案例</a></li> <li><a href="#news">新闻动态</a></li> <li><a href="#contact" class="btn btn-outline">联系我们</a></li> </ul> <button class="menu-toggle" aria-label="Toggle navigation"> <i class="fas fa-bars"></i> </button> </nav> </header> <!-- 英雄横幅区 --> <section class="hero-section" id="home"> <div class="hero-content container"> <h1 class="hero-title">精密制造，流体控制专家</h1> <p class="hero-subtitle">为全球工业领域提供高性能、高可靠性的阀门产品与解决方案</p> <a href="#products" class="btn btn-primary">查看我们的产品</a> <a href="#contact" class="btn btn-secondary">获取报价</a> </div> <!-- 背景图将通过CSS设置 --> </section> <!-- 公司简介 --> <section class="about-section container" id="about"> <h2 class="section-title">关于我们</h2> <div class="about-content"> <p>XX阀门制造有限公司成立于2005年，专注于工业阀门的研发、生产与销售...（此处AI会生成一段占位文案）</p> <!-- 更多内容 --> </div> </section> <!-- 产品展示 --> <section class="products-section container" id="products"> <h2 class="section-title">核心产品</h2> <div class="products-grid"> <div class="product-card"> <div class="product-image-placeholder">图1</div> <h3>球阀系列</h3> <p>适用于石油、化工等行业的开关控制...</p> <a href="#" class="btn btn-small">了解更多</a> </div> <!-- 重复3个产品卡片 --> </div> </section> <!-- 页脚 --> <footer class="footer"> <div class="container"> <p>&copy; 2023 XX阀门制造有限公司. 版权所有.</p> </div> </footer> <script src="script.js"></script> </body> </html>

2. 编写CSS样式接下来，让Cursor为这个HTML编写样式。打开src/styles/main.css，在Chat中输入：

为上面的index.html编写CSS样式，实现一个现代、专业的工业公司网站。 要求： 1. 使用我们之前确定的配色方案：主色 #0A2463, 强调色 #FF6B35, 背景色 #F8F9FA。 2. 实现响应式设计，在移动设备上导航栏能折叠成汉堡菜单。 3. 为英雄横幅区设置全屏背景，使用我们准备好的 `src/images/hero-banner.jpg`。 4. 产品卡片要有阴影、圆角和悬停效果。 5. 确保排版美观，有合适的间距和字体大小。

Cursor会生成完整的CSS代码，包括重置样式、变量定义、各个组件的样式以及媒体查询。由于代码较长，这里展示关键部分：

/* src/styles/main.css */ :root { --primary-color: #0A2463; --secondary-color: #FF6B35; --background-color: #F8F9FA; --text-color: #333; --light-gray: #e9ecef; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--text-color); background-color: var(--background-color); margin: 0; padding: 0; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* 导航栏样式 */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; } .logo { font-size: 1.8rem; font-weight: bold; color: var(--primary-color); text-decoration: none; } .logo span { color: var(--secondary-color); } .nav-links { display: flex; list-style: none; gap: 2rem; } .nav-links a { text-decoration: none; color: var(--text-color); font-weight: 500; transition: color 0.3s; } .nav-links a:hover { color: var(--secondary-color); } /* 英雄横幅区 */ .hero-section { background: linear-gradient(rgba(10, 36, 99, 0.7), rgba(10, 36, 99, 0.5)), url('../images/hero-banner.jpg') no-repeat center center/cover; color: white; text-align: center; padding: 8rem 1rem; min-height: 80vh; display: flex; align-items: center; } .hero-title { font-size: 3.5rem; margin-bottom: 1rem; } /* ... 更多样式 ... */ /* 响应式设计：移动端 */ @media (max-width: 768px) { .nav-links { display: none; /* 默认隐藏 */ flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%; background-color: white; box-shadow: 0 5px 10px rgba(0,0,0,0.1); } .nav-links.active { display: flex; } .menu-toggle { display: block; /* 显示汉堡按钮 */ } .hero-title { font-size: 2.5rem; } }

3. 添加交互功能（JavaScript）创建一个src/script.js文件，让Cursor编写简单的交互逻辑，比如移动端菜单的切换：

// src/script.js // 移动端导航菜单切换 const menuToggle = document.querySelector('.menu-toggle'); const navLinks = document.querySelector('.nav-links'); if (menuToggle && navLinks) { menuToggle.addEventListener('click', () => { navLinks.classList.toggle('active'); // 可选：切换汉堡菜单图标 const icon = menuToggle.querySelector('i'); if (icon.classList.contains('fa-bars')) { icon.classList.replace('fa-bars', 'fa-times'); } else { icon.classList.replace('fa-times', 'fa-bars'); } }); // 点击导航链接后关闭菜单（在移动端） document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('active'); const icon = menuToggle.querySelector('i'); if (icon.classList.contains('fa-times')) { icon.classList.replace('fa-times', 'fa-bars'); } }); }); } // 平滑滚动到锚点 document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, // 减去导航栏高度 behavior: 'smooth' }); } }); });

至此，一个具备基本样式和交互的静态首页就完成了。其他页面（关于我们、产品中心等）可以通过复制index.html为模板，并修改内容区域，使用相同的方法快速生成。

7. 第四步：用AI生成与优化网站内容

静态页面有了，但里面的“Lorem ipsum”占位符需要替换成真实的公司内容。再次请出ChatGPT。

操作提示词示例：

请扮演一家名为“XX阀门制造有限公司”的文案专员。根据以下要点，撰写一段约200字的“关于我们”的公司介绍： - 成立于2005年 - 专注于工业阀门（球阀、闸阀、截止阀等） - 拥有先进的生产线和检测设备 - 产品应用于石油、化工、电力、水务等行业 - 理念是“质量第一，客户至上” - 拥有多项专利和认证 语言风格：专业、可靠、简洁。

将AI生成的文案，替换到HTML对应的段落中。对“产品描述”、“新闻动态”等内容，如法炮制。关键技巧：让AI一次生成多个版本（如3个），你可以选择最合适的一个，或融合修改。

8. 第五步：从静态到动态 - 集成Supabase

如果官网需要“新闻动态”或“产品列表”这类需要后台更新的内容，纯静态页面就不够了。这时，Supabase这样的BaaS（后端即服务）是绝佳选择。

1. 在Supabase中创建项目和表

登录Supabase，新建一个项目。
在Table Editor中创建一张表，例如news：
- id(bigint, 自增主键)
- title(text, 新闻标题)
- content(text, 新闻内容)
- created_at(timestamp, 默认now())
- cover_url(text, 封面图URL)
通过管理后台手动插入几条测试数据。

2. 在前端中调用Supabase API

在Supabase项目设置中，获取你的Project URL和anon public key。
在你的项目中安装Supabase客户端库：
```
npm install @supabase/supabase-js
```
创建一个模块化的JS文件来管理Supabase客户端，例如src/lib/supabaseClient.js：

// src/lib/supabaseClient.js import { createClient } from '@supabase/supabase-js' const supabaseUrl = process.env.SUPABASE_URL || '你的Project URL' const supabaseAnonKey = process.env.SUPABASE_ANON_KEY || '你的anon public key' export const supabase = createClient(supabaseUrl, supabaseAnonKey)

3. 在新闻页面获取并展示数据创建一个新闻页面src/pages/news.html，并编写获取数据的脚本：

// 在news.html中引入supabaseClient后 async function fetchNews() { const { data: news, error } = await supabase .from('news') .select('*') .order('created_at', { ascending: false }); if (error) { console.error('获取新闻失败:', error); return; } const newsContainer = document.getElementById('news-container'); if (news && news.length > 0) { newsContainer.innerHTML = news.map(item => ` <article class="news-card"> <img src="${item.cover_url || 'default-news.jpg'}" alt="${item.title}" class="news-image"> <div class="news-content"> <h3>${item.title}</h3> <p class="news-date">${new Date(item.created_at).toLocaleDateString('zh-CN')}</p> <p>${item.content.substring(0, 150)}...</p> <a href="#" class="read-more"></a> </div> </article> `).join(''); } else { newsContainer.innerHTML = '<p>暂无新闻动态。</p>'; } } // 页面加载完成后执行 document.addEventListener('DOMContentLoaded', fetchNews);

现在，你的网站就有了一个可以从后台管理并动态展示新闻的页面。你父亲（或其他管理员）以后只需要在Supabase的网页后台里添加新闻条目，网站前端就会自动更新。

9. 第六步：部署上线到Vercel

最后一步，让网站能被所有人访问。我们使用Vercel，它与GitHub集成，部署静态网站和Node.js项目非常简单。

操作步骤：

将你的代码推送到GitHub仓库。
登录Vercel，点击“Add New...” -> “Project”。
导入你刚创建的GitHub仓库。
在配置页面，Vercel会自动检测这是一个静态项目。构建命令留空，输出目录填写.（因为我们的入口文件在根目录）。
点击“Deploy”。几十秒后，你的网站就会有一个vercel.app的免费域名。
（可选）你可以在Vercel项目中绑定自己的自定义域名。

关键优势：以后你每次将代码推送到GitHub的main分支，Vercel都会自动重新部署，实现持续集成。

10. 常见问题与排查思路

在实际操作中，你可能会遇到以下问题：

问题现象	可能原因	排查方式	解决方案
Cursor生成的代码运行后样式错乱	AI生成的CSS选择器与HTML类名不匹配；CSS文件路径错误。	1. 浏览器开发者工具检查元素，看样式是否被应用。 2. 检查Console是否有404错误（CSS文件加载失败）。	1. 仔细核对HTML中的`class`和CSS中的选择器是否完全一致。 2. 确保`<link>`标签的`href`路径正确。
Supabase数据无法获取，Console报错	项目URL或密钥错误；表名或列名错误；网络问题或CORS。	1. 检查`supabaseClient.js`中的URL和密钥。 2. 在Supabase的SQL编辑器里运行`select * from news;`确认表和数据存在。 3. 查看浏览器Network面板，看API请求是否被阻止。	1. 重新复制Supabase项目设置中的准确信息。 2. 检查Supabase的API设置，确保启用了匿名访问和正确的CORS源（你的Vercel域名）。
网站在手机上看布局不对	响应式CSS的媒体查询（`@media`）未生效或写错。	1. 使用浏览器开发者工具的“设备模拟”功能。 2. 检查CSS中媒体查询的断点（如`max-width: 768px`）是否覆盖了目标设备宽度。	1. 确保视口meta标签`<meta name="viewport" ...>`已设置。 2. 逐步调试媒体查询内的CSS规则，使用`border: 1px solid red;`临时框选元素查看布局。
Vercel部署失败	项目根目录缺少入口文件（如`index.html`）；构建命令错误；依赖安装失败。	查看Vercel部署日志，错误信息通常很明确。	1. 确保项目根目录有`index.html`。 2. 对于纯静态站点，在Vercel项目设置的“Build & Development Settings”中，将“Output Directory”设为`.`， “Build Command”留空。
AI生成的内容生硬或不准确	提示词不够具体，缺乏上下文。	-	在提示词中提供更多背景：公司具体业务、目标客户、希望传达的情绪（如“可靠”、“创新”）。让AI先生成大纲，再分段生成，最后组合润色。

11. 最佳实践与工程建议

为了让这个AI辅助建站的项目更健壮、更易于维护，请遵循以下建议：

版本控制是生命线：全程使用Git。每次完成一个相对完整的功能（如完成首页布局、添加新闻模块），就进行一次提交。清晰的提交信息能让你和AI（Cursor）更好地理解项目上下文。
模块化与组件化：不要把所有代码堆在一个文件。将重复的UI部分（如导航栏、页脚、产品卡片）考虑抽离成可复用的组件或模板。虽然本项目未使用前端框架，但可以通过创建单独的HTML片段（如navbar.html）并用JavaScript加载的方式实现简单的组件化。
环境变量管理：Supabase的URL和密钥等敏感信息，绝对不要硬编码在代码中提交到GitHub。使用.env文件管理，并在.gitignore中忽略它。在Vercel的项目设置中配置环境变量。
内容与样式分离：将AI生成的真实文案集中管理在一个地方（如一个content.json文件或单独的Markdown文件），再通过脚本注入到HTML中。这比散落在各个HTML文件里更容易更新和做多语言准备。
性能优化：对AI生成的图片（如Midjourney的横幅图）使用在线工具（如TinyPNG）进行压缩。确保CSS和JS文件被压缩。Vercel会自动进行一些优化。
渐进增强：确保网站的核心内容（文字、链接）在禁用JavaScript的情况下仍然可访问。我们的交互（如菜单、平滑滚动）是增强体验，而非必需。
后续维护计划：将Supabase的后台管理地址、Vercel的部署后台、项目GitHub仓库地址整理成一个文档交给父亲或公司负责人。培训他们如何在Supabase后台更新新闻和产品信息。

通过以上全流程的拆解，你可以看到，AI并没有替代开发者，而是成为了一个能力超强的“副驾驶员”。它负责将模糊的需求转化为具体的方案，将描述性的语言转化为可运行的代码，将重复性的劳动自动化。而你的角色，从“执行者”更多地转向了“架构师”、“提示词工程师”和“质量把关人”——你需要定义问题、拆解任务、选择合适的工具、评估AI的产出，并将所有部分有机地整合在一起。

这个过程，正是当下AI赋能开发的核心范式。它降低的是实现的“技能门槛”和“时间成本”，但并未降低对项目整体把握、问题定义和集成能力的“思考门槛”。从这个项目开始，尝试用这套方法论去解决更多实际问题，你会对“AI如何改变工作流”有更深刻的理解。建议收藏本文，在你下次需要为家人、朋友或自己快速搭建一个展示类网站时，随时参考。