拥有一个自己的个人网站,是“成功人士的标配”。但是,作为个人站长,选购域名、服务器,配置服务器环境,搭建网站框架,进行备案,坚持更新内容……整个过程非常繁琐,也需要很多计算机知识,对于非程序猿来说未免有些太不友好。再者,最低配云服务器也得一年几百元的费用,对于初期访问量较少的站点来说也是一笔额外开销。

今天宅菌就来给大家写一个较为全面的教程,我们使用“国际知名同性交友网站” —— Github —— 提供的免费建站服务 GitHub Pages 来搭建自己的站点。GitHub Pages 目前已经被广泛使用,很多个人主页、开源项目主页,都托管在这个服务上。

Github 账号

既然要用 Github Pages,拥有一个 Github 账号是第一步,如果还没有账号的话,快去 Github 注册一个吧 :

https://github.com/join

640-2.jpg

注意啦,注册的时候用户名一定要认真填写,因为将来你的主页网址就是 你的用户名.github.io, 所以尽量不要起太随便的用户名哦。

建立 Github 仓库

拥有 Github 账号之后,我们需要在 Github 中新建一个自己的仓库 ( New Repository ),这个仓库有着特殊的命名规则:必须是 你的用户名.github.io 。

640-3.png

本地下载 Github 项目

Github 类似于一个网盘,你在本地编辑代码,然后可以提交到 GitHub 上,将代码放到云端。所以,刚才我们在 Github 新建完云端仓库之后,需要将代码下载到本地来。这时就要借助专门的软件(Git),不过方便起见,推荐大家下载 Github 客户端,操作简便,不需要敲任何命令,图形界面就能完成常用操作。

请到 https://desktop.github.com/ 下载和你系统版本对应的客户端。

安装之后,使用你的 Github 账号登录,并且找到刚才创建的 xxxx.github.io 仓库,将其 clone 到本地。

640-3.jpg

网站搭建方式

GitHub Pages 提供的是静态网站托管服务,也就是说,它所能放置的都是静态页面,如果需要更新内容,流程就是你在自己本地修改,将修改后的代码提交到 Github,Github Pages 会自动为你更新网站内容。

如果你非常硬核,完全可以自己手撸一个静态网站,HTML、CSS、JS 都搞起来。但大家一般都会使用现有的丰富多样的构建工具,有现成的模版和站点生成器可以使用,好看又方便,没必要自己造轮子。

目前常见的 Github Pages 建站方式有 Jekyll、Hexo 等等。Jekyll 是 Github Pages 自身支持的一种构建方式,如果使用 Jekyll,你只需将站点的 Jekyll 源代码提交到仓库,Github 就会自动为你构建和发布;如果使用 Hexo 等其他方式,这些工具需要你在自己的电脑上将源代码构建成 HTML 页面,然后才能上传到 Github 上发布。

这块不展开来说了,因为每种工具都有非常多和复杂的功能,并非短短一篇文章能够说清,大家之后可以自行搜索相应关键词 Jekyll 或者 Hexo ,按照相应的说明来操作。

好啦,因为是三十分钟快速建站,我们这里直接使用别人的现成模版来快速搞一个,你可以去

https://github.com/Huxpro/huxpro.github.io

直接下载 Hux 的个人 Jeykll 站点源代码:

640-3.png

下载之后,将整个代码拷贝到刚才下载的你自己的 xxx.github.io 目录下,覆盖原有文件即可。

删除自带的 CNAME 文件

刚才我们直接搬运了 Hux 的个人博客代码,需要注意这份代码里的 CNAME 文件,这个文件里可以写你自己的自定义域名。

我们这一步先删除这个文件,否则这里用的是 Hux 的域名了,会导致你的博客无法访问。后面讲到自定义域名的时候,会再回来修改它。

代码提交

你也可以继续按照 Hux 仓库里的教程,把博客自定义的配置修改下。修改之后,在 Github 客户端中可以看到哪些文件被改动。(截图只是示例,你操作时显示的 Changes 不会和下面完全相同)

640-4.jpg

全部勾选上你刚才改动的文件,然后点击下面的 Commit to master。此时完成一次本地 commit,我们还需要上传到云端,再点击一下 Push origin。

640-4.png

ok!以上就是站点更新发布的流程了,以后的内容更新也可以按照上面的步骤,先本地修改文件,再从客户端中全选刚才的修改,Commit 然后 Push,就可以完成一次发布。

稍作测试

如果你按照上面的步骤操作完成,此时访问 你的用户名.github.io 这个地址,就会出现你的博客了!!

如果没有的话,请再回顾下上面的步骤,看看哪里出了问题。

域名购买

上面完成了基本建站,下一步来搞定自定义域名的事。如果不需要自定义域名,那么恭喜你已经完成了建站步骤,可以去再详细了解下 Jekyll,进行更多的个性化定制了。需要自定义域名的话,再继续下面的步骤:

首先你需要购买一个域名,可以到阿里云、腾讯云等很多平台购买。

购买后,如需实名认证,请按网站提示完成实名认证等步骤。

然后需要进行域名解析,也就是说将域名指向你的 Github 域名。可以参照下图来配置,类型选 CNAME,记录值填写 你的用户名.github.io 这个地址。

前面的主机记录如果填 @ ,则表示根域名指向,比如说你的域名是 a.com,前面填 @,那么访问 a.com 就可以访问你的网站;如果主机记录填自定义的比如 blog, 那么需要访问 blog.a.com 才能访问你的网站。根据实际情况填写即可。

640-4.png

填写完成,保存之后过一段时间就 ok 了。

修改 CNAME

好啦,现在回到之前代码里的 CNAME。我们使用 Hux 的代码时,直接删除了 CNAME 文件,现在需要将它加回来,只不过里面写的是你自己的域名了。

修改之后,再次重复上面的 勾选 - Commit - Push 步骤,完成代码发布。

测试自定义域名

现在来试一下访问你的自定义域名,如果操作无误的话,现在就可以通过你的自定义域名访问你的网站了!

配置 Https

现在 https 是网站的主流,很多浏览器甚至会对 http 的站点提示不安全。Github Pages 现在也非常贴心地提供了 https 证书服务,你很轻松就能让你的网站用上 https。

打开 Github 网页版,找到你的仓库,在 Settings 里面可以勾选 https。
640-5.jpg

勾选之后过一小会儿,证书就会签发成功,你的网站就可以使用 https 访问了!
640-6.jpg


以上就是使用 GitHub Pages 建站的一个较为全面的教程,可以看到整个流程中,你所需要花费金钱的,就只有购买域名这一项,如果不需要自定义域名的话,你可以完全免费地快速建站。感谢 Github 提供的这项福利啊~

更多拓展

虽然 Github Pages 是纯静态的站点,但你仍然可以通过集成第三方服务,来增加页面访问统计、评论留言功能等更丰富的功能。比如说访问统计,可以使用 不蒜子 提供的访问量计数,或者 amazingcounters , 评论留言可以集成 disqus 或者 搜狐畅言 等服务。这些扩展服务可以让你的博客或者网站拥有更丰富方便的功能。

如果建站过程中遇到问题,也可以在这条推送下,留言提问啊!