hexo+GitHub部落格搭建實戰

weixin_34148340發表於2017-09-08
HexoGithub

一.準備工作

1、安裝 Node.js: https://nodejs.org/en/

2、安裝 Git: https://github.com/waylau/git-for-win

Git教程 https://github.com/waylau/git-for-win廖雪峰老師的教程，非常好。

3、安裝完成後，在開始選單裡找到“Git”->“Git Bash”，名稱和郵箱是Github上的。

7826727-f864b98c1b2b9a57.png
git_1.png

4、安裝 Hexo。所有必備的應用程式安裝完成後，即可使用 npm 安裝 Hexo。

$ npm install -g hexo-cli

4.1 安裝hexo出錯：

unable to verify the first certificate（無法驗證第一證照）
7826727-34e4d3c83db4c4fb.png
hexo_1.png

查詢到解決方案：

7826727-b1666136cd918fc5.png
hexo_2.png

參考網址：npm報錯

依據解決方案所述，在命令列輸入如下命令，來取消ssl驗證：

npm config set strict-ssl false

之後安裝就會成功了，顯示如下：

7826727-6a03f7362360f1cf.png
hexo_3.png

二、配置Github

首先註冊、登入 https://github.com/

記住自己的Username（很重要）

然後右上角選擇 Create a new repository https://github.com/new

Repository name（填自己的名字） yourname.github.io(yourname與你的註冊使用者名稱一致,這個就是你部落格的域名了)

7826727-85dc0a5aedd04752.png
github_1.png

倉庫建立完成後，開始生成新增祕鑰。

在終端（cmd）輸入：

ssh-keygen -t rsa -C "Github的註冊郵箱地址"

一路Enter過來就好，待祕鑰生成完畢，會得到兩個檔案id_rsa和id_rsa.pub，用帶格式的記事本開啟id_rsa.pub，Ctrl + a複製裡面的所有內容，然後進入https://github.com/settings/ssh：

7826727-3f0dd82d09327feb.png
github_2.png

將複製的內容貼上到Key的輸入框，隨便寫好Title裡面的內容，點選Add SSH key按鈕即可。

若沒有配置GitHub，就執行第三步（初始化部落格），會出現如下錯誤：

7826727-5df0ff3f1ce2f872.png
hexo_4.png

三、初始化部落格

在電腦F盤（自己隨意）目錄下新建資料夾 test，進入test，按住Shift鍵點選滑鼠右鍵，點選“在此處開啟命令視窗”：

7826727-24063df4773e7d50.png
blog_1.png

輸入

hexo init blog

稍微等待下，速度有點慢。成功提示：

INFO  Start blogging with Hexo!

因為你初始化hexo 之後source目錄下自帶一篇hello world文章, 所以直接執行下方命令:

$ hexo generate
# 啟動本地伺服器
$ hexo server
# 在瀏覽器輸入 http://localhost:4000/就可以看見網頁和模板了
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

訪問http://localhost:4000/，便可以看到網站初步的模樣，不要激動，我們還要把網頁釋出到Github上去。

7826727-984950837570c4b5.png
blog_local_server.png

四、配置部落格

在blog目錄下，用sublime/notepad++等文字編輯器開啟_config.yml檔案，修改引數資訊

特別提醒，在每個引數的：後都要加一個空格

1.修改網站相關資訊

title: wangwlj測試所用部落格
subtitle: 積跬步以至千里！
description: 網頁描述
author: wangwlj
language: zh-Hans
timezone: Asia/Shanghai

language和timezone都是有輸入規範的，詳細可參考 語言規範和時區規範。

2.配置部署（qwerty200696，修改成自己的）

deploy:
  type: git
  repo: https://github.com/qwerty200696/qwerty200696.github.io
  branch: master

其中repo項是之前Github上建立好的倉庫的地址，可以通過如下圖所示的方式得到：

7826727-ced09350f90500df.png
github_3.png

branch是專案的分支，我們預設用主分支master。

3.配置統一資源定位符（個人域名）

如果有個人域名的話可以設定，否則跳過即可。GitHub地址也可以。

url: http://inerdstack.com

對於root（根目錄）、permalink（永久連結）、permalink_defaults（預設永久連結）等其他資訊保持預設。

五、發表文章

1.新建一篇博文，在CMD中輸入

$ hexo new "我的測試文章"

INFO  Created: F:\test\blog\source\_posts\我的測試文章.md

2.找到該文章，開啟，使用Markdown語法，該語法介紹可以檢視：markdown語法

3.接著輸入如下的一系列命令：

