9 块钱就能建一个网站，是真的吗？是真的！

1996 年早春的一天。

北京中关村南大门竖起了一块硕大的广告牌，上面清楚地写着：“中国人离信息高速公路有多远——向北1500米”。

然而，直到 2014 年，奶酪才真正拥有自己的第一个网站，可谓遗憾。

今天，奶酪就帮助大家拥有人生中的第一个网站。

是的，就从今天开始。

一、建站流程

经常看到有人说“0 元 0 代码”就能建一个网站，是真的吗？

假的！这样的内容大概率是“标题党”。然而好消息是，你只需要花 9 块钱就可以，而且代码层面，也不算太难。

1.1、网站三大件

无论是大网站，还是小网站，创建网站的方法，说一千道一万，其实就是三大件：域名 + 服务器 + 网站程序。

• 域名：就是专属于你的顶级域名。
• 服务器：就是 24 小时连续提供服务的一台远程电脑。
• 网站程序：则是决定你网站内容的应用程序。

而这三大件，你可以根据自己情况，可以选择免费的、专业的、甚至是顶级的。

1.2、动态网站

在互联网最早的时候，人们是直接编写网页的 HMTL 文件的。

也就是，网站上的所有页面，与服务器里的 HTML 文件一一对应，当时最火的编辑工具，正是“网页三剑客”。

然而，这种“刀耕火种”的开发方式，应付互不了互联网的蓬勃发展。

于是，网页开发就分成了：前端和后端。

前端以 JavaScript 为标准，后端则有 PHP、Java、Python 等多种语言，然后通过“数据库”来动态展示网页。

这些“动态网站”，在后端就发展出了 Windows Server，还有 Linux 下 LNMP、LAMP、LNMT 的服务器生态。

1.3、静态网站

后来，JavaScript 发展出了拥有后端服务器功能的 Node.js。

相比传统的后端语言，Node.js 拥有超强的性能和响应速度，能够轻松处理大量请求和高并发。

很多大公司也开始使用了 Node.js 来作为后端服务器技术。

而像 GitHub 这样的开源平台，还开始提供了静态网站的免费托管服务，GitHub 可以当做是一台免费的服务器。

也就是说，现在，你只需要花点钱买一个域名，再加上免费的服务器，你就可以搭建个人网站了。

理论上，要建一个网站，域名也不是必需的。

但我们的定位是个人专属网站，所以还是要申请一个域名，这也是你唯一需要花钱的地方。

2.1、域名常识

为什么说域名不是必需呢？

因为在互联网上，网站都是以 IP 的形式存在，只是为了方便人们记忆，才诞生了域名。

域名，可以看作是个人的数字资产，谁都可以拥有，但具有排它性。

而且，域名遵循“先到先得”的原则，就像 QQ 号一样，你越早申请，你就越可能得到一个字母少的“靓号”。

不过，域名需要按年付费，一旦过期，那么你的域名就会重新开放。

2.2、域名价格

不同域名后缀的价格不一样。

.com 是使用最广泛的域名后缀，.net 和 .org 也是常用的国际域名后缀。

.cn 则是国家域名后缀，只能在国内服务商里购买，而 .ai、.org、.me 等小众域名，只能在国外服务商里购买。

最便宜的域名当属 .top，最便宜可以 9 元一年，续费也只要 29元一年。

不同域名注册商的价格也不一样。

域名注册，没有规定必须要到哪个网站购买，只要提供了域名注册服务的网站就都可以，那个便宜就选那个。

国内注册商，推荐腾讯云和阿里云。

国外注册商，名气最大的当属 GoDaddy，但它的价格非常贵，另一家口碑爆棚的 NameSilo，价格更加公道。

而且它还支持“支付宝”付款。

2.3、域名解析

域名解析的作用，是将域名与服务器的 IP 联系起来。

DNS（Domain Name System）正是解决这一问题的机制，而我们需要做的，就在注册商里添加域名解析。

主机记录：

一般来说，只需要输入两个记录值即可。

输入@，可以理解为顶级域名解析，比如我的是 runningcheese.com

输入www，可以理解为 www 的二级域名，比如我的是 www.runningcheese.com

