Hexo+Github搭建個人博客

Hexo+Github搭建個人博客

目錄

目錄

• 目錄
• 1. 簡介
  • 環境簡介
• 2. Github倉庫創建和配置
  • 2.1 創建Git倉庫
  • 2.2 配置git倉庫
  • 2.3 把本地公鑰添加到github中
• 3. Node安裝
• 4. Hexo安裝及配置
  • 4.1 安裝hexo
  • 4.2 初始化hexo文件夾
  • 4.3 Hexo操作
  • 4.4 將git庫和hexo鏈接起來
• 5. 創建博客文章
  • Hexo常用命令
• 6. 更換主題
• 7. 參考文章

1. 簡介

首次通過Hexo和Github搭建自己的博客，嘗試成功，從別人那里借來個yilia主題，看着挺漂亮，索性直接當我的主題用了，雖然還不會太多的配置操作，先把自己搭建博客過程中的主要操作記錄下來。

環境簡介

本地電腦環境：

windows10

搭建博客需要安裝的軟件：

git
node.js
hexo

安裝搭建博客需要的工具：git和node.js；通過一下命令查詢：

$ git --version
git version 2.22.0.windows.1

$ node -v
v10.16.0

$ npm config set registry https://registry.npm.taobao.org

默認已經注冊有Github帳號；

Hexo軟件還未安裝，下文會簡單講述Hexo軟件的安裝；

2. Github倉庫創建和配置

2.1 創建Git倉庫

打開GitHub，點擊“New repository”，創建一個新倉庫，用來專門存放博客日志信息；倉庫名要按照格式：賬戶名.github.io，比如：Mshrimp.github.io；否則，后邊的操作會出現問題；創建倉庫時勾選上“
Initialize this repository with a README”；

進入創建好的倉庫Mshrimp.github.io，點擊右側的“Settings”，向下拉找到Github Pages，會看到網站是：https://mshrimp.github.io/，點擊就可以訪問，也可以通過外網訪問，這時這個博客項目已經部署到網站上了，但是是個空的網站，沒有內容；這個網址是博客的默認地址，如果有興趣可以自己購買域名換成想要的地址。

2.2 配置git倉庫

如果是第一次使用git，就需要先配置git環境，否則可以跳過；

$ git config --global user.name "Mshrimp"
$ git config --global user.email "******@outlook.com"

在沒有配置git環境之前，~/.ssh是不存在的

$ cd ~/.ssh
bash: cd: /c/Users/Kevin-TP/.ssh: No such file or directory

使用ssh-keygen生成私鑰和公鑰

$ ssh-keygen -t rsa -C "[e-mail]"
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/Kevin-TP/.ssh/id_rsa):
Created directory '/c/Users/Kevin-TP/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/Kevin-TP/.ssh/id_rsa.
Your public key has been saved in /c/Users/Kevin-TP/.ssh/id_rsa.pub.
The key fingerprint is:
SHA256:pHNkvs9RsOToxmFH6gnkOb7j/dlRSc4c6TkOvGQ6fcc [e-mail]
The key's randomart image is:
+---[RSA 3072]----+
|                 |
|               . |
|      . + +   +  |
|     o B * + * + |
|      B S + * X  |
|     . X = * = o |
|      . B + + o E|
|      .+ o = o . |
|     .o...= .    |
+----[SHA256]-----+

從以上的操作打印可以知道，生成的密鑰和公鑰的保存路徑

Your identification has been saved in /c/Users/Kevin-TP/.ssh/id_rsa.
Your public key has been saved in /c/Users/Kevin-TP/.ssh/id_rsa.pub.

查看生成的密鑰和公鑰

$ cd ~/.ssh
$ ls
id_rsa  id_rsa.pub
$ cat id_rsa.pub
ssh-rsa 
......

2.3 把本地公鑰添加到github中

