個人博客文章:https://bingslient.github.io/2019/08/06/使用Hexo 和Github搭建個人博客
背景知識
Hexo 是一款基於 Node.js 用於快速搭建博客的框架,有了它就可以完成完成個人博客的構建,它會幫你構建博客的整個框架,你只需要會使用Markdown 寫博客即可。
Github Page 是 Github 提供的靜態網站託管服務,可從 Github 倉庫中展示你的個人、組織或者項目的靜態網頁。
搭建環境
目標環境:
windows10 + Node.js + Hexo + Git
安裝必要軟件
安裝 Node.js
下載安裝包 安裝
查看是否安裝成功:
npm --version
安裝 Hexo
npm install hexo-cli -g
查看是否安裝成功:
hexo --version
安裝 Git
下載安裝包 安裝
配置 Git SSH key
要使用無密碼方式連接到 Github倉庫,需要使用公鑰認證機制。我們需要在主機上生成公鑰和私鑰密碼對,並將公鑰配置到個人的Github賬戶中。
打開一個 Git 命令終端 Git Bash:
生成 SSH key
ssh-keygen -t rsa -b 4096 -C "[email protected]"
將上述郵箱改成自己的郵箱,按提示,一路 Enter ,默認的產生的 公鑰和私鑰文件 在 /c/Users/you/.ssh/
目錄下,其中 id_rsa
爲私鑰,id_rsa.pub
爲私鑰。
添加 SSH key 到 ssh-agent
如果使用了 Github Desktop,可以忽略這步。
打開 ssh-agent:
eval $(ssh-agent -s)
添加 SSH 私鑰 到 ssh-agent
ssh-add ~/.ssh/id_rsa
添加 SSH key 到個人的 Github 賬戶
複製公鑰文件 id_rsa.pub
中的內容
打開 Github 賬戶的設置頁面,找到 SSH and GPG keys 選項,新建一個 SSH key,將複製的內容粘貼到 key 輸入框中,最後確認添加 SSH key。
配置 Hexo
初始化一個博客目錄
hexo init blog
cd blog
npm install
使用主題
Hexo 自帶的主題相當的簡陋,所以Hexo 提供了豐富的 Blog 主題。
個人喜歡的一個主題 Butterfly
[外鏈圖片轉存失敗(img-KJ3z5fWH-1565199788468)(https://cdn.jsdelivr.net/gh/BingSlient/cdn/photo/blog_screen.png)]
安裝主題 Butterfly
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
安裝主題 Butterfly
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly
修改 blog 目錄下的 _config.yml
文件,應用主題 Butterfly
theme: Butterfly
配置 Butterfly 請查看 Butterfly 配置文檔,可將 Butterfly 主題的配置文件複製到 source/_data/butterfly
。
mkdir source/_data
cp theme/Butterfly/_config source/_data/butterfly
安裝使用該主題必要的包
npm install hexo-renderer-jade hexo-renderer-stylus --save
配置博客根目錄下的 _config.yml
,添加:
deploy:
type: git
reop: <repository url> #https://github.com/BingSlient/BingSlient.github.io.git
branch: [branch] #published
安裝 git 發佈的包
npm intall hexo-deployer-git --save
使用 Github Page 倉庫
建立一個新的 Github Page 倉庫作爲用於託管個人博客內容。
新建一個 Github 倉庫,倉庫名格式如下:
username.github.io
username
爲你的 Github 賬戶的用戶名。
寫博客
創建一個新頁面
hexo new [layout] <title>
Hexo 有三種默認佈局:post
、page
和 draft
,它們分別對應不同的路徑,自定義的其他佈局和 post
相同,都將儲存到 source/_posts
文件夾。
佈局 | 路徑 |
---|---|
post |
source/_posts |
page |
source |
draft |
source/_drafts |
一般情況下都使用默認的佈局,如下新建一篇名爲 Hello World
的博文
hexo new Hello-World
打開 source/_posts/Hello-World.md
,有如下內容:
---
title: Hello-World
date: 2019-08-08 00:42:26
tags:
---
這部分內容稱爲 Front-matter
,用於定義生成網頁的一些變量,Hexo 預定義的參數如下:
參數 | 描述 | 默認值 |
---|---|---|
layout |
佈局 | |
title |
標題 | |
date |
建立日期 | 文件建立日期 |
updated |
更新日期 | 文件更新日期 |
comments |
開啓文章的評論功能 | true |
tags |
標籤(不適用於分頁) | |
categories |
分類(不適用於分頁) | |
permalink |
覆蓋文章網址 | |
keywords |
僅用於 meta 標籤和 Open Graph 的關鍵詞(不推薦使用) |
只有 post 類型的文章支持分類和標籤,可以在 Front-matter 中設置。在其他系統中,分類和標籤聽起來很接近,但是在 Hexo 中兩者有着明顯的差別:分類具有順序性和層次性,也就是說 Foo, Bar
不等於 Bar, Foo
;而標籤沒有順序和層次。
categories:
- Diary
tags:
- PS3
- Games
使用額外的主題或者插件會有額外的參數,這些參數的設置需要參考相應的文檔。
使用喜歡的編輯器,完成博文的編輯,推薦使用 Typora。
生成靜態文件
完成博文 .md
文件的編輯後,需要生成其對應的網頁文件:
hexo generate #同 hexo g
監視文件變動
Hexo 能夠監視文件變動並立即重新生成靜態文件,在生成時會比對文件的 SHA1 checksum,只有變動的文件纔會寫入。
hexo generate --watch
發佈博文到 Github Page
Hexo 使用簡單命令就可以將生成網站內容部署到服務器上,這裏我們使用 Github Page 作爲這個服務器。
hexo deploy #同 hexo d
執行上述命令,Hexo 會將內容推送到 Github 倉庫 https://github.com/username/username.github.io
中。
可以使用以下兩個命令,生成網頁文件並部署到服務器中,兩個命令作用一樣
hexo generate --deploy
hexo deploy --generate
以上兩個命令也可簡寫爲:
hexo g -d
hexo d -g
瀏覽器打開 https://username.github.io
即可訪問個人博客了。
參考資料
[1] Hexo Deployment
[2] Butterfly 配置