這是遷移博客后的第二篇响禽，其實我很懶孽亲，并不喜歡寫博客這種吃力不討好的活兒撒汉，看的人也未必多溺职，但是每次寫完一篇博客之后的短暫的成就感以及寫的這個過程中這種強制性的學(xué)習(xí)過程是很令人受用的。

關(guān)于Hexo

我先后用過博客園赛不、簡書惩嘉、GithubPage+Hexo三個博客，從一個遷移到另一個根本原因就是好不好看踢故，Hexo提供了眾多豐富的主題文黎，這點是最打動我的。至于什么是Hexo殿较？套用官網(wǎng)的話來說：

Hexo 是一個快速耸峭、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章淋纲，在幾秒內(nèi)劳闹，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁。

Hexo沒有編輯器帚戳，也沒有可視化的操作頁面玷或，在配置好必要的環(huán)境之后，書寫文章要依賴其他的Markdown編輯器片任，而且關(guān)鍵是相對于簡書這種平臺類博客偏友，缺少了推廣的重要渠道，寫博客自然是想讓更多的人們看到对供，而自建博客（如我的博客）需要你去研究SEO…如果這么多缺點還沒打消你看下去的想法位他，那么恭喜你將會有一個有（neng）個（zhuang）性（bi）的博客。

環(huán)境配置及安裝

1. Node.js

   移步Node.js官網(wǎng)進(jìn)行安裝产场。

2. Git

   Xcode自帶Git環(huán)境鹅髓，或者移步Git官網(wǎng)進(jìn)行安裝，再或者使用Homebrew安裝：

   $ brew install git
   

當(dāng)安裝完Node.js和Git之后京景，就可以進(jìn)行Hexo安裝了：

$ sudo npm install -g hexo-cli

安裝成功之后可以cd到你想要存放博客的目錄窿冯，默認(rèn)為~/目錄，執(zhí)行建站命令：

$ hexo init BlogName
$ npm install
// 成功之后的目錄結(jié)構(gòu)如下
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

命令執(zhí)行結(jié)束后确徙，就可以正式使用Hexo了醒串，使用debug模式進(jìn)行查看：

$ hexo s --debug

訪問http://localhost:4000就可以看到Hexo的默認(rèn)界面了。

托管博客

在本地Hexo搭建好之后就要選擇服務(wù)器進(jìn)行托管鄙皇，這里只講一下通過Github進(jìn)行托管的方法芜赌。關(guān)于自有VPS的托管可以參考這篇文章。

創(chuàng)建倉庫

進(jìn)入Github新建倉庫伴逸，名稱格式為UserName.github.io缠沈，例如xuhaoranLeo.github.io。然后將本地Hexo的站點配置文件的配置倉庫修改為當(dāng)前倉庫的git地址：

$ cd ~/blog/
$ open _config.yml
// 修改repository
deploy:
  type: git
  repository: https://github.com/xuhaoranLeo/xuhaoranleo.github.com.git
branch: master

此處注意:后面要接Space，這種格式才能被Hexo識別洲愤。

配置ssh key

倉庫配置好之后颓芭，要為你的Github添加ssh public key。

SSH 密鑰對可以讓您方便的登錄到 SSH 服務(wù)器禽篱，而無需輸入密碼畜伐。由于您無需發(fā)送您的密碼到網(wǎng)絡(luò)中，SSH 密鑰對被認(rèn)為是更加安全的方式躺率。

SSH 密鑰對總是成雙出現(xiàn)的玛界，一把公鑰，一把私鑰悼吱。公鑰可以自由的放在您所需要連接的 SSH 服務(wù)器上慎框，而私鑰必須穩(wěn)妥的保管好。

所謂"公鑰登錄"后添，原理很簡單笨枯，就是用戶將自己的公鑰儲存在遠(yuǎn)程主機上。登錄的時候遇西，遠(yuǎn)程主機會向用戶發(fā)送一段隨機字符串馅精，用戶用自己的私鑰加密后，再發(fā)回來粱檀。遠(yuǎn)程主機用事先儲存的公鑰進(jìn)行解密洲敢，如果成功，就證明用戶是可信的茄蚯，直接允許登錄 shell压彭，不再要求密碼。這樣子渗常，我們即可保證了整個登錄過程的安全壮不，也不會受到中間人攻擊。

—— archlinux page

理解完ssh key之后就可以進(jìn)行生成了：

$ ssh-keygen -t rsa -C "your_email@example.com"
Enter file in which to save the key (/Users/xuhaoran/.ssh/id_rsa): // 輸入絕對地址和名稱皱碘，直接enter使用默認(rèn)
Enter passphrase (empty for no passphrase):  // 輸入ssh key的密碼询一，直接enter是不使用密碼

// 生成成功
The key's randomart image is:
+---[RSA 2048]----+
|    ..o .    ..+ |
|     oo. .    o.o|
|     +  o .  o +B|
|      o+ +. + =.%|
|       +S.++ + B+|
|      ..+O= E   *|
|         +.o   .o|
|        .      . |
|                 |
+----[SHA256]-----+

成功生成之后使用任意方法打開.public文件，復(fù)制里面的密鑰癌椿，粘貼到Github -> Settings -> SSH and GPG keys -> New SSH key ->Key中家凯，Title可以隨意寫。

基本使用

安裝完Hexo就可以進(jìn)行日常使用了如失，在blog目錄下新建文章：

$ hexo new "This is a new article"

Hexo會自動生成.md文件在~/BlogName/source/_posts目錄下，可以使用各種Markdown編輯器進(jìn)行博客的書寫了送粱。

在每篇文章里面可以配置Front-matter褪贵，來標(biāo)記類別、時間、標(biāo)簽等：

---
title: Terminal命令小結(jié)
date: 2017-11-22 13:56:34
tags: 
    - Terminal Command Line
---

書寫完成之后生成generate靜態(tài)文件后進(jìn)行部署deploy操作脆丁，會讓你的文章發(fā)到Github托管的服務(wù)器上：

$ hexo g -d

日常書寫之外世舰，如果你還想定制多樣化的博客樣式，可以使用各種Theme槽卫，Hexo默認(rèn)的樣式為landscape跟压，我的博客的樣式為NexT。其他各種樣式可以去Hexo官網(wǎng)主題搜索歼培。

例如找到NexT主題后進(jìn)入其Github震蒋，使用git進(jìn)行安裝：

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

之后修改站點配置文件中的theme屬性：

theme: next

最后清空緩存并重新生成部署：

$ hexo clean
$ hexo g -d

配置文件

在了解Hexo基本的部署和使用方法之后，就要進(jìn)行一些站點和主題的配置了躲庄，這會讓你的博客更具個人色彩查剖。

站點配置文件

blog根目錄下的_config.yml文件就是站點配置文件，可以使用編輯器打開：

title: Leo
subtitle: 俠心交友噪窘，素心做人笋庄。
description: 站在更高的地方，看見更廣的世界倔监。
author: 許昊然
language: zh-Hans

關(guān)于title直砂、description等屬性的具體表現(xiàn)形式是根據(jù)你使用的Theme而言的，language屬性匹配的是./themes/CurrentTheme/languages下面的文件名浩习，NexT下對應(yīng)的簡體中文就是zh-Hans静暂，里面的內(nèi)容之后再講。

如果你的博客是在一個子目錄下瘦锹，可以設(shè)置root屬性：

url: http://xuhaoranleo.top
root: /myBlog

其他的一些屬性都有相關(guān)注釋解釋籍嘹。

主題配置文件

在./themes/CurrentTheme目錄下的_config.yml文件即是主題配置文件，每個主題都有自己對應(yīng)的屬性來配置弯院，這里只拿NexT這個主題簡單來說：

