Github Pages部署我的博客（Hexo篇）

前言

想在Github上搭建一個我的博客，在網上找了很多的文章，但有的是使用的舊版本，有的語焉不詳，最後仍是磕磕絆絆地搭起來了，所以寫了這篇文章，對本身踩過的坑進行一個總結。水平有限，還請見諒。

博客地址：傳送門

系統環境

• Windows 10 教育版
• Node.js v8.7.0
• Npm v5.4.2
• Git v2.13.0

在GitHub上建立Github Pages項目

1. 建立新倉庫

Github Pages分爲兩類，用戶或組織主頁，項目主頁。

• 建立用戶或組織主頁，只需建立一個名稱爲{yourusername}.github.io的新倉庫便可。這邊的yourusername填寫本身的用戶名。Github會識別並自動將該倉庫設爲Github Pages。用戶主頁是惟一的，填其餘名稱只會被當成普通項目。
• 建立項目主頁。先新建一個倉庫，名稱隨意，或是使用原有的倉庫均可以。在項目主頁 -> Settings -> Options -> Github Pages中，將Source選項置爲master branch，而後Save，這個項目就變成一個Github Pages項目了。

2. 分支管理

Github Pages會自動部署靜態網頁文件，而上一步是將master分支做爲部署的默認分支。

Github Pages部署分支設置中，能夠有三種設置：

• master 分支
• master 分支下的/doc文件夾
• gh-pages 分支

其中gh-pages分支的選項須要建立這個分支纔會顯示出來。

我我的是這樣設置分支的： 新建一個blog-src分支用來管理Hexo的源代碼， gh-pages分支用來管理Hexo生成的靜態網頁文件，即部署到Github Pages上的文件， master分支保留（我的習慣）。 你也能夠另開一個項目用來管理Hexo源代碼的版本。

安裝Hexo

統一說明一下如下的代碼示例，<>中的是必填參數，[]中的是選填參數。

1. 安裝Hexo

npm install -g hexo-cli
複製代碼

2. 生成Hexo項目

在你想建立博客的文件夾中初始化Hexo。

hexo init [projectname]
複製代碼

若是帶了項目名稱，會生成一個帶有該名稱的文件夾；若是沒帶參數，則必須在空文件夾下運行，否則會報錯。

3. 拉取Github項目到本地

git clone https://github.com/yourusername/yourprojectname.git
複製代碼

而後把以前生成的Hexo項目文件夾下的內容所有複製過來。關於Git的使用請自行掌握，由於貼Git的代碼很容易引發各類各樣的錯誤。最後把項目push到blog-src分支上（換成你本身的源碼分支）。

使用Hexo

1. 經常使用命令

• hexo generate [-d]
• hexo serve [-p port]
• hexo deploy [-g]

Hexo命令大多能夠縮寫，如hexo serve --port 5000能夠縮寫成hexo s -p 5000。

更多命令和參數可參閱官方文檔。

2. 編譯

[可選] 清除緩存：

hexo clean
複製代碼

編譯：

hexo g
複製代碼

3. 運行

啓用服務：

hexo s
複製代碼

默認啓動地址爲http://localhost:4000/

若是4000端口被佔用：

hexo s -p [port]
複製代碼

4. 部署

在博客所在文件夾下：

npm install hexo-deployer-git --save
複製代碼

這是用npm安裝hexo部署到git的插件，--save會把這個包寫入到package.json，切換到其餘電腦時能夠不須要從新安裝。

修改_config.yml：

deploy:
  type: git
  repo: git@github.com:yourusername/yourprojectname.git
  branch: gh-pages
複製代碼

將repo和branch換成本身的。

注意：

1.repo能夠在Github上覆制，但記得選Clone with SSH，只能走Git協議，走HTTPS協議會報錯

2.branch選擇Github Pages中設置的那個分支，而不是拉取這個項目的分支

博文寫做

項目結構

.
├── .deploy
├── public
├── scaffolds
|   ├── draft.md
|   ├── page.md
|   └── post.md
├── scripts
├── source
|   ├── _drafts
|   └── _posts
├── themes
├── _config.yml
└── package.json
複製代碼

