Github Pages部署個人部落格（Hexo篇）

sisibeloved發表於2018-04-12
GithubHexo

前言

想在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是:

相關文章