GitPages搭建自己的博客并绑定域名

引子

昨天晚上无意间在网上看到一篇利用gitPages建立自己博客的文章,还免费!本人立刻跟打鸡血似的了,今天鼓捣一整天,终于有一个雏形了,当然还有好多功能没有加,例如评论、统计之类的,一步一步来吧。这篇文章主要写一下今天自己建博客遇到的一点问题,希望能对看到这篇文章的人提供一点帮助。本文只求能将基本流程用比较浅显的语言讲出来,更深入和更细节的问题请自己探索 。

必备工具

硬件

电脑、网络什么的不用说了,这里以mac为例说明。

软件

下边将会提到:

  1. Homebrew:这是一个Mac环境下的软件管理工具。它会将套件安装到独立目录,并将文件软链接至 /usr/local ,也就是说装了它之后,就可以通过命令行来安装软件了;
  2. Node.js:简单的说,就是运行在服务端的JavaScript,有了它,服务器就能对我们的请求作出相应了,也就是说它是用来配置站点服务器的,具体关于Node.js的介绍可以看这篇文章
  3. Hexo:一款基于Node.js的静态博客框架。它决定了我们的博客文章是怎么显示出来,也就是它定义了我们博客的样子,网上有很多基于hexo的主题,都很漂亮,可以根据自己的喜好来设置;
  4. Git和GitHub:Git是版本控制软件,它是一个工具,GitHub是一个项目托管平台,以Git进行版本控制为基础。关于Git,可以参考这个教程,干货多多。

建立博客的流程

想要建立一个自己的博客,其实就相当于要盖一座属于自己的展览馆,我们的博客文章就相当于展览馆的展出品,hexo相当于装修工人,Node.js相当于展览馆的工作人员,服务器就相当于是展览馆(包括展览馆的后勤系统),而GitHub就相当于展览馆所在的城市。

首先我们得决定把展览馆建在哪个地方,北京?上海?还是家里蹲?这就相当于我们是选择阿里云的服务器、腾讯云的服务器还是Git的服务器。前边两个都需要出租金的,而最后一个,我们只要注册一个账号,就能在它这盖房子了(好慷慨,不过它能提供的功能也比前两者少很多,房子只能盖小一点)。选好地儿之后,然后准备建筑材料,我们就可以盖自己的展览馆啦。

等基础设施都盖好之后,我们还要雇佣工作人员来维持场馆正常运转,还要进行室内的装修等等,哎,好麻烦啊。幸运的是,这一切都由hexo帮我们做好了。我们只需要进行一些基本的参数设置(博客的名称、作者、简介等),选择不同的装修风格(hexo主题)就行了。

然后我们就需要把在家写好的书、画好的画(博客文章)运到展览馆啦(文件的上传),接下来,我们只需要在网上和朋友们推荐自己的这个展览馆,告诉他们展览馆的地址(域名),鼓励他们都来参观(访问),然后就大功告成啦,尽情享受他们的赞叹吧。这就是博客建立的大致流程(中间省略好多细节,其实每一个流程单挑出来都是一门大学问,所以根据自己的兴趣或者哪一块不太明白可以自己在网上搜索)。接下来,我就根据这几个流程来讲一下博客的建立:

准备工作(软件的安装)

安装homebrew和Node.js

先安装homebrew,并确定其安装正确,然后安装Node.js,步骤比较简单,具体可以参考这篇文章的前半部分。

我遇到的坑

在这里,我之前遇到的一个坑是:安装完Node.js之后,在终端输入命令总是提示没命令无效,后来发现是因为文件夹搞错了。安装Node.js的时候,需要注意它安装在什么地方,因为以后执行npm之类的指令时,需在其安装目录下执行才有效。打开终端后,默认是以下格式:localhost:~ mac$$前是本地账户的名字,而账户名字前就是当前文件夹。终端默认是在本地用户的根目录下。当进入某一个文件夹后(cd命令,可以先ls查看当前目录下的文档),之后终端命令会类似于这样:localhost:hexo mac$,也就是进入了hexo的文件夹。当执行npm或者其他指令的时候,需要确保当前文件夹是Node.js的安装路径才能执行。具体的命令可以参考Mac常用的终端命令

注册账号(选地址盖房子)

注册账号的事情对于我们应该都不难吧,长这么大,注册的各种网站自己有时候都数不过来。流程呢,也更是轻车熟路。

GitHub官网注册一个账号,然后创建一个新的仓库(repository),仓库的名字一定要类似于:userName.github.io,userName一定要和你创建的Git账户名字相一致,而且后缀名字如果是.com访问的时候会出问题,接下来要下载Git软件,因为后续进行文件的上传需要用到。Git下载完之后,因为要和远程的GitHub服务器连接,所以还需要进行相关的配置,ssh验证等,具体的步骤可以参考上边提到的那个教程,或者是这篇文章,或者是这篇文章。这一步需要一点耐心。

Hexo的安装和配置(装修场馆)

好了,费劲一番周折后,终于可以把我们的展览馆盖起来了。接下来该进行最重要也是最有趣的步骤了。

Hexo的安装

当然,在这之前,还需要进行hexo的安装,不过,在经历了之前那么多安装步骤之后,这一步应该早已不在话下了。在终端输入$ sudo npm install hexo-cli -g即可。

Hexo的配置

Hexo的初始化

接下来就该装修我们的场馆了。首先,先初始化hexo,以后写博客的时候,一般就是本地调试,然后直接上传至服务器这样一个过程。终端中输入:$ hexo init userName.github.io,hexo会以init后边的名字新建一个文件夹并进行初始化的工作。注意:同样,因为有上边说的坑,所以这里,我们首先要通过cd命令进入到刚才hexo的初始化文件夹里,才能够进行下边的步骤。

