使用 Hexo & GitPage 搭建博客

SkyRiN

发布于 2018-11-20 16:49:57

6550

发布于 2018-11-20 16:49:57

文章被收录于专栏：Coding+Coding+

概述

GitPage 是个什么东西？它和 GitHub 是什么关系？Hexo 又是什么？它和 GitPage 又是什么关系？为什么我要用 Hexo + GitPage 搭建博客？这些问题在我不了解 GitPage 之前都是一堆问号，想必大多数小白都和我一样很懵，现在网上关于搭建博客的教程一大堆，但是当初我在搭建的时候照着步骤一步一步搞感觉很不爽，直到最后博客搭完了才明白以上几个问题，所以这里我想先给大家回答一下上面几个问题，然后再逐步教大家使用 Hexo + GitPage 搭建属于你自己的博客。

Hexo 简述

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，使用 Node.js 渲染页面，通常在很短的时间内即可利用靓丽的主题生成静态网页。同时 Hexo 也拥有强大的插件系统，支持 Jade, CoffeeScript 等诸多强大插件。

GitPage 简述

GitPage 与 GitHub 同属一个组织 GitHub Inc.，可以说 GitPage 出生的目的就是为了服务于 GitHub，我们知道 GitHub 上有众多非常优秀的开源项目，有些项目比较大，涉及到框架级别的项目它的说明文档就不是写几个 Readme 就能讲清楚的事了，所以这种情况下这些项目的维护者就急需一个站点来详尽展示此项目的功能、用法、及更新动态等等，比如大名鼎鼎的 ReactiveX 的 GitPage 地址为 http://reactivex.github.io 你在浏览器访问这个 URL 会自动跳转到 reactivex.io，这是其自定义域名（这是 GitPage 又一个很赞的功能，后面详细介绍），那么问题来了，程序猿们虽然看起来比较万能，但实际上并不是万能的，所以可能一些研究底层架构，程序开发很 NB 的程序员却真的是 HTML、CSS、Linux 小白，毕竟术业有专攻啊，所以这时候让他们自己去搭个站点就真的头疼了，毕竟是有时间成本的。

于是 GitPage 诞生了，GitPage 允许你将你的博客创建为一个 GitHub Project，通过 your-account.github.io 这样的特殊项目名称与 GitPage 进行关联，然后，你只需要像平时一样 commit 你的博文到 GitHub 上就 OK 了，GitPage 会自动将你的更新部署出去，完全不需要考虑服务器、数据库、运维、甚至 HTML 等这些发布站点的必备技能，所以 GitPage 诞生的目的就是要把你的专注点拉回到写文章上而不需要花时间去考虑其它事情。

这时你可能会注意到，我要如何去个性化我的站点？我真的仅仅需要 commit 一个文件上去就 OK 吗？当然不是的，想要个性化自己的站点还需要一个博客框架以及一款可自由配置的主题，接着 Hexo 闪亮登场[手动撒花]，Hexo 简述在上面，详细介绍请看 Hexo 中文官网，Hexo 很好的支持了 Markdown 语法的解析，炫酷的博客主题也很多，大家可以去 Hexo Themes 慢慢挑选，我目前用的是 NexT 这个主题。

OK ，接下来正式开始着手搭建吧。

搭建步骤

环境准备

安装 Node.js（我们要用它来安装博客框架、渲染主题等）。
安装 Git（我们要用它来下载主题、提交、部署文章等）。

安装 Hexo

以上两个必备程序安装完成后，只需要用 git-bash 执行如下命令即可安装 Hexo。

$ npm install -g hexo-cli

建站

安装 Hexo 完成后，请执行下列命令，Hexo 将会在指定文件夹 <folder> 中新建所需要的文件。

$ hexo init <folder>
$ cd <folder>
$ npm install

新建完成后，指定文件夹 <folder> 的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