override: false // 可以用來覆蓋掉站點配置文件
menu:
  home: / || home
  jottings: /tags/隨筆 || calendar
  tags: /tags/ || tags
  archives: /archives/ || archive
menu_icons:
  enable: true

menu是主要需要配置的辱士，這個就是你的博客展現(xiàn)出來的分類，/表示根目錄听绳，||后面接的是icon name颂碘，如我的博客有一個隨筆分類，我是利用標(biāo)簽tags來配置的椅挣，/tags/隨筆表示了點擊的鏈接隨筆標(biāo)簽头岔。在隨筆文章中的Front-matter里面配置：

tags: 
- 隨筆

而具體是使用tags還是其他分類archives、categories鼠证，再或者是其他自定義的類別峡竣，主要還是根據(jù)每個類別的layout決定的，這個布局文件在./themes/CurrentTheme/layout量九，例如tag.swig适掰。

social:
  GitHub: https://github.com/xuhaoranLeo || github
  # E-Mail: mailto:liang_andy@163.com || envelope
  微博: https://weibo.com/5711479827 || weibo
links:
  我的簡書: http://www.reibang.com/u/8f0c4d84e87c

social用來配置關(guān)于你的一些其他鏈接的颂碧，同樣||后面是icon name ；links則是一些友情鏈接类浪，除了關(guān)聯(lián)一些你喜歡的網(wǎng)址载城，據(jù)說可以在SEO中發(fā)揮一些作用，這點我并未深入了解费就。

reward_comment: 請我喝一杯咖啡诉瓦？
wechatpay: /assets/blogImg/wechatpay.jpg
# alipay: /assets/blogImg/alipay.jpg
#bitcoin: /images/bitcoin.png

reward屬性是用來接受贊助的，這沒什么好講的力细，主要是利用這塊說一下Hexo里面圖片的擺放睬澡，正常來說Hexo的博客資源都是基于source這個目錄作為根目錄的，你可以把圖片全部擺在一個目錄中艳汽，例如assets猴贰，也可以在其下具體建立新的目錄進(jìn)行分類，如用的時候直接用Markdown導(dǎo)入就好：

![this is a image](/assets/blogImg/avatar.jpg)

其他的關(guān)于百度分析等第三方服務(wù)的接入可以自行參考NexT文檔來學(xué)習(xí)河狐。

語言配置文件

語言配置文件主要是用來顯示博客整體的文字效果的米绕，目錄為./themes/CurrentTheme/languages，例如在主題配置文件中我添加了jottings這個新的menu馋艺，那么我就要在語言配置文件栅干，對應(yīng)其展現(xiàn)的文字：

menu:
  home: 首頁
  archives: 歸檔
  tags: 標(biāo)簽
  about: 關(guān)于
  jottings: 隨筆

一些諸如reward你是想叫做打賞還是乞討都可以在此處設(shè)置。

其他配置

Hexo置頂問題

參考這篇文章捐祠，安裝插件：

$ sudo npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

之后再需要置頂文章的Front-matter中加上top: true屬性即可碱鳞，同時添加多個置頂按照時間順序排序。

NexT自定義首頁展示文章內(nèi)容

之前遇到的一個需求踱蛀，例如我的博客中存在隨筆分類窿给，而我希望我的首頁只展現(xiàn)我的技術(shù)類文章。這篇文章解決了這個問題率拒，具體來說就是修改layout文件：

$ cd YourBlogDir/themes/YourCurrentTheme/layout
$ open index.swig

{% extends '_layout.swig' %}
{% import '_macro/post.swig' as post_template %}
{% import '_macro/sidebar.swig' as sidebar_template %}

{% block title %}{{ config.title }}{% if theme.index_with_subtitle and config.subtitle %} - {{config.subtitle }}{% endif %}{% endblock %}

{% block page_class %}
  {% if is_home() %}page-home{% endif -%}
{% endblock %}

