2021年1月6日更新:

以前(下面)写的还是复杂了些,现在有更简单的方案:买个域名,利用免费的组合 Notion+CloudFlare ,用 fruitionsite 的脚本,成站可玩性高,界面简洁明快。

得益于 Fast.io 这项创造性服务的上线,作为一点不懂建站技术的你,按照本指南(并且只需要操作一遍),你就可以获得一个免备案的自有博客网站。

一、简述及基本原理

一个网站要正常上线,需要了解一些基本的原理,我作为一名干过 IT 产品经理的建筑设计师,希望通过最通俗易懂的方式来解释这些技术及其作用,让大家明白其中的原理。

1、发布内容的工具或方式:

也可以说是网站的后台,一般博客后台都会包括一些常用设置,但是主要作用是发布内容,发布的形式主要包含两种:

一种是在线方式,即内容是在网站的相关页面实时在线编辑并发布的;
一种是离线方式,即内容创作通过相关客户端在本地编辑,想写的时候写写,不想写的时候该干嘛干嘛。内容的编辑在本地完成,检查无误之后再发布/同步到网站上,这里我们选用 Gridea 这个开源本地客户端,它支持 Mac、Win、Linux。

gridea

小结:到这里,你该明白发布内容也是有方式方法的,有逼着自己马上完成的在线方式,也有休闲的离线方式。

2、网站储存和运行的位置:

通常情况下,你需要购买一台 VPS(虚拟专用服务器) 进行各种程序员级别的服务器建站环境配置;最简单你也要购买一台虚拟主机(别人在 VPS 上配置好建站环境,然后卖给你一个建站账号),即便是虚拟主机,你也需要去理解什么是网站文件,什么是数据库,什么是解析,什么是 SSL,什么是 CDN 等等。

当然,懂的老铁们会说在 Github Pages 上整是最简单的,网上一大票的教程教你怎么做到,但是这是一份写给普通人的指南,无脑的可操作性非常重要,怎么用 Git 命令这一简单的问题我到现在都没搞明白,就更不用说一般普通人了。

Safari 浏览器_2020-06-13 09-34-12

但是这里我们还是要使用 Github(而非 Github Pages ),除了因为本指南推荐选择的离线客户端支持 Github 外,还因为按照本指南配置的网站比 Github Pages 类型的网站更具有访问速度优势,同时它也是 Fast.io 默认支持的。

小结:到这里,你该明白一个网站的文件是需要找一个地方存储。

3、网站推到公网上的配置:

一个网站除了找到存储和运行的地方之外,还需要进行一定的配置将它推到公网上,让别人可以通过域名的方式进行访问,如若不然,你把储存放在网盘上岂不是也能做网站?(虽然现在真的可以了!!!)

1)那么既然是自己的博客,当然希望使用自己选用的个性域名访问不是,那你就需要有一个域名,而域名通常不能免费获得,这也是这套指南中唯一需要花钱的地方,但是我认为这个钱是值得花的,因为如果你真的想要按照本指南运行个人网站的话,域名才是你最有价值的资产(还因为域名并不贵)。
对于普通人的你需要知道的是,域名不仅购买需要花钱,后续每年都需要花钱续费。具体费用根据你选择的域名服务商的不同而有所不同。

Safari 浏览器_2020-06-12 13-28-29

2)然后就是域名的解析,什么叫解析呢,我个人理解,解析就是你得告诉域名,当别人访问你域名的时候,它实际上应该访问到哪里。

3)Fast.io 这个神器般的存在就是上边说的访问到哪里的那里,不仅如此,它至少还解决了如下几个必要问题(虽然普通人并不一定需要明白,照着后边的教程做就行了):

  • 它能够链接 Github 仓库以及其他网盘服务,将他们作为存储网站文件的地方
  • 它能够将你的域名与你的站点进行连接(免费用户可以免费挂一个顶级域名),让别人通过访问域名就能访问到你的网站
  • 它能够提供免费 SSL 证书(目测还是自动续期的),具体来说就是让你的网站通过 https 协议进行访问,而不是 http 协议。都 2020 年了,现代浏览器包括但不限于 Chrome、Safari、Firefox 等对于 http 协议的网站已经非常不友好了。
  • 它能够提供免费的 CDN,什么意思呢,就是传统情况下,不管你的网站放在哪里,用户要访问你的网站,每次都是连接到你的服务器上的,那么如果服务器离你非常远,比如在美国,或者线路不好,全球绕圈圈才能抵达服务器呢?CDN 就是解决这个问题的方案,它能将你不管放在哪里的网站缓存到世界各地的缓存服务器中,用户访问的时候会就近选择并访问 CDN 服务器中缓存的内容,这不仅仅加快了网站的访问可用性,还同时隐藏了网站服务器的 IP 地址,减少被人搞的风险。