scaffolds：腳手架，即對應的layout生成新博文時的頭信息模板

source：源文件，博文會根據layout分層放置

關於添加模板和草稿參看寫做 | Hexo。

新建博文

hexo n [layout] <filename>
複製代碼

頭信息

post的模板md：

---
title: {{ title }}
date: {{ date }}
tags:
---
複製代碼

實際生成的md：

---
title: RocketMQ安裝及部署
date: 2018-04-09 10:04:41
tags:
---
複製代碼

時間格式在_config.yml中設置，Hexo會根據時間來解析博文。

更換主題

Hexo自帶的默認主題是landscape，不過咱們能夠從Theme | Hexo或Github上找到喜歡的主題。

更換主題的三種方法

• 從Github主頁下載release包，解壓到themes/文件夾下

$ git clone --branch v6.0.0 https://github.com/theme-next/hexo-theme-next themes/next
複製代碼

• (僅限linux)

$ mkdir themes/next
$ curl -s https://api.github.com/repos/theme-next/hexo-theme-next/releases/latest | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1
複製代碼

設置主題

在項目的_config.yml中，將theme：改爲themes/下對應文件夾的名稱。若是是解壓出來的「hexo-theme-next-6.1.0」就寫「hexo-theme-next-6.1.0」，若是是自建的「next」就寫「next」。

更換Next主題

Next是Hexo最受歡迎的主題之一，不過我在使用的時候發現Github主頁上v6.0.0的文檔並不詳盡，官網也還沒上線，舊有的文檔能夠借鑑，但有些小地方仍是會有差異。下面用v5和v6來區分新版本。

v5的文檔地址

舊的主頁（更新到v5.1.2）:
github.com/iissnan/hex…

新的主頁（v6.0.0以後從這兒開始更新）:
github.com/theme-next/…

配置Next主題

Next版本 ： v6.1.0

修改主題的_config.yml（注意區分項目和主題）。整個文件有一千行，各類配置項很是豐富，並且配上了大量的註釋，我也只是挑了一小部分，你們能夠按需修改。

切換風格

官方提供了四種風格，各有千秋。

# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
複製代碼

語言選擇

在項目的_config.yml中修改language選項：

# 寫法1
language: zh-CN
# 寫法2，會使用最上面一種語言
language:
- zh-CN
- _en
複製代碼

與v5不一樣的是語言的寫法，簡體中文是zh-CN，英文是_en。語言文件位於主題的language/文件夾下，對應的yml文件的名稱就是語言的名稱，能夠修改對應的語言文件來修改一些指定字段的表述，也能夠自定義對應語言的字段。能夠參考國際化 | Hexo。

社交頁面

按須要解除註釋並修改。下方的icons_only是'只顯示圖標'，我以爲比較簡潔就改成true了。

# Social Links.
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the name of FontAwesome icon. If icon (with or without delimeter) is not specified, globe icon will be loaded.
social:
 GitHub: https://github.com/yourname || github
 E-Mail: yourname@youremail.com || envelope
  #Google: https://plus.google.com/yourname || google
  #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: true
 transition: false
  # Dependencies: exturl: true in Tags Settings section below.
  # To encrypt links above use https://www.base64encode.org
  # Example encoded link: `GitHub: aHR0cHM6Ly9naXRodWIuY29tL3RoZW1lLW5leHQ= || github`
 exturl: false

# Follow me on GitHub banner in right-top corner.
# Usage: `permalink || title`
# Value before `||` delimeter is the target permalink.
# Value after `||` delimeter is the title and aria-label name.
#github_banner: https://github.com/yourname || Follow me on GitHub
複製代碼

常見問題

1. Github發送郵件 - 編譯未經過

The page build failed for the master branch with the following error:

The tag fancybox on line 77 in themes/landscape/README.md is not a recognized Liquid tag.

• 見修改_config.yml
• 選擇Github Pages分支
• 不要使用Git直接推送，應該在_config.yml中設置deploy的配置，而後使用hexo d -g命令進行推送

2. hexo d -g失敗

error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': No error
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
複製代碼

• 見修改_config.yml
• 將HTTPS協議改爲Git協議，注意github.com後面，HTTPS是/，Git是: