零基础搞定免费的网站搭建完整流程图解

零基础搞定免费的网站搭建完整流程图解

域名服务器搞不懂？别慌，这正是90%新手卡住的死结。今天直接拆解免费的网站搭建的完整流程，从0到1带你跑通。

一、 为什么选免费方案：成本与技术的平衡

很多设计师转前端，第一反应是“买服务器太贵，买域名怕乱”。其实，免费的网站搭建并不是让你去用那些广告满天飞的免费主机，而是利用云厂商的免费额度、静态托管服务以及开源工具链，实现“零现金支出”的专业技术落地。

这里有个误区：免费不等于低质。GitHub Pages、Vercel、Netlify 这些平台，底层跑的是全球顶级CDN，速度比很多几百块一年的国内小主机还快。它们的核心优势在于自动化部署和全球加速。

但代价是什么？

  1. 域名绑定限制：免费子域名（如 xxx.github.io）SEO权重极低，且不够专业。
  2. 备案问题：国内访问速度可能受限于海外节点，且无法进行ICP备案，导致部分国内搜索引擎收录受限。
  3. 功能局限：静态托管无法运行后端代码（如 Node.js、PHP），适合展示型网站、个人博客、作品集。

选型建议：

  • 纯展示/作品集：首选 GitHub Pages + 静态生成器（Hexo/Hugo/Next.js）。
  • 简单交互/无后端：Vercel/Netlify（支持 Serverless Functions）。
  • 需要国内访问/备案：阿里云/腾讯云学生机（需付费，但可视为“低成本”替代，本文侧重纯免费）。

二、 核心差异对比：三大免费托管平台横向评测

在动手前，先看清这三个主流免费选手的底细。别被“免费”两个字忽悠，要看清它们的技术栈兼容性和运维成本。

特性 GitHub Pages Vercel Netlify
底层技术 纯静态文件托管 静态托管 + Serverless 静态托管 + Serverless
构建支持 无原生CI/CD，需手动或第三方 原生支持 Next.js, Nuxt 等 原生支持 Hugo, Jekyll, Gatsby
HTTPS证书 自动免费颁发 自动免费颁发 自动免费颁发
全球CDN 有（速度中等） 极快（边缘网络） 极快（边缘网络）
自定义域名 支持（需手动配置CNAME） 支持（自动检测DNS） 支持（自动检测DNS）
适合人群 极客、开源爱好者 Next.js/React 开发者 全栈新手、Hugo/Jekyll 用户
国内访问速度 一般（需科学上网或镜像） 一般（部分节点优化） 一般（部分节点优化）
最大流量/月 100GB 带宽 100GB 带宽 100GB 带宽

关键结论：

  • 如果你是用 Next.js 做项目，选 Vercel，无缝集成，体验最丝滑。
  • 如果你是用 Hugo 或 Jekyll 写博客，选 GitHub Pages，代码就在 GitHub，推上去就上线，最简单。
  • 如果你想要 表单提交 或 简单API，选 Netlify 或 Vercel，它们自带 Form 功能和 Serverless 函数。

三、 实操步骤与代码：以 GitHub Pages + Hugo 为例

这里以最经典的 GitHub Pages + Hugo 组合为例，演示免费的网站搭建的完整流程。Hugo 是静态网站生成器，速度极快，生成的纯 HTML 对 SEO 最友好。

1. 环境准备：安装 Hugo 和 Git

在本地电脑安装 Hugo 和 Git。Hugo 官网提供二进制文件，下载解压即可，无需编译。

# macOS 使用 Homebrew 安装
brew install hugo git# 验证安装
hugo version
git --version

2. 初始化项目：创建 Hugo 站点

# 进入工作目录
cd ~/projects# 初始化 Hugo 项目，指定主题（这里用默认主题演示）
hugo new site my-portfolio# 进入项目目录
cd my-portfolio# 初始化 Git 仓库
git init

3. 配置主题：以 Hugo 主题为例