小结:到这里,你大体明白了一个网站正常需要知道的基本理论知识。

二、建站设置流程

按照以下流程做,你也可以建立自己的博客网站

1、准备工作

1)注册 Github 账号

可参考这篇文章: 教程:注册github账号 ,需要注意的是,Github 账号需要邮件验证。

2)注册 Fast.io 账号

点这里注册一个 Fast.io 账号,也需要邮件验证。

Safari 浏览器_2020-06-12 14-21-59

3)购买一个域名

域名这个水就深了,甚至已经形成了专门买卖域名的市场,多数好的 com 域名一般已经被人注册了,但是域名后缀不仅仅有 com ,还有很多其他后缀的域名,可以到这里看看域名的世界究竟有多大,如果你想要注册的域名 com 已经没有了,可以根据需要购买其他后缀的域名。

  • 推荐的国内域名注册商:eNameAliyun。国内注册商都需要实名认证,过程繁琐且耗时间。
  • 推荐的国外域名注册商:NameslioNamecheapGoddady。不需要实名,支持支付宝和微信。

4)注册一个域名解析服务

上述域名注册商处都会提供解析服务,但是用第三方的解析服务,能得到更强大的功能。

  • 推荐的国内域名解析服务:Dnspod。被腾讯收购了,当前还可以免备案解析。
  • 推荐的国外域名解析服务:Cloudflare。免费 SSL、免费 CDN,选它就对了。

需要注意的是,域名的解析若要托管在第三方,需要在域名购买处设置目标域名的 DNS 地址,这样第三方解析服务才能正常对域名进行解析,比如 Cloudflare 提供的 DNS 地址写在 Nameslio 购买的域名下。还要注意的是 DNS 地址是有上下顺序的,需依据顺序录入。

预览_2020-06-12 15-06-06

小结:到这里,需要的准备工作就都做好了。

2、添加 Github 仓库

到这里添加一个 Github 普通仓库,并选择 Private 类型,这能保证网站在 Github 上的原文件只有用户自己才能查看,相关参数如图所示:

Google Chrome_2020-06-13 09-37-19

小结:提示创建成功即可,出来的页面那些都不要去管(其实我也搞不懂)

3、将 Github 仓库连接到 Gridea 客户端并生成网站初始内容

1)进入 Gridea 软件进行设置。按照下图的示例进行设置,然后点击「检测远程链接」,进行配置检查。令牌部分见2)。

Gridea_2020-06-13 09-48-15

2)到这里按照如图参数设置,获取令牌(Token)勾选上 repo 的相关权限即可。生成之后记得把 Token 复制到你的本地,因为一旦关闭网页将不能再看到它:

3)软件中可以进行很多个性设置,包括选择主题,开启关闭评论,设置头像,网站标题等等,初步设置好后,点击 Gridea 软件中左下角的“同步”,将网站推送到 Github 仓库上。

Gridea_2020-06-12 16-33-21

需要说明的是,此处需要至少进行一次同步,保证 Github 仓库里面已经有内容,后边 Fast.io 才能进行操作,否则在 Fast.io 中添加 Github 库可能会失败。

小结:到这里,你的 “Github 私人服务器” 上已经上传好了网站文件。

4、在 Fast.io 创建一个站点

1)到这里去创建一个站点,选择一个站点名称,随便写,无所谓,以后还能改。

Google Chrome_2020-06-12 16-00-01

2)选择一个网站的储存空间,这里可以选择很多主流的网盘,但我们选择 GitHub 。

Google Chrome_2020-06-12 16-00-10

3)GitHub 需要授权 Fast.io 的访问,点“Authorize and select a repo”。

Google Chrome_2020-06-12 16-00-21

4)选择一个你需要授予权限的仓库,也就是你建立的 Github 仓库,在跳出来的页面,选择仓库(比如:test)和分支 master。

Google Chrome_2020-06-13 09-56-00

5)选择一个站点用户名(不支持中文),随便写,无所谓,后边可以设置默认隐藏。

Teampaper Snap_2020-06-12 16-04-34

