先说清“永久免费”的边界：HTML、CSS 等源码可以自行编写、保存和修改，不必购买建站模板或后台会员；但公开访问通常还涉及域名、服务器、带宽和网络费用，免费托管服务也可能调整规则。因此，稳妥做法是把源文件和备份掌握在自己手里，尽量减少付费依赖，而不是假定所有上线环节永远零成本。

第一步：确定访客要办什么事

先写出网站服务的对象和他们最常查找的事项。例如，黄冈本地的维修门店可以让访客查询服务范围、营业时间、预约方式和门店地址；公益机构则可说明服务对象、办理条件、所需材料和咨询电话。围绕这些实际需求安排栏目，避免把互不相关的消息都塞进首页。

• 首页：说明机构名称、主要服务、覆盖区域，并突出服务电话或预约入口。
• 服务项目：逐项写明服务对象、办理步骤、所需材料和预计时间。
• 黄冈动态：发布有日期、地点和具体事项的本地活动或通知。
• 办事说明：按办理顺序列出准备事项、受理方式及常见问题。
• 联系我们：提供可用的地址、电话、营业时间和到访提示。

先整理真实文案与获得授权的图片，再安排栏目顺序。图片选用门店、服务现场或黄冈本地场景，文件名写成易辨认的主题，例如“黄冈服务大厅.jpg”；不要用与业务无关的素材填充版面。

第二步：建立便于维护的源码目录

如果网站只展示介绍、服务说明和联系方式，通常不需要数据库或复杂后台。先建好以下文件夹，再按栏目创建独立 HTML 文件：

huanggang-site/
├── index.html
├── services.html
├── news.html
├── contact.html
├── css/
│   └── site.css
└── images/
    └── local-scene.jpg

所有 HTML 文件共用一份样式表，图片集中放进 images 目录。文件名使用英文、拼音或数字，避免空格和特殊符号，减少上传后图片无法显示的情况。每完成一轮修改，就把整个 huanggang-site 文件夹复制到另一处备份。

第三步：制作首页与栏目导航

先搭好网站名称、导航、主要服务和联系区域，再把相同的导航与页脚用于其他栏目。下面的框架可保存为 index.html；将机构名称、栏目地址和示例文字替换成实际内容：

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>黄冈本地服务</title>
  <meta name="description" content="介绍黄冈本地服务范围、办理方式和联系方式">
  <link rel="stylesheet" href="css/site.css">
</head>
<body>
  <header>
    <h1>黄冈本地服务中心</h1>
    <nav>
      <a href="index.html">首页</a>
      <a href="services.html">服务项目</a>
      <a href="news.html">黄冈动态</a>
      <a href="contact.html">联系我们</a>
    </nav>
  </header>
  <main>
    <h2>服务黄冈，办事步骤一目了然</h2>
    <p>填写机构介绍、服务范围和预约方式。</p>
    <section>
      <h2>主要服务</h2>
      <p>逐项说明服务对象、办理材料和办理流程。</p>
    </section>
  </main>
  <footer>填写实际地址、电话与营业时间</footer>
</body>
</html>

导航中的文件名必须与实际保存的名称一致。暂时没有动态栏目时，就删掉对应入口；不要让访客点进空白文件或遇到打不开的地址。

第四步：设置样式并检查手机显示

把以下规则保存到 css/site.css。它设置了正文宽度、导航间距和窄屏留白，不依赖在线字体、图片库或第三方样式包：

body {
  margin: 0;
  color: #263238;
  font-family: sans-serif;
  line-height: 1.7;
}
header, main, footer {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}
nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
nav a {
  color: #145b8c;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
}
@media (max-width: 600px) {
  header, main, footer { padding: 14px; }
  nav { gap: 10px; }
}

用手机或缩窄浏览器窗口预览，重点检查导航能否换行、长电话号码会不会撑宽屏幕、图片是否超出边缘，以及正文是否需要左右滑动。把过长段落拆成短段，并让联系入口醒目但不遮住介绍文字。

第五步：逐个补齐栏目并本地验收

服务介绍要回答“提供什么、面向谁、怎么办理”；动态稿要写清发生时间、地点和变化事项；联系栏目要给出实际可拨打的电话、可到达的地址和营业时间。不同 HTML 文件分别提供有用的细节，避免每个栏目都重复一段机构简介。

在项目文件夹中启动本地预览，例如安装了 Python 的电脑可在终端运行：

python -m http.server 8000

随后在浏览器地址栏输入本机的 8000 端口地址进行检查。逐项打开首页、服务介绍、动态和联系栏目，确认导航去向正确、图片能显示、电话与地址无误；还要查看浏览器窄屏效果。发布前删掉示例文字、未启用的栏目和测试用联系方式。

第六步：部署到已有主机并核对公开访问

仅供单位内部查看时，可把源码放在已有电脑或局域网设备上；需要公众访问时，将文件上传到自己已有的主机网站目录，例如主机管理界面显示的 public_html 或 wwwroot。使用文件管理器或安全文件传输工具上传时，保持 index.html、css 和 images 的相对路径不变。若绑定域名，还需按域名服务商的要求配置解析；域名、主机和网络接入可能产生费用。

上传后用手机网络和电脑分别打开网站，检查首页、各栏目、图片、电话与地址。若托管商提供免费方案，先看清流量限制、广告要求、文件类型限制和服务期限，并保留本地备份；不要把唯一一份源码留在第三方后台。

第七步：准备百度搜索发现与后续维护

确认网站能从公网正常打开后，再整理各栏目的标题与摘要，让标题准确描述门店服务或办事事项。可以为网站准备站点地图，并在百度搜索资源平台按要求完成站点验证、提交站点地图或重要栏目地址。提交只代表告知搜索引擎来抓取，不保证收录时间或排名；要让访客持续找到可靠信息，还需保持电话、营业时间、服务范围和动态日期准确。

后续改动时，直接更新对应的 HTML、CSS 或图片文件，再重新上传并抽查首页与导航入口。每次发布前保存一份完整备份。按这条路径完成后，黄冈网站就具备清楚的栏目、可自行修改的源文件和可持续维护的发布流程；制作工具与源码可以不付费，公开运行是否免费则取决于域名、主机及所选服务的实际条件。