输入其他内容，则可以理解为二级域名的解析，比如输入 firefox，就是 firefox.runningcheese.com

值得注意的是，如果你不想让域名自动添加 www，则不要添加 www 的记录值，只需要添加一个 @ 记录值即可。

记录类型：

A 记录，是用于自有服务器解析。

CNAME 记录，则是用第三方服务器解析，接下我们要讲到的免费服务器，用的就是 CNAME 记录。

正如上文所说，GitHub 等网站可以用来当做免费的服务器，那具体要怎么做呢？

3.1、GitHub

要利用 GitHub 来做服务器。

首先，要注册 GitHub 账号，这个不用多说。

接着，要新建一个名为“用户名.github.io”的仓库。

比如我的用户名是 runningcheese，仓库名则是 runningcheese.github.io。

创建成功后。

直接打开 https://runningcheese.github.io，网页就会自动生效。

在“Settings”里还可以添加“自定义域名”，可以代替原来长长的域名，勾选 HTTPS 还可以自动获得 SSL 证书。

最后，打开 https://runningcheese.cn，网页上的内容，就会与 runningcheese.github.io 仓库上的内容一模一样。

3.2、Gitee

国内的 Gitee 和 Coding，同样也支持 Pages 功能，操作方法大同小异，但就是需要实名认证才可以使用。

3.3、Vercel

一个 GitHub 帐号只提供了一个 Page 页面。

如果你还想搭建多个网站，则可以利用 Vercel 的免费托管服务。

Vercel 同样也是一个网站托管平台，而且在全球都拥有 CDN 节点，因此比 Github 更加稳定，访问速度也更快。

只需要可以在 Github 上新建一个仓库，仓库名随便填都行，没有特别要求，然后将仓库导入到 Vercel 就可以了。

这样一来，我们就可以同时拥有多个免费的服务器了。

同样，Vercel 也支持域名自定义。

3.4、Notion

个人笔记 Notion，也可以用来当做免费的服务器。

你可以在 Notion 上编辑，然后可以一键转为在线网页，默认可以通过“用户名.notion.site"来查看公开主页。

不过，Notion 没办法像 Github Pages 那样直接解析域名，而是需要用 Cloudflare 来中转一下。

具体参考：https://www.notion.so/Notion-1e3f615ecc6441999a0ca3c62b8f255c

域名和服务器都只是外在的，网站真正的灵魂是网站内容，而这就要说到“网站程序”了。

4.1、手写 HTML

如果你的网页内容很少，仅仅只是一些文字、表格和图片，你大可自己手写一个 HTML 网页。

而你只需要懂一些 HTML、CSS、JS 知识即可，下面的网页，就奶酪拷贝自 WordPress 博客里的“奶酪清单”。

地址：https://www.runningcheese.cn

4.2、完善内容

当然，为了让网页更像一个网站，你还需要增加 404.html、favicon.ico、.htaccess、sitemap.html 等内容。

需要注意的是。

GitHub 上的 .txt、.css、.js 文本文件，还有 .png、.jpg 等图片文件的缓存时间长，至少要 6 小时才会刷新。

你可以在先本地调试，然后再一次性上传。

又或者把 .css 等内容写入到 index.html 文件里，这样只需要一分钟就会刷新了。

4.3、使用模版

如果你不会网页代码，也没关系，你大可从网上找一些现成的模板来用，各行各来，各式各样的网页模版都有。

比如这是奶酪在 2015 年为宣传 RC Firefox 做的一个网页。（现在看来挺尬的！）

地址：http://firefox.runningcheese.com

一些代码素材网站：

• http://www.htmleaf.com
• https://sc.chinaz.com/moban
• https://www.17sucai.com
• https://www.jq22.com

如果你建站的目的是搭建个人博客，那么可以使用成熟的博客程序，各项功能都齐备完整。

5.1、常见程序

常见的博客程序有：Hexo、Jekyll、Hugo。

他们都是简洁高效的博客框架，博客该有的功能他们都有，而且都支持 Markdown 文档生成静态网页。

不同的是，Hexo 基于 Node.js 开发，Jekyll 基于 Ruby 开发，Hugo 基于 Go 语言开发。

Hexo：https://hexo.io
Jekyll：https://jekyllrb.com
Hugo：https://gohugo.io