F:\test\blog
$ hexo clean
INFO  Deleted database.
INFO  Deleted public folder.

F:\test\blog
$ hexo generate
INFO  Start processing
INFO  Files loaded in 1.48 s
#省略
INFO  29 files generated in 4.27 s

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

我直接跑的server，也可以。

最後一步，釋出到網上，執行：

F:\test\blog
$ hexo deploy
INFO  Deploying: git
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
#省略

其中會跳出Github登入，直接登入，如果沒有問題，在瀏覽器輸入qwerty200696（換成你的）.github.io/

然後就可以看到已經發布了。

4.錯誤記錄一：

 deploy not found： git
7826727-403f9d31ed1347ac.png
error_1.png

解決方案：執行如下語句後， 再部署即可：

npm install hexo-deployer-git --save

參考自：https://www.v2ex.com/t/175940

7826727-823ae6c06b98f673.png
error_1_done.png

5.錯誤記錄二：

今天執行：

hexo deploy

同步文章到github時，出錯：

fatal: unable to access 'https://username:password@github.com/username/username.github.io.git/': SSL certificate problem: unable to get local issuer certificate
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: fatal: unable to access 'https://username:password@github.com/username/username.github.io.git/': SSL certificate problem: unable to get local issuer certificate

    at ChildProcess.<anonymous> (D:\test\blog2\node_modules\hexo-util\lib\spawn.js:37:17)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at ChildProcess.cp.emit (D:\test\blog2\node_modules\cross-spawn\lib\enoent.js:40:29)
    at maybeClose (internal/child_process.js:920:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:230:5)
7826727-2692d1376ecac73e.png
git_hexo_deploy_error.png

解決方法：執行如下語句：

$ git config --global http.sslVerify false

參考自：git獲取程式碼提示SSL certificate problem: unable to get local issuer certificate

（optional）另外，可將_config.yml中的repo修改為如下標準格式：

repo: https://使用者名稱:密碼@github.com/使用者名稱/使用者名稱.github.io.git

參考自： hexo提交報錯 unable to access

之後再次執行釋出指令，終於成功：

hexo deploy
7826727-e1f0c9cca05cf520.png
git_hexo_deploy_error_done.png

六、新增圖片

經過上面的配置後，發現上傳的部落格文章裡面的本地圖片居然顯示不來（沒有同步上傳）。

於是，找到解決方案：

1 把主頁配置檔案_config.yml 裡的post_asset_folder:這個選項設定為true

2 在你的hexo目錄下執行這樣一句話npm install hexo-asset-image --save，這是下載安裝一個可以上傳本地圖片的外掛

3 等待一小段時間後，再執行hexo n "xxxx"來生成md博文時，/source/_posts資料夾內除了xxxx.md檔案還有一個同名的資料夾

4 最後在xxxx.md中想引入圖片時，先把圖片複製到xxxx這個資料夾中，然後只需要在xxxx.md中按照markdown的格式引入圖片：

![](xxxx/圖片名.jpg)

注意： xxxx是這個md檔案的名字，也是同名資料夾的名字。只需要有資料夾名字即可，不需要有什麼絕對路徑。你想引入的圖片就只需要放入xxxx這個資料夾內就好了，很像引用相對路徑。

5 最後檢查一下，hexo g生成頁面後，進入public\2017\02\26\index.html檔案中檢視相關欄位，可以發現，html標籤內的語句是![](2017/02/26/xxxx/圖片名.jpg)，而不是<img src="xxxx/圖片名.jpg>。(這點可以跳過，按照1-4步執行下來一般沒有問題。)

6.hexo s，執行本地伺服器，開啟http://localhost:4000/，可實時檢視修改情況。

7.hexo g，同步到github。

七、總結

釋出文章的步驟：

1、hexo new 建立文章

2、Markdown語法編輯文章

3、部署（所有開啟CMD都是在blog目錄下）

hexo clean #清除快取 網頁正常情況下可以忽略此條命令
hexo generate #生成
hexo server #啟動服務預覽，非必要，可本地瀏覽網頁
hexo deploy #部署釋出

簡寫Tips：

  1. hexo n “我的部落格” == hexo new “我的部落格” #新建文章

  2. hexo p == hexo publish

  3. hexo g == hexo generate#生成

  4. hexo s == hexo server #啟動服務預覽

  5. hexo d == hexo deploy#部署

參考文獻：

  1. 教你免費搭建個人部落格，Hexo&Github
  2. hexo生成博文插入圖片

本文在GitHub部落格上即時更新 https://qwerty200696.github.io/2017/09/08/blog_setup/

相關文章