概述

GitPage 是個(gè)什么東西豌注？它和 GitHub 是什么關(guān)系志衣？Hexo 又是什么窿吩？它和 GitPage 又是什么關(guān)系或链？為什么我要用 Hexo + GitPage 搭建博客？這些問題在我不了解 GitPage 之前都是一堆問號(hào)罕邀，想必大多數(shù)小白都和我一樣很懵畅形，現(xiàn)在網(wǎng)上關(guān)于搭建博客的教程一大堆，但是當(dāng)初我在搭建的時(shí)候照著步驟一步一步搞感覺很不爽诉探，直到最后博客搭完了才明白以上幾個(gè)問題，所以這里我想先給大家回答一下上面幾個(gè)問題棍厌，然后再逐步教大家使用 Hexo + GitPage 搭建屬于你自己的博客肾胯。

Hexo 簡(jiǎn)述

Hexo 是一個(gè)快速、簡(jiǎn)潔且高效的博客框架耘纱。Hexo 使用 Markdown（或其他渲染引擎）解析文章敬肚，使用 Node.js 渲染頁面，通常在很短的時(shí)間內(nèi)即可利用靚麗的主題生成靜態(tài)網(wǎng)頁束析。同時(shí) Hexo 也擁有強(qiáng)大的插件系統(tǒng)艳馒，支持 Jade, CoffeeScript 等諸多強(qiáng)大插件。

GitPage 簡(jiǎn)述

GitPage 與 GitHub 同屬一個(gè)組織 GitHub Inc.，可以說 GitPage 出生的目的就是為了服務(wù)于 GitHub弄慰，我們知道 GitHub 上有眾多非常優(yōu)秀的開源項(xiàng)目第美，有些項(xiàng)目比較大，涉及到框架級(jí)別的項(xiàng)目它的說明文檔就不是寫幾個(gè) Readme 就能講清楚的事了陆爽，所以這種情況下這些項(xiàng)目的維護(hù)者就急需一個(gè)站點(diǎn)來詳盡展示此項(xiàng)目的功能什往、用法、及更新動(dòng)態(tài)等等慌闭，比如大名鼎鼎的 ReactiveX 的 GitPage 地址為 http://reactivex.github.io 你在瀏覽器訪問這個(gè) URL 會(huì)自動(dòng)跳轉(zhuǎn)到 reactivex.io别威，這是其自定義域名（這是 GitPage 又一個(gè)很贊的功能，后面詳細(xì)介紹）驴剔，那么問題來了省古，程序猿們雖然看起來比較萬能，但實(shí)際上并不是萬能的丧失，所以可能一些研究底層架構(gòu)衫樊，程序開發(fā)很 NB 的程序員卻真的是 HTML、CSS利花、Linux 小白科侈，畢竟術(shù)業(yè)有專攻啊，所以這時(shí)候讓他們自己去搭個(gè)站點(diǎn)就真的頭疼了炒事，畢竟是有時(shí)間成本的臀栈。

于是 GitPage 誕生了，GitPage 允許你將你的博客創(chuàng)建為一個(gè) GitHub Project挠乳，通過 your-account.github.io 這樣的特殊項(xiàng)目名稱與 GitPage 進(jìn)行關(guān)聯(lián)权薯，然后，你只需要像平時(shí)一樣 commit 你的博文到 GitHub 上就 OK 了睡扬，GitPage 會(huì)自動(dòng)將你的更新部署出去盟蚣，完全不需要考慮服務(wù)器、數(shù)據(jù)庫卖怜、運(yùn)維屎开、甚至 HTML 等這些發(fā)布站點(diǎn)的必備技能，所以 GitPage 誕生的目的就是要把你的專注點(diǎn)拉回到寫文章上而不需要花時(shí)間去考慮其它事情马靠。