在GitHub中，點擊右側圖像下拉選項，選擇“Settings”，在“SSH and GPG keys”中，點擊“New SSH key”，並將~/.ssh/id_rsa.pub文件里的內容復制上去，保存退出；

使用“ssh -T [e-mail]”命令，測試添加ssh是否成功；

$ ssh -T [e-mail]
......
Hi Mshrimp! You've successfully authenticated, but GitHub does not provide shell access.

3. Node安裝

4. Hexo安裝及配置

先創建一個hexo操作的文件目錄

如果使用的是Linux系統，可以直接在命令行中輸入命令操作，如果是windows系統，用管理員權限打開“命令提示符”，使用命令在電腦上安裝hexo；或者，在hexo目錄上右鍵，選擇“Git Bash Here”，用git bash工具打開hexo目錄，在git bash中使用命令操作；

4.1 安裝hexo

$ npm install hexo -g

C:\Users\Kevin-TP\AppData\Roaming\npm\hexo -> 
C:\Users\Kevin-TP\AppData\Roaming\npm\node_modules\hexo\bin\hexo
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 
(node_modules\hexo\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 
(node_modules\hexo\node_modules\nunjucks\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for 
fsevents@1.2.11: wanted {"os":"darwin","arch":"any"} (current: 
{"os":"win32","arch":"x64"})

+ hexo@4.2.0
added 36 packages from 40 contributors, removed 30 packages, updated 58 packages 
and moved 5 packages in 19.178s

檢查hexo是否安裝成功

$ hexo -v
hexo-cli: 2.0.0
os: Windows_NT 10.0.18362 win32 x64
http_parser: 2.8.0
node: 10.16.0
v8: 6.8.275.32-node.52
uv: 1.28.0
zlib: 1.2.11
brotli: 1.0.7
ares: 1.15.0
modules: 64
nghttp2: 1.34.0
napi: 4
openssl: 1.1.1b
icu: 64.2
unicode: 12.1
cldr: 35.1
tz: 2019a

4.2 初始化hexo文件夾

$ hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
Cloning into 'G:\hexo_git'...
remote: Enumerating objects: 9, done.
remote: Counting objects: 100% (9/9), done.
remote: Compressing objects: 100% (7/7), done.
remote: Total 77 (delta 4), reused 5 (delta 2), pack-reused 68
Unpacking objects: 100% (77/77), done.
Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape'
Cloning into 'G:/hexo_git/themes/landscape'...
remote: Enumerating objects: 33, done.
remote: Counting objects: 100% (33/33), done.
remote: Compressing objects: 100% (29/29), done.
remote: Total 929 (delta 12), reused 15 (delta 3), pack-reused 896
Receiving objects: 100% (929/929), 2.56 MiB | 9.00 KiB/s, done.
Resolving deltas: 100% (492/492), done.
Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350'
INFO  Install dependencies
npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2.
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 340 packages from 500 contributors and audited 6879 packages in 29.578s
found 0 vulnerabilities

INFO  Start blogging with Hexo!

看到“Start blogging with Hexo！”打印，說明初始化完成；

輸入npm install，安裝所需要的組件

$ npm install

hexo已經安裝並初始化完成；

$ ls
_config.yml  node_modules/  package.json  package-lock.json  scaffolds/  source/  themes/

到此，hexo環境安裝完成。

4.3 Hexo操作

$ hexo g #generate 生成靜態文件
$ hexo s #server 啟動服務器。
// 默認情況下，訪問網址為： [http://localhost:4000/]

在瀏覽器地址欄輸入“http://localhost:4000/”打開頁面，是一個空的博客網頁；

4.4 將git庫和hexo鏈接起來

配置Deployment

在hexo文件夾中，找到_config.yml文件，修改repository值（在末尾），repository值是github項目里的ssh；

deploy:
  type: git
  repository: [e-mail]:Mshrimp/Mshrimp.github.io.git
  branch: master

HexoBlog部署到git，需要安裝hexo-deployer-git插件，在blog目錄下運行以下命令進行安裝；

$ npm install hexo-deployer-git --save

npm WARN babel-eslint@10.1.0 requires a peer of eslint@>= 4.12.1 but none is 
installed. You must install peer dependencies yourself.

+ hexo-deployer-git@1.0.0
added 1 package from 1 contributor, removed 4 packages and updated 14 packages in 
5.684s

修改根目錄下_config.yml文件后，需要使用$ hexo deploy部署一下，否則修改內容不會生效；

$ hexo deploy

至此，一個空的博客已經搭建完成，下一步，添加博客文章；

5. 創建博客文章

$ hexo new [layout] <title> #新建文章

// 創建博客：hello-world
$ hexo new post hello-world
INFO  Created: G:\hexo\source\_posts\hello-world.md

創建成功后，會在source/_posts/目錄生成hello-world.md文件；

使用編輯器，編輯好hello-world.md文件的內容后，開始在博客中展示；

生成靜態文件

$ hexo g
INFO  Start processing
INFO  Files loaded in 757 ms
INFO  Generated: archives/2019/index.html
INFO  Generated: archives/index.html
INFO  Generated: archives/2019/07/index.html
INFO  Generated: 2019/07/16/hello-world/index.html
INFO  Generated: index.html
INFO  Generated: fonts/iconfont.b322fa.eot
INFO  Generated: fonts/default-skin.b257fa.svg
INFO  Generated: fonts/tooltip.4004ff.svg
INFO  Generated: img/preloader.gif
INFO  Generated: fonts/iconfont.16acc2.ttf
INFO  Generated: fonts/iconfont.8c627f.woff
INFO  Generated: fonts/iconfont.45d7ee.svg
INFO  Generated: img/default-skin.png
INFO  Generated: img/scrollbar_arrow.png
INFO  Generated: slider.e37972.js
INFO  Generated: main.0cf68a.css
INFO  Generated: main.0cf68a.js
INFO  Generated: mobile.992cbe.js
INFO  18 files generated in 784 ms

$ ls
_config.yml  node_modules/  package-lock.json  scaffolds/  themes/
db.json      package.json   public/            source/

啟動服務器，通過瀏覽器打開http://localhost:4000查看博客文件效果

$ hexo s
INFO  Start processing
INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

在確定博客文件完成之后，提交博客文件到git庫保存

hexo d

或者直接生成、提交一起操作

$ hexo g -d

如果執行過程中出現異常，可以先清楚，再生成、提交

$ hexo clean
INFO  Deleted database.
INFO  Deleted public folder.

提交之后的博客文件，就可以通過瀏覽器打開git庫名稱：mshrimp.github.io來打開了，支持外網訪問；

至此，一篇博客文件已經生成；

Hexo常用命令

hexo的命令很簡單，以下幾個是很常用的hexo命令，這些命令需要在當前blog目錄下執行

hexo new [layout] <title> #新建文章

新建文章時可以指定文章的布局(layout)，默認為post，可以通過修改_config.yml中的default_layout: post來指定默認布局；這樣創建的文章都會以md格式保存在source/_post目錄中；

hexo g #generate 生成靜態文件
hexo s #server 啟動服務器。在本地預覽效果，默認情況下，訪問網址為：http://localhost:4000/
hexo d #deploy 部署網站同步到github。部署網站前，需要預先生成靜態文件
hexo clean #clean 清除緩存文件 (db.json) 和已生成的靜態文件 (public)。

6. 更換主題

不喜歡原來自帶的主題，找了一個比較好看的yilia主題，需要先Github中將yilia主題的源碼下載到博客目錄的themes目錄下；

# git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

在博客根目錄下，修改_config.yml文件的themes：

themes: yilia

這個主題中的一些配置，可以根據需要自行修改，配置文件為themes/yilia/_config.yml；

7. 參考文章

https://www.jianshu.com/p/1bcad7700c46

https://segmentfault.com/a/1190000017986794