本文主要分三部分内容讲解如何基于GitHub Pages结合Hexo这个快速、简洁且高效的博客框架搭建一个无流量限制的个人博客站。

GitHub pages

  1. 新建一个仓库。以我的ID windstormeye为例,仓库命名为:windstormeye.github.io;
  2. 勾选 “Initialize this repository with a README”;
  3. 点击 “create repository”。

    此时在浏览器中输入windstormeye.github.io即可看到只有对应域名,也就是windstormeye.github.io的页面。到此GitHub Pages也就创建好了,接下来我们需要美化它。

    PS:如果你具备较好的或者准备学习前端知识,大可用此站作练手的机会。GitHub Pages实际上你可以认为是一个空间,也就是狭义点说的服务器,并且还是已经配置好环境(比如域名、网络等)的服务器,如果你只是想较为快速的搭建一个博客而已,那么继续往下看。

Hexo

  1. 创建一个博客本地主文件夹。此处以pjhubs为例;

  2. 保证有本地已安装好Git和Node.js。若没有请先自行安装;

  3. cd pjhubs。执行以下命令安装hexo,

    1
    $ npm install -g hexo-cli
  4. 保证已经进入pjhubs目录下后,执行,

    1
    2
    $ hexo init pjhubs
    $ npm install
  5. 如果我们需要本地查看博客修改完后的内容,需要先下载server模块,

    1
    $ npm install hexo-server
  6. 下载完毕后,执行

    1
    $ hexo server
  7. 打开浏览器,输入localhost:4000即可看到对应hexo的默认主题landscape效果。如果你想要修改博客主题,可以去Hexo主题中搜寻你喜欢的主题。一般大家都会把主题托管在GitHub上,只需要在pjhubs的目录下执行以下命令(以我所使用到的这个主题为例)

    1
    $ git clone https://github.com/probberechts/cactus-dark

    此时我们可以在pjhubs/themes目录下找到cactus-dark这个主题的所有内容,然后在pjhubs目录下编辑_config.yml,找到并修改为

    1
    2
    theme:
    cactus-dark

    保存后并刷新localhost:4000即可看到更新后的主题。

  8. binding GitHub。在pjhubs下编辑_config.yml,

    1
    2
    3
    4
    deploy:
    type: git
    repository: https://github.com/windstormeye/windstormeye.github.io.git
    # 此处改为你自己GitHub Pages地址
  9. 每次对博客内容执行修改后,都应该养成良好习惯对其执行,

    1
    $ hexo generate

    进行静态页面的生成,随后再执行

    1
    $ hexo deploy

    此时在GitHub对应仓库中可看到本地pjhubs下的所有文件均已上传,在浏览器中输入windstormeye.github.io即可看到基于hexo搭建的博客。💪


绑定域名

   如果你不想使用GitHub Pages所分配的域名,可以去各大域服务提供商,比如腾讯云、阿里云等处购买域名并备案。
   一切准备工作完成后,进入各大域名服务提供商的云解析页面进行对应设置,

  1. 主机记录:@;记录值:192.30.252.153;
  2. 主机记录:@;记录值:192.30.252.154;
  3. 主机记录:www;记录值:windstormeye.github.io;(别忘了改成你自己的地址)
  4. 在pjhubs/source下新建一个CNAME文件。填写你自己的域名,比如:pjhubs.cn
  5. 在pjhubs下编辑_config.yml,

    1
    url: http://pjhubs.cn
  6. 最后再执行,

    1
    2
    $ hexo generate
    $ hexo deploy

    此时等过了域名服务提供商设置的默认的TTL时间后(一般都是600秒吧),再到浏览器中输入,比如pjhubs.cn即可看到原先的windstormeye.github.io的内容。如果发现再次本地修改完博客内容推送至GitHub上是404的话,可能你需要下载一个hexo插件用来永久保存CNAME文件,因为有极大可能你的CNAME文件被覆盖了,

    1
    $ npm install hexo-generator-cname --save

    在pjhubs下的_config.yml中添加一条,

    1
    2
    Plugins:
    - hexo-generator-cname