奔跑中的奶酪

9 块钱就能建一个网站,是真的吗?是真的!

9 块钱就能建一个网站,是真的吗?是真的!

1996 年早春的一天。

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

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

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

是的,就从今天开始。

一、建站流程

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

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

1.1、网站三大件

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

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

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

V01_网站三大件

1.2、动态网站

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

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

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

于是,网页开发就分成了:前端和后端

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

V01_网站三大件2

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

1.3、静态网站

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

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

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

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

V01_网站三大件3

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

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

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

2.1、域名常识

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

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

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

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

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

2.2、域名价格

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

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

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

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

V01_网站域名

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

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

国内注册商,推荐腾讯云阿里云

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

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

V01_网站域名

2.3、域名解析

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

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

V01_域名解析

主机记录:

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

输入@,可以理解为顶级域名解析,比如我的是 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。

V01_Github

创建成功后。

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

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

V01_Github2

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

3.2、Gitee

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

V01_Gitee

3.3、Vercel

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

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

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

V01_Vercel

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

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

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

V01_Gitee

3.4、Notion

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

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

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

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

V01_Notion

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

4.1、手写 HTML

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

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

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

V01_手写HTML

4.2、完善内容

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

需要注意的是。

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

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

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

V01_手写HTML2

4.3、使用模版

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

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

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

V01_HTML模板

一些代码素材网站:

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

V01_博客程序

5.2、奶酪推荐

三款应用,奶酪推荐 HexoHugo

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

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

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

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

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

而 Hexo 和 Hugo 都能做到。

V01_博客程序2

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.jsVue 开发。

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

V01_文档程序

6.2、奶酪推荐

三选一的话,奶酪推荐 VuePress

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

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

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

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

VuePress 则兼具了方方面面。

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

V01_文档程序2

并且,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

更新中。。。



最后

  1. 欢迎关注奶酪 公众号 获取奶酪所有的原创资源,回复文章编号,比如 V01 就可获取对应的资源。
  2. 欢迎订阅我的 “奶酪书签专业版”,15年沉淀,超过 5000 个分类井条有序的好用实用 html 网站书签。
  3. 本文由「奔跑中的奶酪」原创创作,欢迎订阅、留言和 打赏,也欢迎引用和转载,但要注明出处。
注:本文由 奔跑中的奶酪 作者:奔跑中的奶酪 发表,其版权均为作者所有,如需转载,请注明作者名字以及文章来源。
57
avatar

评论:

5 条评论,访客:0 条,站长:0 条
  1. PassionAries
    PassionAries发布于: 

    免费服务器上哪弄?

  2. 啊估先生
    啊估先生发布于: 

    看了这篇文章,给我的感觉是,懂的人不用看,不懂的人看了还是不懂。

  3. Exc_yz
    Exc_yz发布于: 

    请问奶酪一般写博文用什么写啊?

  4. w
    w发布于: 

    “0 元 0 代码”就能建一个个人网站可能不是标题党,因为有免费域名eu.org和js.org

    • 逍遥
      逍遥发布于: 

      eu.org审核太久了,我的审核几个月了都没动静

发表回复