Catherine's blog

Knowledge makes humble, ignorance makes proud.

0%

Hexo + GitHub pages 初學者全記錄

Posted on Edited on In

為什麼要寫這篇介紹？

成為後端工程師後，碰到不會的問題，都是靠google大神，技術時時進步，有時候遇到問題或精進新的技術後，若沒有即時紀錄下來，經過一段時日後，肯定就是『我不認識你，你不屬於我』～

決定要做就要馬上動手規劃，目前查到最方便的資源就是Hexo + GitHub Pages，優點是完全免費且快速，也無須考慮HTML、CSS、Server、DB等架站技能。

GitHub Pages

註冊 GitHub 帳號

GitHub 官網：https://github.com/

建立 Github Pages

申請完 GitHub 帳號，點下畫面中 Start a Project

Start a Project

接著將專案名稱取名為 username.github.io 並按下最下方的 Create repository

註： username 指的是你的 GitHub 帳號，在旁邊 Owner 的地方就會顯示你的帳號。例如我的帳號是 asc111，那麼專案名稱就取名為 asc111.github.io。

Create repository

接著進入專案，到 Settings 頁面

Settings

頁面往下滑，有個 GitHub Pages 設定，點一下 Choose a theme。

Choose a theme

開新分頁後，有好幾個樣板供使用者選擇，這裡直接按下 Select theme。(這時候的樣板只是暫時，之後才會部署自己的 Hexo 部落格上來)

Select theme

最後在網址列輸入 https://username.github.io/ (username 是自己的 GitHub 帳號)，就能看到自己剛架好的 Github Pages

Github Pages by yourself

Hexo

環境配置

順帶一提，若為Mac使用者，也可用 homebrew 安裝，簡單又快速，做法可以參考這篇【程式】透過Homebrew安裝Node.js（Mac）

安裝 Hexo

確認環境配置都安裝完畢，即可執行下方指令安裝 Hexo

1
$ npm install -g hexo-cli

初始化

安裝完 Hexo 後，執行下方指令，Hexo 將在指定資料夾 < folder > 中新建部署所需檔案。

1
2
3
4
$ hexo init <folder> //初始化新的 Hexo，會在當前路徑建立一個叫 <folder> 的資料夾，資料夾名稱可以隨意取，例如「myblog」，那麼指令就是 hexo init myblog
$ cd <folder>
$ npm install //安裝 Hexo
$ npm install hexo-deployer-git --save  //安裝 git 部署套件

初始化後的資料夾

_config.yml：網站 配置 檔案，可以在此配置大部分的設定

package.json：套件版本控制

scaffolds：鷹架 資料夾。建立新文章時，會根據 scaffolds 來建立檔案

source：原始檔案資料夾是放置內容的地方

themes：主題 資料夾。Hexo 會根據主題來產生靜態檔案

設定 blog 相關配置

進入剛剛初始化的資料夾 < forlder > ，打開 _config.yml 檔進行配置

_config.yml

打開 _config.yml 後，修改第 6~12 行資訊，輸入完存檔:

1
2
3
4
5
6
7
title:   //輸入部落格標題
subtitle:  //輸入副標題
description:  //輸入網站描述 
keywords:  //輸入網站關鍵字(以逗號隔開)，方便 SEO 
author:   //輸入姓名或暱稱
language: zh-TW  //輸入您所使用的語言
timezone:  //留空以使用系統時間

接著第 16 行的地方，url 請換成自己網站的連結 https://username.github.io/ ，username是自己的 GitHub 帳號:

1
https://username.github.io/

設定部署至 GitHub 的資訊

接著同樣於_config.yml，請輸入以下設定，repo 的 username 改成自己的 GitHub 帳號，所以 repo 的連結架構長這樣： https://github.com/自己帳號/專案名稱.git ，輸入完一樣記得存檔:

1
2
3
4
deploy:
  type: git
  repo: https://github.com/username/username.github.io.git
  branch: master

本地測試

指令介紹

1.hexo generate (hexo g) 產生靜態檔案，會在目錄下產生public 資料夾

2.hexo server (hexo s) 啟動local伺服器，預設是 http://localhost:4000/

3.hexo deploy (hexo d) 部署網站（ Ex: github, heroku 等平台 ）

本地呈現

執行下方兩行指令，就可以在 http://localhost:4000/ 查看Blog 。

1
2
$ hexo g 
$ hexo s

local server

這樣即生成簡易 Blog

更換主題

既然是個人 Blog 當然就要有個人風格啦～，可以到這裡 挑選 Hexo 主題 ， Hexo 預設是 landscape ，若非熟手建議使用最多人用的 NexT ，因為有較多更新與維護，也支持更多套件。若真的想用其他的主題，建議看一下最後一次維護的日期，儘量不要選太久以前的。

安裝NexT

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

接著修改網站設定_config.yml

1
theme: next

重新啟動server

1
$ hexo server