5.2、奶酪推荐

三款应用，奶酪推荐 Hexo 或 Hugo。

Hexo 原生支持中文文档，对于普通用户更友好。

Hexo 的速度也更加快，作者也说了，就是因为 Jekyll 慢，所以才开发了 Hexo。

Jekyll 虽然有 GitHub 的支持，但 Jekyll 官方没有中文文档，在 Windows 上配置 Ruby 环境也相对麻烦。

Hugo 非常容易上手，速度也非常的快，甚至自称是“世界最快”。

但工具软件的对比，最终还是会落入生态的对比上，就看谁有更好的社区支持，还有丰富的插件主题库了。

而 Hexo 和 Hugo 都能做到。

5.3、安装说明

Hexo 的环境配置也十分简单，也是先安装 Git 和 Node.js。

1、安装 Git。

目的是为了方便上传文件 到 Github。地址：https://git-scm.com/downloads

2、安装 Node.js。

目的是为了可以在本地预览博客内容，方便调试。地址：https://nodejs.org/zh-cn

可选：如果 nmp 下载速度慢，可用国内镜像代替，安装好之后，所有 npm 命令可以使用 cnpm 代替。[来源]

npm install -g cnpm --registry=https://registry.npmmirror.com

3、安装 Hexo。

由于原生支持中文文档，我们用 Hexo 来做演示。地址：https://hexo.io/zh-cn

4、官方教程：

地址：https://hexo.io/zh-cn/docs

5、第三方教程：

• https://zhuanlan.zhihu.com/p/26625249
• https://zhuanlan.zhihu.com/p/552639819
• https://www.dandelioncloud.cn/article/details/1564982853387907073

6、主题推荐：

• NexT - Theme for Hexo
• Fluid - Theme for Hexo

7、评论系统：

• http://www.livere.com
• https://twikoo.js.org
• https://gitalk.github.io

除了个人博客，文档手册这种形式的网站也越来越流行，它特别适合了项目知识库的管理。

6.1、常见程序

常见的文档手册程序有：GitBook、VuePress、Docsify。

他们都是强大好用的文档手册生成应用，也都支持 Markdown 文档生成静态网页。

不同的是，GitBook 是 GitHub 官方基于 Ruby 开发，VuePress 和 Docsify 则基于 Node.js 和 Vue 开发。

GitBook：https://www.gitbook.com
VuePress：https://vuepress.vuejs.org
Docsify：https://docsify.js.org

6.2、奶酪推荐

三选一的话，奶酪推荐 VuePress。

GitBook 是最早的文档手册生成应用，使用人数众多。

但 GitBook 不支持中文文档，而 GitBook 现在心思没放在开源上，GitBook 如今更专注于成为一个商业产品。

Docsify 支持中文文档，也更加容易上手。

但 Docsify 不支持生成静态的 .html 文件，转换工作在浏览发生时才进行，这对 SEO 来说非常不友好。

VuePress 则兼具了方方面面。

VuePress 不但支持中文文档，有着良好的 SEO，插件和主题的设计，也非常有条理。

并且，VuePress 非常活跃。

不但推出了 VitePress 简易版，VuePress 的 2.0 版本更是丰富强大，几乎涵盖了我对文档手册的所有需求。

6.3、安装说明

VuePress 的安装方法，与 Hexo 大同小异，也是先安装 Git 和 Node.js。

1、安装 Git。

目的是为了方便上传文件 到 Github。地址：https://git-scm.com/downloads

2、安装 Node.js。

目的是为了可以在本地预览博客内容，方便调试。地址：https://nodejs.org/zh-cn

可选：如果 nmp 下载速度慢，可用国内镜像代替，安装好之后，所有 npm 命令可以使用 cnpm 代替。[来源]

npm install -g cnpm --registry=https://registry.npmmirror.com

3、安装 VurePress。

推荐使用 2.0 版本。地址：https://v2.vuepress.vuejs.org/zh/guide

4、第三方教程参考：

• https://www.bilibili.com/video/BV1vb411m7NY
• https://www.bilibili.com/video/BV1AW4y1p7BV
• https://www.bilibili.com/video/BV17t41177cr

更新中。。。