史上最快用GitHub、Hexo搭建個人部落格

騎馬縱天下發表於2019-04-25
GithubHexo

歡迎訪問我的部落格

一. 準備工作

  • 電腦一臺(本文是基於Mac)
  • 安裝Git
  • 安裝Node.js
  • GitHub賬號一枚

如果讀者電腦上已經裝了git、Node、並且有GitHub賬號，那麼搭建個人部落格絕對不超過抽一支菸的時間。

二. 安裝git

1. 在 Mac 上安裝 Git，官方給了有兩種方式。最容易的當屬使用圖形化的 Git 安裝工具，介面如圖，下載地址在下：

Git GUI下載地址

git安裝

2. 另一種是通過 MacPorts (http://www.macports.org) 安裝。如果已經裝好了 MacPorts，用下面的命令安裝 Git：
$ sudo port install git-core +svn +doc +bash_completion +gitweb
複製程式碼

譯註：還有一種是使用 homebrew（https://github.com/mxcl/homebrew）：brew install git。

安裝git官網教程

三. 安裝Nodejs

安裝Nodejs也有兩種方式GUI和終端命令

1. GUI下載地址

Nodejs安裝包下載地址

2. 終端執行命令

先安裝nvm，這是Nodejs版本管理器，可以輕鬆切換Nodejs版本。

  1. curl方式安裝nvm.
 $ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.0/install.sh | bash
複製程式碼

下面是nvm部分輸出，重點在最後，只有執行最後幾條命令nvm才算安裝完成。

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 11329  100 11329    0     0   4130      0  0:00:02  0:00:02 --:--:--  4130
=> Downloading nvm from git to '/Users/huanghaipo/.nvm'
=> Initialized empty Git repository in /Users/huanghaipo/.nvm/.git/


=> Appending nvm source string to /Users/huanghaipo/.bashrc
=> bash_completion source string already in /Users/huanghaipo/.bashrc
=> Close and reopen your terminal to start using nvm or run the following to use it now:
//這裡是執行命令
export NVM_DIR="/Users/leon/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
複製程式碼

根據提示執行命令load nvm,最後幾條命令每個人的都不同。

$ export NVM_DIR="/Users/leon/.nvm"
$ [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
$ nvm
複製程式碼

使用nvm安裝node

$ nvm install node
複製程式碼

驗證node及npm版本，如果有下方輸出證明安裝成功。

$ node -v
v11.14.0
$ npm -v
6.7.0
複製程式碼

四. 建立Github域名和倉庫

1. 註冊GitHub賬號

註冊Github賬號，Username很重要，域名將是賬號名加.github.io，username.github.io。

註冊賬號

2. 建立倉庫

註冊賬號後我們需要建立一個儲存網站資料的倉庫，點選首頁右上角加號，點選New repository按鈕建立倉庫。

建立倉庫1

Respository name 中的username.github.io 的username 一定與前面的Owner 一致，記住username後面會用到。

建立倉庫2

到此準備工作已經全部完成了。接下來就是安裝hexo了。

五. 安裝Hexo

以上工作全部完成我們就可以安裝Hexo了。一個嶄新的部落格將要出現。

1. 執行下方命令安裝hexo
$ sudo npm install hexo-cli -g
複製程式碼

安裝完成後我們就可以初始化部落格了，如果想要把檔案放到某個目錄下先cd到指定目錄下在執行下方命令，如果沒有指定目錄預設是的你的個人主目錄下。

//username就是你剛才倉庫的名稱
$ hexo init username.github.io
複製程式碼

檔案路徑

2. 配置部落格設定

初始化部落格後我們需要修改配置檔案已達到想要的效果如名字、主題等。

主題安裝

為了美觀我們安裝一個火熱的主題。先cd到剛才生成的目錄下執行下方命令。

$ cd username.github.io
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
複製程式碼

基礎設定

找到_config.yml檔案username.github.io/_config.yml修改下方基礎配置儲存修改。 注意_config.yml中配置項的冒號後面要用空格隔開，再跟內容否則啟動服務時會報錯。

檔案路徑

title: huanghaipo    //部落格的名字
author: huanghaipo  //你的名字
language: zh-Hans    //語言 中文
theme: next   //剛剛安裝的主題名稱
deploy:
type: git    //Github釋出
repo: https://github.com/username/username.github.io.git    // 剛建立的Github倉庫連結也可以選擇ssh
複製程式碼
3. 編寫文章

前期工作已近基本完成，接下來我們可以寫文章了。釋出就可以得到一枚個人部落格，首先新建一個.md檔案，命名為firstEssay.md，寫入下方內容。放到username.github.io/source/_posts檔案下。

 ---
 title: 我的第一篇文章
 ---
**我的第一篇文章**
複製程式碼

或者cd到你的部落格資料夾執行下方命令列會得到一個md檔案。

hexo new post "這是測試新建md文件"      //名字隨便取
複製程式碼

執行完以上命令，得到md檔案，內容如下。

---
title: 這是測試新建md文件
date: 2019-04-24 10:20:50       
tags:                            //部落格標籤
---
複製程式碼
4. 啟動測試

啟動服務，直接瀏覽器中輸入https://localhost:4000或者直接點選我 訪問。

$ hexo s
複製程式碼
5. 安裝hexo-deployer-git自動部署釋出工具
$ npm install hexo-deployer-git --save
複製程式碼
6.釋出

以上步驟都完成後，我們就可以把生成的靜態網頁檔案釋出到Github上。以後直接通過連線就可以訪問這個部落格了。

$ hexo clean && hexo g && hexo d
命令解釋
hexo clean   //清除快取檔案 (db.json) 和已生成的靜態檔案 (public)
hexo g       //生成快取和靜態檔案
hexo d       //重新部署到伺服器
複製程式碼

如果你使用的是HTTP可能會讓你輸入賬號密碼，輸入正確後，稍等片刻，就會吧檔案上傳到Github上，然後直接訪問剛才username.github.io就能看到自己的部落格了。如果有新的文章只需要放到username.github.io/source/_posts下然後執行上面的命令就OK了。

最終效果

部落格

優化

如果覺得這個主題不好看請或者想要更新部落格更方便、更美觀，請看這裡。

hexo主題 主題配置 基礎配置 hexo外掛

hexo常用命令
hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啟預覽訪問埠（預設埠4000，'ctrl + c'關閉server）
hexo deploy #將.deploy目錄部署到GitHub
hexo help # 檢視幫助
hexo version #檢視Hexo的版本
複製程式碼

踩坑記錄:

終端報錯:

FATAL can not read a block mapping entry; a multiline key may not be an implicit key at line 70, column 1: ...
複製程式碼

解決辦法：_config.yml中配置項的冒號後面要用空格隔開，再跟內容

出現 error deployer not found:git 或者 error deployer not found:github 的錯誤
複製程式碼

解決辦法：執行 npm install hexo-deployer-git --save

中文亂碼問題
複製程式碼

解決辦法：將檔案的內容編碼改為UTF8格式

'hexo sever'能夠成功執行，但是localhost:4000無法訪問
複製程式碼

解決辦法：執行hexo s -p 5000，改用其他埠啟動

相關文章