這時(shí)你可能會(huì)注意到奄抽，我要如何去個(gè)性化我的站點(diǎn)？我真的僅僅需要 commit 一個(gè)文件上去就 OK 嗎甩鳄？當(dāng)然不是的逞度，想要個(gè)性化自己的站點(diǎn)還需要一個(gè)博客框架以及一款可自由配置的主題，接著 Hexo 閃亮登場(chǎng)[手動(dòng)撒花]妙啃，Hexo 簡(jiǎn)述在上面档泽，詳細(xì)介紹請(qǐng)看 Hexo 中文官網(wǎng)，Hexo 很好的支持了 Markdown 語法的解析，炫酷的博客主題也很多馆匿，大家可以去 Hexo Themes 慢慢挑選抑胎，我目前用的是 NexT 這個(gè)主題。

OK 甜熔，接下來正式開始著手搭建吧圆恤。

搭建步驟

環(huán)境準(zhǔn)備

• 安裝 Node.js（我們要用它來安裝博客框架、渲染主題等）腔稀。
• 安裝 Git（我們要用它來下載主題盆昙、提交、部署文章等）焊虏。

安裝 Hexo

以上兩個(gè)必備程序安裝完成后淡喜，只需要用 git-bash 執(zhí)行如下命令即可安裝 Hexo。

$ npm install -g hexo-cli

建站

安裝 Hexo 完成后诵闭，請(qǐng)執(zhí)行下列命令炼团，Hexo 將會(huì)在指定文件夾 <folder> 中新建所需要的文件。

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

新建完成后疏尿，指定文件夾 <folder> 的目錄如下：

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

創(chuàng)建主題

使用如下命令下載主題：

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

你也可以下載多個(gè)主題，然后修改 _config.yml（注意是網(wǎng)站的配置文件而非主題的配置文件） 內(nèi)的 theme 設(shè)定磕洪，即可切換主題吭练。一個(gè)主題通常有以下結(jié)構(gòu)：

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

主題配置

每個(gè)主題的配置文件 _config.yml 內(nèi)容可能都不太一樣，但是大致都包括了菜單欄尖昏、側(cè)邊欄仰税、站點(diǎn)圖標(biāo)、頭像等常用項(xiàng)抽诉，如下是 NexT 主題的部分配置細(xì)節(jié)展示陨簇，其它主題可以去主題官網(wǎng)詳細(xì)了解。

站點(diǎn)圖標(biāo)設(shè)置：

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

頁腳設(shè)置：

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"  style="font-weight:bold">Coding Pages</a>

菜單設(shè)置：

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

方案設(shè)置：

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

社交：

social:
  GitHub: https://github.com/ || github   #‘||’右側(cè)為小圖標(biāo)名稱迹淌，圖標(biāo)來源 https://fontawesome.com/河绽，可自定義
  E-Mail: mailto:cnskyrin@163.com || envelope
  簡(jiǎn)書: http://www.reibang.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

側(cè)欄頭像：

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

測(cè)試及部署站點(diǎn)

如果在/themes目錄下包含多個(gè)主題樣式的話，請(qǐng)先在網(wǎng)站配置文件_config.yml中指定你需要使用樣式

theme: next # 參數(shù)必須與 /themes 目錄下主題目錄名相同

在站點(diǎn)根目錄打開命令行唉窃，執(zhí)行hexo s耙饰，如下圖所示狀態(tài)

image.png

在瀏覽器中訪問http://localhost:4000/即可預(yù)覽網(wǎng)站全貌，在命令行 Ctrl+C 即可停止預(yù)覽纹份。

如果樣式符合預(yù)期的話即可部署到 GitHub 或者其它提供 Page 托管的服務(wù)站點(diǎn)了苟跪，下面將以部署到 GitHub 為例進(jìn)行操作：

1、安裝 deploy git 插件

npm install hexo-deployer-git --save

2蔓涧、在 GitHub 創(chuàng)建一個(gè)名為<username>.github.io.git的倉庫
3件已、在主題配置文件_config.yml中修改倉庫地址

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

4、執(zhí)行hexo d即可發(fā)布到 GitHub 倉庫
5元暴、新增或修改主題后請(qǐng)執(zhí)行hexo clean && hexo d清理緩存文件并部署

注：這里使用 ssh 協(xié)議而非 http篷扩，所以請(qǐng)先確保您已經(jīng)在 GitHub 添加了公鑰。

自定義域名