{% block content %}
  <section id="posts" class="posts-expand">
    {% for post in page.posts %}
      {% if post.visible !== 'hide' %}
        {{ post_template.render(post, true) }}
      {% endif %}
    {% endfor %}
  </section>

  {% include '_partials/pagination.swig' %}
{% endblock %}

{% block sidebar %}
  {{ sidebar_template.render(false) }}
{% endblock %}

直接復(fù)制即可崩泡，主要就是添加了一個判斷：如果文章中的Front-matter包含一個visible屬性切屬性為hide，那么首頁就不進(jìn)行展示猬膨。之后只要在隨筆類的文章中添加屬性即可：

---
title: Hello World
visible: hide
tags: 
- 隨筆
---

更換個人域名

如果想進(jìn)一步裝逼優(yōu)化角撞，那么可以為你的github.io包一個更具個性的域名，域名可以在阿里萬網(wǎng)上買勃痴，經(jīng)常有活動谒所，便宜的一年也就10多塊錢。

當(dāng)你選好了一個域名之后需要對其進(jìn)行解析沛申，添加解析記錄：

記錄類型: A // 指向一個IPV4地址
主機記錄: @ + www // @表空劣领，再配置一個www的，不管你是輸入www.xuhaoran.top還是xuhaoran.top都可以直接進(jìn)入博客
解析線路: 默認(rèn) 
記錄值: 添加你的github.io的IP铁材，可以終端ping一下就知道了剖踊，例如我的是151.101.1.147
TTL值: 默認(rèn)10分鐘

配置好域名解析之后進(jìn)入Github的倉庫庶弃，Setting —> Options —> GitHub Pages —> Custom domain中設(shè)置好你申請的新域名。

[圖片上傳失敗...(image-f217ec-1513156524164)]

最后新建一個CNAME文件：

$ cd YourBlogDir/themes/YourCurrentTheme/source
$ touch CNAME
$ vim CNAME

填寫你的新域名在其中德澈，:wq保存離開，這樣就可以讓你每次編譯之后都可以直接使用新域名了固惯。請愉快地訪問你的新博客地址吧梆造。

備份博客

備份博客思路參考這篇文章。這里按照我的理解說一下：

[圖片上傳失敗...(image-d7b349-1513156524164)]

總體來說就是使用git branch來代替靜態(tài)頁面?zhèn)}庫+源碼倉庫的組合葬毫，新建一個分支并設(shè)為主分支镇辉，用來保存源碼，master分支依然用來保存靜態(tài)頁面贴捡，這樣做的好處是你日常的hexo g -d命令不受到影響忽肛，而當(dāng)你面臨著遷移博客的時候直接拉取你的git就可以了，任何修改直接提交烂斋，非常方便且簡潔屹逛。

按照上面新建博客的步驟，我們已經(jīng)有了一個可以部署到Github的博客了汛骂，現(xiàn)在直接對這個博客進(jìn)行備份罕模，直接簡單粗暴的方法：

• 在Github新建倉庫，名字隨意
• clone新倉庫到本地帘瞭，新建分支hexo并切換到該分支
• 在Github上設(shè)置hexo分支為主分支
• 復(fù)制本地blog文件到本地倉庫淑掌，并提交代碼到hexo分支
• 刪除Github上的xuhaoran.github.io倉庫，并將新倉庫Rename為xuhaoran.github.io

這樣其他配置不需要修改蝶念，強行把倉庫遷移了[手動微笑]抛腕，以后如果切換電腦就可以直接拉取代碼了~

這是這個博客的第二篇文章，中間斷斷續(xù)續(xù)地寫了半個月媒殉，實在是汗顏担敌，這兩篇都是基礎(chǔ)類的，之后會寫一些iOS技術(shù)類博客适袜，希望能給你幫助柄错。如若有任何紕漏可以直接發(fā)郵件給我，還請見諒苦酱。