文件/文件夹	作用
_config.yml	网站的配置文件
package.json	应用程序的信息
scaffolds	模版文件夹。当您新建文章时，Hexo 会根据 scaffold 来建立文件
source	资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去
themes	主题文件夹。Hexo 会根据主题来生成静态页面

创建主题

使用如下命令下载主题：

$ cd themes/
$ git init 
$ git clone https://github.com/iissnan/hexo-theme-next.git

你也可以下载多个主题，然后修改 _config.yml（注意是网站的配置文件而非主题的配置文件）内的 theme 设定，即可切换主题。一个主题通常有以下结构：

.
├── _config.yml
├── languages
├── layout
├── scripts
└── source

文件/文件夹	作用
_config.yml	主题的配置文件
languages	语言文件夹，请参见国际化 (i18n)
layout	布局文件夹。用于存放主题的模板文件，决定了网站内容的呈现方式，您可参考模板以获得更多信息
scripts	脚本文件夹。在启动时，Hexo 会载入此文件夹内的 JavaScript 文件，参见插件获取更多信息
source	资源文件夹，除了模板以外的 Asset，例如 CSS、JavaScript 文件等，都应该放在这个文件夹中。文件或文件夹开头名称为 _（下划线线）或隐藏的文件会被忽略

主题配置

每个主题的配置文件 _config.yml 内容可能都不太一样，但是大致都包括了菜单栏、侧边栏、站点图标、头像等常用项，如下是 NexT 主题的部分配置细节展示，其它主题可以去主题官网详细了解。

站点图标设置：

favicon:
  small: /images/skyrin-16.png
  medium: /images/skyrin-32.png
  apple_touch_icon: /images/skyrin-180.png
  safari_pinned_tab: /images/logo.svg
  #android_manifest: /images/manifest.json
  #ms_browserconfig: /images/browserconfig.xml

页脚设置：

footer:
  # Specify the date when the site was setup.
  # If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon: heart

  # If not defined, will be used `author` from Hexo main config.
  copyright:
  # -------------------------------------------------------------
  # Hexo link (Powered by Hexo).
  powered: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: true
  custom_text : Hosted by <a target="_blank" href="https://pages.coding.me" style="font-weight:bold">Coding Pages</a>

菜单设置：

menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

# Enable/Disable menu icons.
menu_icons:
  enable: true

方案设置：

#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

社交：

social:
  GitHub: https://github.com/ || github   #‘||’右侧为小图标名称，图标来源 https://fontawesome.com/，可自定义
  E-Mail: mailto:cnskyrin@163.com || envelope
  简书: https://www.jianshu.com/u/32f1afa17c58 || 
  音乐: http://www.xiami.com/collect/360454952 || music
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

social_icons:
  enable: true
  icons_only: false
  transition: false

侧栏头像：

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
avatar: /images/avatar.gif

测试及部署站点

如果在/themes目录下包含多个主题样式的话，请先在网站配置文件_config.yml中指定你需要使用样式

theme: next # 参数必须与 /themes 目录下主题目录名相同

在站点根目录打开命令行，执行hexo s，如下图所示状态

image.png

在浏览器中访问http://localhost:4000/即可预览网站全貌，在命令行 Ctrl+C 即可停止预览。

如果样式符合预期的话即可部署到 GitHub 或者其它提供 Page 托管的服务站点了，下面将以部署到 GitHub 为例进行操作：

1、安装 deploy git 插件

npm install hexo-deployer-git --save

2、在 GitHub 创建一个名为<username>.github.io.git的仓库 3、在主题配置文件_config.yml中修改仓库地址

deploy:
  type: git
  repo: 
    github: git@github.com:<username>/<username>.github.io.git

4、执行hexo d即可发布到 GitHub 仓库 5、新增或修改主题后请执行hexo clean && hexo d清理缓存文件并部署

注：这里使用 ssh 协议而非 http，所以请先确保您已经在 GitHub 添加了公钥。

自定义域名

1、首先你需要去域名注册商（阿里云腾讯云等）买一个域名 2、在根站点下source目录中添加CNAME文件，文件内容为您购买的域名xxx.com，不要添加www、mail等子域例如www.xxx.com或mail.xxx.com 3、前往域名控制台解析此域名到github.io，根据 gitpage 的自定义域名要求，他们建议解析到github.io的数字 ip 地址，即151.101.129.147

image.png

在控制台设置域名解析，添加 A 记录指向 151.101.129.147 即可

image.png

注意上图的解析线路选项，我是同时将站点托管在 GitHub 和 Coding.net 的，所以会有两条解析记录，本来打算用 Coding 作为国内线路 GitHub 作为国外线路，但最后经过测试境内 GitHub 的 ping 值虽然高于 Coding ，但访问速度还是比 Coding 快，所以我将 Coding 的解析停掉了；这也许是我的网络情况导致，大家可以随便试试自由分配解析线路择优选择不必参照我的来。

4、命令行执行hexo d发布站点到 GitHub 库，这时在 Git 库应该就能看到 CNAME 文件，至此自定义域名设置完毕，现在使用xxx.com即可访问站点

image.png

插件

评论插件

来必力(LiveRe)，国内众多评论系统由于各种原因纷纷停服，这个评论系统是韩国的，在国内也有中文官网 http://www.laibili.com.cn/ ，详细介绍请看 livere introduce，这个系统的集成也很简单速度还算可以、支持后台评论管理，在如今国内没有选择的情况下也算是个不错的选择。

如果你是 NexT5.0+ 主题的话，直接在主题的配置文件中找到 livere_uid 项填入自己申请的来必力 uid 即可自动激活此插件，uid 申请只需注册账号，然后在 apply 页面选择版本进行设置，完成后在如下页面就能看到 uid，一般网站可以直接将这段代码块插入页面即可生效。

image.png

分享插件

我的博客用的是百度分享，无需注册，如果你需要更多自定义设置就去要登陆官网去仔细设置了，主要样式有如下两种：

button 样式如下，就是我当前使用的：

<div class="bdsharebuttonbox">
  <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
  <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
  <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
  <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
  <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
  <a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
  <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
  <a href="#" class="bds_more" data-cmd="more"></a>
  <a class="bds_count" data-cmd="count"></a>
</div>
<script>
  window._bd_share_config = {
    "common": {
      "bdText": "",
      "bdMini": "2",
      "bdMiniList": false,
      "bdPic": ""
    },
    "share": {
      "bdSize": "16",
      "bdStyle": "0"
    }
  }
</script>

slide 样式：

<div class="bdsharebuttonbox">
  <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣网"></a>
  <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
  <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
  <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
  <a href="#" class="bds_tieba" data-cmd="tieba" title="分享到百度贴吧"></a>
  <a href="#" class="bds_twi" data-cmd="twi" title="分享到Twitter"></a>
  <a href="#" class="bds_fbook" data-cmd="fbook" title="分享到Facebook"></a>
  <a href="#" class="bds_more" data-cmd="more"></a>
  <a class="bds_count" data-cmd="count"></a>
</div>
<script>
  window._bd_share_config = {
    "common": {
      "bdText": "",
      "bdMini": "1",
      "bdMiniList": false,
      "bdPic": ""
    },
    "slide": {
      "bdImg": "5",
      "bdPos": "left",
      "bdTop": "100"
    }
  }
</script>

文章字数、阅读时长统计

NexT5.0+ 主题内置了统计全站字数、单篇文章字数、阅读时长的插件，该插件开源地址点这里，要启用此功能只需在主题配置文件 _config.yml 中如下部分开启即可。

# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true
  wordcount: true
  min2read: true
  totalcount: false
  separated_meta: true

注意，如果出现统计字数或时间没有出现的话，检查网站的 package.json 文件查看是否安装了 hexo-wordcount 插件。