安装主题

主题安装的方法基本都一样:网上找主题->git命令克隆复制到本地->配置->上传服务器->生效。

  • 首先,git命令:
    $ git clone https:github.com/iissnan/hexo-theme-next themes/next,获取主题并复制到本地;
  • 配置。配置文件有两个,名字都是_config.yml,一个在hexo根目录下(站点配置文件),一个在主题名字的根目录下(主题配置文件)。它们都可以通过自带的文本编辑器打开并进行修改,注释也都比较详细,比较容易阅读;
  • 站点配置文件:主要设置博客的名称、作者、时间戳等基本信息,详细请看具体的站点配置文件说明。一般我们需要修改的有:title、author、language(汉语:zh-Hans)、theme(要使用的主题名字)、deploy(部署)下的类型(type:本例写git)和仓库(repo:https://github.com/userName.github.io.git);
  • 主题的配置文件:一般在主题的github就有详细的文档进行介绍。本例next主题的配置文件请看next主题配置。另外关于主题的文件夹层次结构,请看官网介绍:主题文件夹介绍
    到了这一步,我们就可以测试一下输出了。在终端中输入$ hexo s,正常的情况下会出现:INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.,这表明配置已经正确,hexo开始运行了,接下来我们只需在浏览器中输入http://localhost:4000/,不出意外就可以看到Hello world的页面了。

编写博客

关于Markdown

配置成功之后,我们就该正式开始我们的工作了,毕竟前边所有的折腾都只是为了这一步--编写自己的博客文章!现在Markdown貌似挺火,用起来也算简单方便。所以我们可以通过本地Markdown编辑器,编辑我们的博客文章,内容格式可以参考hexo目录下的scaffolds文件夹中的模版,至于具体的Markdown语法可以参考这里:简书,常用的命令都有提到。多说一句,我比较推荐使用本地编辑器,快捷键用起来非常方便啊,Mac下我用的是MacDown。

本地调试

编写完博客之后,将文档保存在hexo/source/_post文件夹中即可,是不是看到了刚才的Hello world文件?然后打开终端,输入$ hexo clean && hexo s,打开本地调试,是不是看见我们写的文章了呢?终于完成一大半工作啦!注:clean命令是清除缓存。

上传文件

本地调试好格式之后,接下来我们只需要把本地的文件上传至gitHub服务器即可。这里我们先通过:$ npm install hexo-deployer-git --save安装自动部署发布工具,然后输入$ hexo clean && hexo g && hexo d,等待系统上传完成即可。注:hexo g表示generate,生成静态文件;hexo d表示deploy,部署文件。

设置域名(场馆地址设置)

正常访问

上一步上传文件完成后,正常情况下,在userName.github.io仓库下就可以看到刚刚上传的文件了。然后在浏览器中输入:https://userName.github.io,看!是不是就可以访问到我们刚刚写的博客了?就是这么神奇!

好了,创建自己的博客到此结束…别急!你以为故事就这么结束了?!我申请的49块钱的域名还没用上呢?!赤裸裸的资源浪费啊!必须继续,把域名给用上啊!

为了钱不白花,多出来的一小节

首先你得先有一个域名这个自然不用说了吧,可以在网上搜,然后买一个,不是很贵(上边我都把域名的价格给暴露了…)。然后继续:

配置CNAME

在hexo文件夹下的source中新建一个文本文档, 里边输入刚才我们买到的域名的二级域名。举例来说,我申请的是dalianer.com,就填写blog.dalianer.com。但开头不要添加http(s)://,然后保存为CNAME,一定要是大写,否则会出问题,后缀名也去掉。另外,一个CNAME文件只能填写一个域名,这一步的目的是告知GitHub,我们要使用另一个域名来发布我们的博客,然后gitHub会将这个域名当作我们仓库的主域名,如果访问userName.github.io,会自动跳转至我们设置的域名。插曲:这里边说一下我遇到的一个坑:当时我在gitHub的仓库中直接新建CNAME文件,然后正常保存,可在终端部署完hexo之后,本地文件都成功上传至服务器,但是刚才新建的CNAME文件却没了!后来找到这个方法,好使!

配置解析服务器

刚才我们只是告诉gitHub我们要映射域名,gitHub会将我们的仓库名映射到自定义域名上,但是在我们直接访问自己域名的时候,还不会自动跳转至gitHub上。感觉上一步有点类似于只是将我们仓库的地址重新起了个名字一样,这一步才是真正的重定向:域名解析设置

注意:在这里还有一个大坑:我们一般申请的是顶级域名,也就是domain.com/.cn之类,如果我们在CNAME文件中填入这个顶级域名,接下来我们的解析设置也会因此改变,需要解析跳转到gitHub的服务器地址,但是在网上搜了一圈,没找到现在gitHub对外的ip地址(之前的文章写的都有),说人话也就是:现在直接填写申请到的顶级域名,不能使用!xxx.com只能重定向至192.168.xxx.xx之类的地址,但是gitHub这个地址现在我们拿不到,所以最好使用二级域名,之后将解析重定向至userName.github.io即可。

总结

经过这么多的折腾,我们现在终于创建出属于自己的博客了,并且能通过自己的域名进行访问。虽然原理并不复杂,但是里边的细节比较多,步骤比较琐碎,需要一点耐心,不过当最后看到博客页面跳出来的时候,你一定会和我的感觉一样:一切都不是事儿!