0成本建站全攻略：如何制作免费永久网站保姆级建站教程

网站做好了没人访问，这话听着耳熟吧？你花了一周时间把页面设计得美轮美奂，上线之后打开后台一看，访问量连个零都没有，这种挫败感谁懂啊？别急，这篇保姆级建站教程就是为了解决你这个痛点——如何制作免费永久网站，教你从零开始打造一个能被搜索引擎看见、用户能访问的网站，而且成本低到可以忽略不计。

如果你是设计师转前端，或者是刚入行的网站开发者，那么这篇教程就特别适合你。我们从需求分析、环境准备，到代码编写、部署上线，全程不绕弯子，用最直白的语言告诉你怎么做。

需求分析：别光看“免费”，还要看“永久”

很多新手一上来就盯着“免费”这个关键词，以为只要找一个免费的建站平台就能搞定一切。但问题是，免费≠永久，很多平台的免费版功能限制多、广告多，甚至到期后你的网站就没了，这就跟“免费试用”一样，一到期就拉黑你。

所以，第一步得想清楚：你到底要建什么类型的网站？是展示型的公司官网？还是内容驱动的博客？还是需要交易功能的小型商城？这些都会影响你后续的建站选择。

对于设计师转前端的你来说，响应式设计、UI/UX体验、SEO优化是三个关键点。你的网站不仅要好看，还要能在手机上正常打开，还得让搜索引擎喜欢，不然再好看也没人看。

什么情况下适合“免费+永久”的网站？

• 个人博客、作品集
• 小型创业公司官网
• 本地服务类网站（比如石家庄某家餐饮店）
• 产品展示页、资料下载页

如果你的需求在这些范围，那这篇保姆级教程绝对够用。

环境准备：从零开始搭建你的开发环境

很多人以为建站就是“找个平台上传个文件”，但其实你得先有一个可以运行代码的“地方”。这里有两个常见选择：

• 使用开源建站工具：如 Jekyll、Hugo、Hexo，这些工具适合做静态网站，完全免费，部署简单。
• 使用托管平台：如 GitHub Pages、Netlify、Vercel，这些平台支持你上传代码并自动部署。

本地开发环境推荐

如果你是设计师转前端，建议你先在本地搭建一个开发环境。常用的开发工具包括：

• VS Code：轻量、插件多，适合写代码。
• Chrome DevTools：调试前端代码的神器。
• Git + GitHub：版本控制，方便协作和发布。

你可以从 GitHub 上下载开源项目，比如 Jekyll 或 Hugo，然后按照教程安装和配置。这部分我们稍后详细说。

核心步骤：如何从零开始建站

第一步：选对建站工具

以 Jekyll 为例，它是一个静态网站生成器，非常适合写博客、作品集类网站。它的优点是：

• 完全免费
• 部署简单
• 支持 Markdown 编写内容
• 可以和 GitHub Pages 配合使用，完全“0成本”

如果你是设计师，推荐使用 Jekyll + GitHub Pages 的组合，因为你可以用 Markdown 写文章，用 HTML/CSS 做设计，然后直接发布到 GitHub Pages，整个过程几乎不需要服务器。

第二步：安装 Jekyll

以下是安装 Jekyll 的步骤（以 Mac 为例）：

# 安装 Ruby
brew install ruby# 安装 Jekyll
gem install jekyll bundler

安装完成后，你可以用以下命令创建一个新项目：

jekyll new my-site
cd my-site
bundle exec jekyll serve

运行之后，你会看到一个本地服务器，访问 http://localhost:4000 就能看到你的网站了。

第三步：网站结构与内容编写

Jekyll 的目录结构如下：

my-site/
├── _config.yml
├── _posts/
├── _layouts/
├── _includes/
├── assets/
└── index.html

• _config.yml：配置文件，比如网站名称、作者、主题等。
• _posts/：存放你的文章，格式为 YYYY-MM-DD-title.md。
• _layouts/：页面模板，比如 default.html。
• _includes/：可以复用的代码片段，比如导航栏。

你可以在 index.html 里写首页内容，也可以用 Markdown 写文章，Jekyll 会自动帮你生成 HTML。

第四步：部署到 GitHub Pages

1. 在 GitHub 上创建一个仓库，命名为 yourname.github.io（你的 GitHub 用户名）。
2. 将本地项目推送到这个仓库：

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin git@github.com:yourname/yourname.github.io.git
   git push -u origin main
   

3. 等待几分钟，GitHub 会自动帮你部署网站，你可以通过 https://yourname.github.io 访问。

代码/配置示例：让你的网站更专业

优化 _config.yml 配置文件

# _config.yml 示例
title: 你的网站标题
email: yourname@example.com
description: 简短描述你的网站
baseurl: "/" # 如果你的网站是子路径，比如 /blog，这里要改
url: "https://yourname.github.io"
paginate: 5 # 每页显示文章数

优化 default.html 布局

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>{{ page.title }}</title><link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}">
</head>
<body><header><h1>{{ site.title }}</h1><nav><ul><li><a href="/">首页</a></li><li><a href="/about">关于</a></li></ul></nav></header><main>{{ content }}</main><footer><p>© {{ site.time | date: "%Y" }} {{ site.title }}</p></footer>
</body>
</html>

添加 SEO 元信息

在 _config.yml 中添加：

defaults:- scope:path: ""type: postsvalues:layout: postauthor: 你的名字description: 自动提取文章的前几行作为描述keywords: 网站建设, SEO优化, GitHub Pages

这一步能帮助搜索引擎更好地理解你的网站内容。

常见报错与解决方案

1. jekyll serve 报错：无法找到 Ruby 环境

解决方法：检查是否正确安装了 Ruby，可以通过 ruby -v 查看版本。如果没安装，用 Homebrew 或 RubyInstaller 安装。

2. GitHub Pages 无法访问网站

解决方法：

• 检查仓库名是否为 yourname.github.io。
• 确保你提交的是 main 分支。
• 等待几分钟，GitHub 有时需要缓存。

3. 网站访问速度慢

解决方法：

• 使用 CDN（如 Cloudflare）加速静态资源。
• 压缩图片和代码。
• 使用懒加载（Lazy Load）优化图片加载。

4. 网站没有被搜索引擎收录

解决方法：

• 在 robots.txt 文件中允许搜索引擎抓取。
• 在 _config.yml 中设置 sitemap: /sitemap.xml，并生成 sitemap.xml。
• 在 Google Search Console 中提交网站。

小结：别让免费成为限制，做好才是王道

你有没有发现，如何制作免费永久网站这个话题，其实不是重点？重点在于你能不能做出一个有内容、有用户、有流量的网站。很多新手一上来就想着“免费”，却忽略了“永久”和“被看见”的本质。

通过这篇保姆级建站教程，你已经学会了：

• 如何选择免费且长期稳定的建站工具
• 如何部署网站到 GitHub Pages，0成本上线
• 如何优化 SEO 元信息，让搜索引擎喜欢你的网站
• 如何避免常见的部署错误，让你的网站跑得更稳

作为设计师转前端，你有独特的优势：你懂设计，你也能写出漂亮的代码。只要把这两者结合好，你就能做出一个既美观又实用的网站。

最后一个问题：你更倾向模板建站还是定制开发？欢迎评论