執行完畢後，主題就改變囉

編輯主題 _config.yml 配置

Scheme 設定

在NexT 中有多種Scheme 可選擇，其中的預設主題為Muse。在主題設定theme/next/_config.yml裡找到schema，把註解去掉即可開啟

1
2
3
4
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

代碼高亮

NexT 使用 Tomorrow Theme 當作代碼高亮，共有5款主題可以選擇。 NexT 預設使用的是 normal，可選的值有 normal、night、 night blue、 night bright、 night eighties

1
highlight_theme: normal

背景特效

在主題設定themes/next/_config.yml裡還有另外的動畫效果，要打開就把 canvas 值設定為true。

開啟社群帳號連結

在主題設定themes/next/_config.yml中新增社群網路連結，取消註解即可使用。

1
2
3
4
5
6
7
8
9
10
11
social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:xxx@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://www.instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

RSS

安裝feed插件

本地hexo目录下运行 git bash here
输入指令 npm install hexo-generator-feed
等待安装完成

添加配置文件

打开hexo目录下配置文件_config.yml，末尾添加以下配置

1
2
3
4
5
6
7
8
9
10
# Extensions
## Plugins: http://hexo.io/plugins/
#RSS订阅
plugin:
- hexo-generator-feed
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

打開主題配置文件_config.yml,搜索rss，添加配置
rss: /atom.xml

參考

如何给Hexo正确添加RSS订阅

Gitalk → 打開留言功能

1.建立 GitHub OAuth APP

要使用 Gitalk 必須有 GitHub OAuth，所以首先先開啟 GitHub → Setting

Setting
接下來選擇 Developer settings

Developer settings
然後點 OAuth Apps 再點上方 New OAuth App
OAuth Apps
接下來依照欄位填寫即可

1
2
3
4
Application name - 應用程式名稱
Homepage URL - 應用程式網域 → 填你部落格網址
Application description - 應用程式描述
Authorization callback URL - 授權回應網址 → 填你部落格網址

New OAuth App
申請完之後你就會獲得這兩組 ID (Client ID、Client Secret)，請不要外流，稍後會使用到

ID

Gitalk 是一個基於 GitHub 所開發的留言版套件， 可以使用 MarkDown 格式，所以對於工程師很方便

2.開啟佈景主題的 _config.yml，然後搜尋「Gitalk」，此時你就可以看到相關設定，只需要依照欄位填入即可(這篇針對主題 Next，若需配合其他主題請再另外找設定的位置)

1
2
3
4
5
6
7
8
9
gitalk:
  enable: true
  github_id:  # GitHub 作者帳號
  repo: xxx.github.io # 你的 Repo 名稱，通常就是網域
  client_id: xxxxxxxx # 剛剛申請的 Client ID
  client_secret: xxxxxxxx # 剛剛申請的 Client Secret
  admin_user: xxx # 管理者的帳號
  distraction_free_mode: true # 無干擾模式
  language: zh-TW ## 語系

3.部署

請參閱本文 → 部署到 GitHub Pages，部署完畢可以在文章底下看到留言板開啟，一開始需要點選啟用，否則會出現請聯絡 xxx 初始化評論
留言板開啟

參考

十分鐘超詳細替 Hexo Next 開啟 Gitalk 留言版

添加訪客統計、訪問次數統計、文章閱讀次數統計

1.打開next主題配置文件\themes\next_config.yml，搜尋找到busuanzi_count，把enable设置为true

1
2
3
4
5
6
7
8
9
10
# Show Views / Visitors of the website / page with busuanzi.#展示访问数
# Get more information on http://ibruce.info/2015/04/04/busuanzi
busuanzi_count:
  enable: true
  total_visitors: true   #统计访客数
  total_visitors_icon: user
  total_views: true    #统计访问数
  total_views_icon: eye
  post_views: true   #统计文章阅读数
  post_views_icon: eye

2.同樣是在next主題配置文件\themes\next_config.yml下，搜尋footer，在它底下添加counter，設值為true

1
2
#统計
counter: true

3.到themes\next\layout_partials，找到footer.swig文件，打開編輯，在底下添加代码