1昨寞、首先你需要去域名注冊(cè)商（阿里云騰訊云等）買一個(gè)域名
2瞻惋、在根站點(diǎn)下source目錄中添加CNAME文件，文件內(nèi)容為您購買的域名xxx.com援岩，不要添加www歼狼、mail等子域例如www.xxx.com或mail.xxx.com
3、前往域名控制臺(tái)解析此域名到github.io享怀，根據(jù) gitpage 的自定義域名要求羽峰，他們建議解析到github.io的數(shù)字 ip 地址，即151.101.129.147

image.png

在控制臺(tái)設(shè)置域名解析添瓷，添加 A 記錄指向 151.101.129.147 即可

image.png

注意上圖的解析線路選項(xiàng)梅屉，我是同時(shí)將站點(diǎn)托管在 GitHub 和 Coding.net 的，所以會(huì)有兩條解析記錄鳞贷，本來打算用 Coding 作為國內(nèi)線路 GitHub 作為國外線路坯汤，但最后經(jīng)過測(cè)試境內(nèi) GitHub 的 ping 值雖然高于 Coding ，但訪問速度還是比 Coding 快搀愧，所以我將 Coding 的解析停掉了惰聂；這也許是我的網(wǎng)絡(luò)情況導(dǎo)致疆偿，大家可以隨便試試自由分配解析線路擇優(yōu)選擇不必參照我的來。

4搓幌、命令行執(zhí)行hexo d發(fā)布站點(diǎn)到 GitHub 庫杆故，這時(shí)在 Git 庫應(yīng)該就能看到 CNAME 文件，至此自定義域名設(shè)置完畢溉愁，現(xiàn)在使用xxx.com即可訪問站點(diǎn)

image.png

插件

評(píng)論插件

來必力(LiveRe)处铛，國內(nèi)眾多評(píng)論系統(tǒng)由于各種原因紛紛停服，這個(gè)評(píng)論系統(tǒng)是韓國的拐揭，在國內(nèi)也有中文官網(wǎng) http://www.laibili.com.cn/ 撤蟆，詳細(xì)介紹請(qǐng)看 livere introduce，這個(gè)系統(tǒng)的集成也很簡(jiǎn)單速度還算可以投队、支持后臺(tái)評(píng)論管理枫疆，在如今國內(nèi)沒有選擇的情況下也算是個(gè)不錯(cuò)的選擇。

如果你是 NexT5.0+ 主題的話敷鸦，直接在主題的配置文件中找到 livere_uid 項(xiàng)填入自己申請(qǐng)的來必力 uid 即可自動(dòng)激活此插件息楔，uid 申請(qǐng)只需注冊(cè)賬號(hào)，然后在 apply 頁面選擇版本進(jìn)行設(shè)置扒披，完成后在如下頁面就能看到 uid值依，一般網(wǎng)站可以直接將這段代碼塊插入頁面即可生效。

image.png

分享插件

我的博客用的是百度分享碟案，無需注冊(cè)愿险，如果你需要更多自定義設(shè)置就去要登陸官網(wǎng)去仔細(xì)設(shè)置了，主要樣式有如下兩種：

button 樣式如下价说，就是我當(dāng)前使用的：

<div class="bdsharebuttonbox">
  <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
  <a href="#" class="bds_douban" data-cmd="douban" title="分享到豆瓣網(wǎng)"></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="分享到豆瓣網(wǎng)"></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>

文章字?jǐn)?shù)辆亏、閱讀時(shí)長(zhǎng)統(tǒng)計(jì)

NexT5.0+ 主題內(nèi)置了統(tǒng)計(jì)全站字?jǐn)?shù)、單篇文章字?jǐn)?shù)鳖目、閱讀時(shí)長(zhǎng)的插件扮叨，該插件開源地址點(diǎn)這里，要啟用此功能只需在主題配置文件 _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

注意彻磁，如果出現(xiàn)統(tǒng)計(jì)字?jǐn)?shù)或時(shí)間沒有出現(xiàn)的話，檢查網(wǎng)站的 package.json 文件查看是否安裝了 hexo-wordcount 插件狸捅。

image.png

沒有安裝的話用 npm 如下安裝就行了衷蜓。

npm install hexo-wordcount --save

Ok，以上就是本文全部?jī)?nèi)容尘喝，有任何問題歡迎下方留言磁浇。