5)至此 Fast.io 站点创建成功。

预览_2020-06-13 09-53-26

小结:到这里,你的 “Github 私人服务器” 上的文件就开始自动缓存到 Fast.io 上了,稍等一会儿,你甚至已经可以访问你的 username.imfast.io 看看你建立好的网站。

5、在 Fast.io 站点上配置自己的域名

1)登陆你的域名解析服务商处添加域名,这里以 Cloudflare 为例。

Google Chrome_2020-06-12 17-08-24

2)选择套餐,这里选择 Free 的,系统会扫描你域名的名称服务器是否是 Cloudflare 的。

Google Chrome_2020-06-12 17-08-40

3)到域名购买处设置域名的 DNS 为 Cloudflare 提供的地址,这里以 eName 为例。

Teampaper Snap_2020-06-12 17-14-48

4)返回 Cloudflare ,点击域名下的 “立即重新检查”,稍等一会儿,就会提示成功,此时就做好了对域名添加解析记录的准备了。

Google Chrome_2020-06-12 17-15-53

5)到 Fast.io 对应的站点下,找到左边的 Domains 选项卡。

Google Chrome_2020-06-12 17-19-19

6)点击“+ Add Custom Domain”,添加你的站点,比如此处我添加 test.bbmer.com ,选择“Yes, Continue”。

Google Chrome_2020-06-12 17-21-02

7)在接下来的页面,提示使用第三方解析还是 Fast.io 默认提供的解析,选择“Use my own DNS”。

Google Chrome_2020-06-12 17-23-19

8)稍等一会儿,会提示添加解析。

Google Chrome_2020-06-12 17-24-01

9)返回 Cloudflare,按照提示添加一条解析。

Google Chrome_2020-06-12 17-28-57

10)回到 Fast.io ,按“Continue”回到站点设置页面,如图操作,这将可以隐藏你的实际站点地址,如用户通过 nfc.imfast.io 访问也会自动跳转到 test.bbmer.com 。

Google Chrome_2020-06-13 10-06-14

小结:到这里,我设置的 test.bbmer.com 二级域名网站,你设置的某顶级域名网站(比如 bbmer.com )就已经搭建好了,过程中我们避免了代码程度的配置,基本上整个流程都是点按来完成。

6、所有的都做完了

按照以上一通操作之后,回到 Gridea 客户端,快乐的进行写作吧,写好之后,点击一下“同步”按钮,稍等片刻,再去访问你的网站(可以访问我的测试站看看效果 test.bbmer.com ,该测试站点不保证一直能够访问)就已经同步好了。

这里对比直接访问 Github Pages ,访问 test.bbmer.com ,以及某国内站点进行速度测试,来说明通过这样设置的网站,在国内访问在速度上的优势,测试下来大约等于 HK 服务器的速度。

访达_2020-06-13 10-22-06

因为 Github、Fast.io 和 Cloudflare 都是免费服务,之后,你可以不用再去关注这三个地方,对于你来说,这三个地方已经变成了“普通人黑箱”。以后只需要记得每年提前到域名购买商那里续费即可。

三、其他相关说明

1、关于 Markdown

Gridea 客户端支持 markdown 语法,这种语法像是写 txt 文件一样简单,稍微了解一点这种语法,对于美化你的内容创作会有所帮助,你可以通过以下链接了解:

younghz/Markdown: Markdown 基本语法。- GitHub

Markdown 语法 - MWeb

2、关于 Gridea

这是一个非常不错的开源程序,安全有保障,并且也有不少人为它写主题,有些主题是付费的,可以到主题市场去下载喜欢的主题。
其他相关问题,可以到这里查看官方文档

3、关于 Fast.io

除了本文的用法之外,它还能将国外网盘的储存空间破墙作为文件分享的工具,只希望大家都不要滥用导致这个工具被墙才好。

一般能自定义域名的公共服务,都是按月收费的。Fast.io 这项服务才上线不久,提供了5个站点,一个自定义顶级域名,100G/月流量的免费套餐,不负责任的猜测,未来很有可能自定义域名还是会收费,早下手早享受。

4、关于 Github

这是一个纯纯的程序员工具,我们的用法只能发挥了它极少数的能力,但是对于我们普通人已经足够了。对于想要学习程序开发的朋友,可以在网上搜索到一大票的内容,这里不再赘述。

最后,希望你能喜欢这篇分享,让我们的独立博客躁起来。


-------------完-------------