技術標籤：工具技巧githubgitmarkdownhtml前端

基於 hexo 的個人部落格搭建

一、個人部落格搭建的幾種方法

1.1 動態部落格的搭建

1. 自己動手寫前端後端搭建動態部落格。（比較困難）
2. 通過wordpress動態部落格框架系統。（wordpress網址）

1.2 靜態部落格的框架

1. hexo框架：快速、簡介且高效的部落格框架。比較火（hexo）
2. jekyllrb框架：將純文字轉換為靜態網站和部落格。（jekyllrb）
3. gohugo框架：基於go語言的靜態部落格框架。（gohugo）
4. vuepress框架：Vue供電的靜態站點生成器。（veepress）

二、個人部落格搭建教程-----hexo

​ 由於 hexo 框架比較火，網上的教程也比較全，接下來就以 hexo 的搭建步驟來演示。系統環境是MacOs，Windown系統大同小異。

2.1 安裝Node.js （直接去官網下載安裝即可node.js）

​ 安裝的時候會安裝Node.js本身和npm包管理器。都是後序需要用到的工具。
​ 在終端中輸入node -v 和 npm -v 檢視node.js 和 npm 的版本，如果安裝成功則會顯示下圖類似結果。

node -v
npm -v

2.2 安裝 hexo 部落格框架

• 利用npm包管理器來安裝hexo框架，由於國內映象源的速度很慢，一般會先利用npm輸入下行命令安裝一個 cnpm 指向淘寶的映象源。在輸入cnpm檢查是否安裝成功，出現下圖使用方法和幫助文件則表示安裝成功。

  npm
   
   install -g cnpm --registry=https://registry.npm.taobao.org
  

• 利用 cnpm 全域性安裝 hexo 部落格框架。輸入下列命令安裝。

  cnpm install -g hexo-cli
  

• 用 hexo -v 命令檢驗 hexo 是否安裝成功，出現下面相關資訊則表示安裝成功，可以看得出hexo 框架是基於 nodejs 的。

2.3 開始使用 hexo 搭建部落格

• 新建一個資料夾，用於存放部落格的相關檔案，出了問題直接刪掉這個資料夾即可，重來。我是在我的使用者【文稿】資料夾下建了一個【Blog】資料夾。

• 在終端中到新建的【Blog】資料夾目錄下，把該資料夾初始化為部落格資料夾，用下列命令。

  sudo
   
   hexo init
  

​ 初始化這個需要些時間…
​ 初始化成功截圖如下：

​ 初試化成功後會在部落格目錄【Blog】下生成一系列檔案，如下圖。

• 啟動部落格，初始化好部落格之後就非常好啟動部落格，用 hexo s 命令來啟動hexo 服務 s 表示 server。

​ 第一次啟動可能會出錯，大部分都是許可權的問題，只要修改所有檔案和資料夾的許可權即可。當啟動之後就可以去瀏覽器輸入 http://localhost:4000 訪問到我們的部落格。是預設主題的。預設給你生成了一篇博文hello-world。

2.4 第一篇自己的部落格

• 新建markdown檔案
  自動生成的博文在【Blog】->【source】->【_posts】資料夾下，以後我們寫自己的博文也是放在這個資料夾，下面我們來自己建立第一篇博文。
  可以在【_posts】問價夾下直接新建markdown檔案，也可用下面命令在終端中新建。

hexo new "博文的題目"

• 【注意】：

1. 在上述新建部落格的過程中也可能會出錯，也是因為許可權問題，需要修改【_posts】的許可權才能新建成功。
2. 新建的markdown檔案有一個模板，放在【Blog】->【scaffolds】的 post.md ，其他兩個檔案一個是草稿，一個也不太清楚…。

• 生成部落格相關檔案
  要在【Blog】目錄下操作。生成前先清理下檔案：

  hexo clean
  

  再根據md檔案生成相應的網頁檔案用下面命令

  hexo g
  

2.5 把部落格部署到github上公開使用

• 先要在github上建立一個跟自己使用者名稱相同的字尾為.github.io的倉庫，注意這裡必須要與使用者名稱相同。

• 接著需要在【Blog】目錄下的終端裡裝一個 Git 的部署外掛。用下面命令安裝

  cnpm install --save hexo-deployer-git
  

  

• 配置【Blog】資料夾下的 _config.yml 檔案

  

  ​ 在# Deployment部分新增圖示裡面的程式碼，型別type為git,地址repo為剛剛新建的GitHub倉庫的地址，如圖14。branch為master。

• 將 hexo 部署到遠端 GitHub 上

  hexo d
  

​ 中間會要求輸入自己的GitHub賬號密碼，上述都沒有問題就可以部署成功。此時，GitHub剛剛新建的倉庫中會多出 hexo 部落格的相檔案。

​ 到這裡，你就可以用 https://ganming1.github.io 來訪問自己的個人網站部落格啦。

2.6 更換部落格主題

• 要更改主題，首先要下載主題
  可以在【Blog】目錄的終端下用 git 下載

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

​ https://github.com/litten/hexo-theme-yilia.git 是你想下載的主題遠端地址。
​ themes/yilia 是你下載主題後儲存的地址。

• 下載好主題後會在【Blog】->【themes】檔案裡多出我們下載的主題。

• 下載好主題後，可以在【Blog】目錄下的 _config.yml 檔案中修改使用的主題。

​ 接下來 hexo clean 、hexo g、hexo s、hexo d 清除，生成，開啟，推送一系列之前的動作就可以把新主題推送到遠端的GitHub個人網站上去。
​ 本人嘗試過很多主題，個人推薦 matery 主題，大概樣子可以參考我的個人網頁：http://ganming1.github.io 更多主題個性化設定歡迎留言討論。