假设我们使用一个流行的 Hugo 主题 hugo-portfolio。

# 创建 themes 目录
mkdir themes# 进入 themes 目录
cd themes# 克隆主题仓库（以 hugo-portfolio 为例，实际可用任何主题）
git clone https://github.com/yourusername/hugo-portfolio.git# 返回项目根目录
cd ..

4. 配置 config.toml

这是关键步骤。修改 config.toml 文件，设置网站基础信息。

baseURL = "https://yourusername.github.io/my-portfolio/"
languageCode = "zh-cn"
title = "我的作品集"[params]author = "你的名字"description = "这是一个免费的网站搭建示例"# 其他参数根据主题文档配置

注意：baseURL 必须包含项目名（如果部署在子目录下）。如果是根目录，则为 https://yourusername.github.io/。

5. 创建内容：写一篇博客

# 创建新文章
hugo new content/posts/my-first-post.md

打开 content/posts/my-first-post.md，编辑内容：

---
title: "我的第一篇文章"
date: 2023-10-27
draft: false
---这是我在 GitHub Pages 上发布的第一篇文章。
**免费的网站搭建** 就是这么简单！

6. 本地预览

在本地启动服务器，预览效果。

# 启动 Hugo 服务器
hugo server -D

浏览器打开 http://localhost:1313，检查样式和内容是否正常。

7. 部署到 GitHub

将代码推送到 GitHub 仓库。

# 添加所有文件
git add .# 提交
git commit -m "Initial commit: Hugo site setup"# 推送到 GitHub（替换为你的用户名和仓库名）
git remote add origin https://github.com/yourusername/my-portfolio.git
git push -u origin main

8. 启用 GitHub Pages

  1. 登录 GitHub，进入 my-portfolio 仓库。
  2. 点击 Settings -> Pages。
  3. 在 Source 下拉菜单中选择 Deploy from a branch。
  4. 选择 main 分支，目录选择 / (root)，点击 Save。
  5. 等待几分钟，GitHub 会构建并发布网站。
  6. 访问 https://yourusername.github.io/my-portfolio/，看到你的网站！

代码示例：GitHub Actions 自动部署（进阶）

如果你不想手动推送到 GitHub，可以用 GitHub Actions 自动构建。在仓库根目录创建 .github/workflows/hugo.yml：

name: Hugo Build and Deployon:push:branches:- mainjobs:build:runs-on: ubuntu-lateststeps:- name: Checkout codeuses: actions/checkout@v3with:submodules: recursive- name: Setup Hugouses: peaceiris/actions-hugo@v2with:hugo-version: 'latest'- name: Buildrun: hugo --minify- name: Deployuses: peaceiris/actions-gh-pages@v3with:github_token: ${{ secrets.GITHUB_TOKEN }}publish_dir: ./public

这样，每次你推送代码到 main 分支，GitHub Actions 会自动构建并部署网站，实现真正的自动化。

四、 域名与服务器：免费方案的“坑”与解法

很多人卡在“域名”和“服务器”上，觉得不懂。其实，免费的网站搭建中，服务器就是 GitHub Pages 的免费托管，域名可以用免费子域名，或绑定自己的付费域名（推荐）。

1. 免费子域名 vs 付费域名

  • 免费子域名：yourusername.github.io
    • 优点：零成本，自动配置。
    • 缺点：不专业，SEO 权重低，用户记忆难。
  • 付费域名：yourname.com
    • 优点：专业，SEO 友好，品牌形象好。
    • 缺点：需每年续费（约 50-100 元/年），需手动配置 DNS。

建议：初期用免费子域名测试，确定方案后，买一个便宜的域名（如 .dev 或 .xyz），绑定到 GitHub Pages。

2. 如何绑定自定义域名到 GitHub Pages？

假设你买了 yourname.com，想绑定到 yourusername.github.io/my-portfolio。