1
2
3
{% if theme.footer.counter %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
{% endif %}

4.效果圖：
站點訪客數、訪問次數顯示在網站底部

訪客數、訪問次數

文章閱讀次數在文章開頭

文章閱讀次數

參考

Hexo Next主题添加访客统计、访问次数统计、文章阅读次数统计

開始動手寫文章

新建分頁

1
$ hexo new page <title>

1
$ hexo new page “pageName” # 新建頁面

所有的文章都會在source/_posts裡面。初始化後就已有一篇範例文章hello-world.md

新建文章

1
$ hexo new [layout] <title>

如果沒有設定 layout 的話，則會使用 _config.yml 中的 default_layout 設定代替。如果標題包含空格的話，請使用引號括起來

所以在使用上可以解釋成：

1
$ hexo new “postName” # 新建文章

閱讀全文問題

在首頁會直接出現整篇文章（如下圖）

如想讓首頁文章折疊，出現Read More，有三種方式，本文使用 Hexo 官網推薦，直接於文章中加入 <!– more –> 手動進行截斷

參考

如何设置「阅读全文」？

插入圖片

Markdown中插入圖片的三個技巧
Markdown插入圖片有三種方法，各種Markdown編輯器的插圖方式也都包含在這三種方法之内

插圖最基礎的格式就是：

![Alt text](圖片連結 “optional title”)

Alt text：圖片的Alt标签，用来描述圖片的關鍵詞，可以不寫。最初的本意是當圖片因爲某種原因不能被顯示時而出線的替代文字，後又被用於SEO，可以方便搜尋引擎根據Alt text里面的關鍵詞搜尋到圖片。

图片連結：可以使圖片的本地地址或者是網址。
“optional title”：鼠標懸置於圖片上會出现的標題文字，可以不寫。

1.插入本地圖片

只需要在基礎語法的括號中填入圖片的位置路徑即可，支持绝對路徑和相對路徑

例如： ! [本地圖片](/user/desktop/doge.png)

缺点是不灵活，不好分享。本地图片的路径更改或丢失都会造成Markdown文件调不出图片

2.插入網路圖片

只需要在基礎語法的括號中填入圖片的網路連結即可，現在已經有很多免費/收費圖床和方便傳圖的小工具可選

例如： ! [網路圖片](baidu.com/pic/doge.png)

缺點是圖片存在網路服務器上，非常依賴網路

3.把圖片存入Markdown文件

用base64轉碼工具把圖片轉成一段字符串，然後把字符串填到基礎格式中連結的位置

基礎用法： ! [圖片存入Markdown文件](data:image/png;base64,iVBORw0……)

這時候你會發現，插入的這一長串字符串會把整個文章分割開，非常影響編寫文章時的體驗

如果能夠把大段的base64字符串放在文章末尾，然後在文章中通過一个id來調用，文章就不會被分割的這麼亂了。就像寫論文時的文末註釋和參考文檔一樣

這個想法可以通過Markdown的參考式連結語法來實現

進階用法：

![avatar][doge]
[doge]:data:image/png;base64,iVBORw0……

這個用法不常見，優點是很靈活，不會又連結失敗的問題，缺點是一大團base64

總結，最後本文使用的為 2.插入網路圖片，但將圖片放在 GitHub 上，一是免費，二是此網站較不會有掛掉的問題，可以參考關於markdown文件插入圖片遇到的小問題和解決辦法

參考

Markdown系列（7）- Markdown中插入图片的三个技巧

為文章添加分類

1.編輯已添之分類頁 (categories)，將頁面的類型設置為 categories ，主題將自動為這個頁面顯示所有分類

1
2
3
4
title: 分类
date: 2014-12-22 12:39:04
type: "categories"
---

2.編輯主題的 _config.yml 檔案，取消 menu categories: /categories 註釋，如下:

1
2
3
4
5
menu:
  home: /
  categories: /categories
  archives: /archives
  tags: /tags

注意：分類中需有文章，始能見效

添加文章分類關聯

1.hexo中有Front-matter这个概念，是文件最上方以 — 分隔的区域，用於指定個別文件的變量。例如，在hexo new post article時會生成article.md文件，文件生成好的文章属性。

1
2
3
4
5
---
title: hexo next 分頁
date: 2016-03-16 08:12:43
tags:
---

2.在其中添加categories属性，再部署之后就可以在分类页看到分类了

1
2
3
4
5
6
---
title: hexo next 分頁
date: 2016-03-16 08:12:43
tags:
categories: hexo 使用
---

參考

hexo next 为文章添加分类

部署到 GitHub Pages

現在文章基礎都差不多囉～可以準備部署到 GitHub Pages

回到終端機，首先確認終端機的路徑在 < folder > 中新建部署所需檔案。 資料夾根目錄下，並依序輸入以下三個指令：(輸入 hexo d 後會要求登入 GitHub 帳號)

1
2
3
$ hexo cl  //清除之前建立的靜態檔案，也可以輸入 hexo clean
$ hexo g  //建立靜態檔案，也可以輸入 hexo generate
$ hexo d  //部署至 Github Pages，也可以輸入 hexo deploy

這樣就把網站自動生成並發佈到 https://username.github.io 上的指令，訪問此網址即可看到成果～

參考連結

Hexo 官方文件

如何搭建個人 Blog 使用 Hexo + Gitpage

[教學] 使用 GitHub Pages + Hexo 來架設個人部落格

手把手教你使用Hexo + Github Pages搭建个人独立博客

Hexo写文章的一些小技巧

Hexo 搭建个人博客系列：写作技巧篇

The Markdown elements outlined in John Gruber’s design document.

Learning-Markdown (Markdown 入门参考)

Welcome to my other publishing channels