使用Hexo 和Github搭建個人博客

個人博客文章: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 有三種默認佈局:postpagedraft,它們分別對應不同的路徑,自定義的其他佈局和 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 配置

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章