步骤：

  1. 在域名服务商（如 Namecheap、阿里云）的 DNS 设置中，添加一条 CNAME 记录：
    • 主机记录：www（或 blog，取决于你想用哪个子域）
    • 记录值：yourusername.github.io
  2. 在 GitHub Pages 设置中，填写 yourname.com 作为自定义域名。
  3. GitHub 会自动检测 DNS 记录，配置完成后，HTTPS 证书会自动颁发。

注意：根域名（yourname.com）需要用 A 记录 指向 GitHub 的 IP 地址：185.199.108.153（GitHub Pages 的 IP）。

3. 服务器性能与 SEO 优化

GitHub Pages 的服务器位于海外，国内访问速度可能较慢。优化方法：

  • 启用 Gzip 压缩：Hugo 生成的 HTML 文件较小，压缩效果有限，但可启用。
  • 图片优化：使用 WebP 格式，压缩图片大小。Hugo 支持 imgproxy 插件自动压缩。
  • 懒加载：为图片添加 loading="lazy" 属性，减少首屏加载时间。

代码示例：Hugo 图片优化

在 config.toml 中启用图片优化：

[markup][markup.goldmark.renderer]unsafe = true # 允许 HTML 标签

在模板中，使用 Hugo 的图片管道函数：

{{ $image := .Resources.GetMatch "image.jpg" }}
{{ $resized := $image.Resize "800x" }}
<img src="{{ $resized.RelPermalink }}" alt="Optimized Image" loading="lazy">

这样，图片会自动生成不同尺寸，并添加懒加载属性，提升页面加载速度和 SEO 评分。

五、 上线部署与长期维护：免费方案的边界

免费的网站搭建 的完整流程 到这里就基本跑通了。但上线后，你需要关注以下几点：

1. 安全与备份

  • 代码备份：代码在 GitHub，天然备份。定期推送到 main 分支，确保最新代码不丢失。
  • 内容备份：Hugo 的内容是 Markdown 文件，同样在 Git 仓库中，安全无忧。
  • HTTPS：GitHub Pages 自动提供 HTTPS，无需额外配置。

2. SEO 优化细节

  • Meta 标签：在 Hugo 主题中配置 title 和 description，确保每篇文章都有独立的 Meta 信息。
  • Sitemap：Hugo 自动生成 sitemap.xml，提交到 Google Search Console 和 Bing Webmaster Tools。
  • robots.txt：创建 static/robots.txt，允许搜索引擎爬虫抓取。
User-agent: *
Allow: /
Sitemap: https://yourusername.github.io/my-portfolio/sitemap.xml

3. 性能监控

使用 Google PageSpeed Insights 或 MDN Web Docs 推荐的性能指标，监控页面加载时间。MDN Web Docs 提供了详细的 Core Web Vitals 指标说明，包括 LCP（最大内容绘制）、FID（首次输入延迟）、CLS（累计布局偏移）。

优化建议：

  • LCP：优化首屏图片加载，使用 fetchpriority="high"。
  • FID：减少 JavaScript 阻塞，使用 defer 或 async 加载脚本。
  • CLS：为图片和视频设置固定宽高，避免布局偏移。

4. 何时放弃免费方案？

  • 需要后端功能（如用户登录、数据库存储）：GitHub Pages 不支持，需迁移到 Vercel/Netlify 的 Serverless 函数，或购买国内服务器。
  • 需要国内高速访问：GitHub Pages 在国内速度不稳定，建议购买国内云服务器（如阿里云 ECS），并进行 ICP 备案。
  • 需要高并发：免费方案带宽有限，如果流量超过 100GB/月，需升级付费计划。

总结： 免费的网站搭建 并非“低人一等”，而是技术选型的明智选择。对于设计师转前端，它是最佳切入点：零成本、快速上线、代码纯净、SEO 友好。掌握这套完整流程，你不仅拥有了一个网站，更掌握了前端工程化的核心能力。

还有什么建站疑问？评论区留言挨个回。