Hexo+github如何搭建部落格
阿新 • • 發佈:2020-03-05
# 前言 #
部落格有第三方平臺,也可以自建,比較早的有部落格園、CSDN,近幾年新興的也比較多諸如:WordPress、segmentFault、簡書、掘金、知乎專欄、Github Page 等等。
這次我要說的就是 Github Page + Hexo 搭建個人部落格的方式!Github Page 是 Github 提供的一種免費的靜態網頁託管服務(所以想想免費的空間不用也挺浪費的哈哈哈),可以用來託管部落格、專案官網等靜態網頁。支援 Jekyll、Hugo、Hexo 編譯靜態資源,這次我們的主角就是 Hexo 了,具體的內容下面在文章內介紹。
## 演示站:[晚楓^-部落格]( https://whitesir-blog.top/)
![](https://cdn.jsdelivr.net/gh/baifeng66/picgophots/images/部落格主頁.png)
部落格文章連結:https://white_maple.gitee.io/posts/fef1.html
下面就開始吧~
# 一、準備部落格環境 #
準備 node 和 git 環境,
首先,安裝 [NodeJS](https://nodejs.org/en/),因為 [Hexo](https://hexo.io/zh-cn/) 是基於 Node.js 驅動的一款部落格框架,然後,安裝 [git](https://git-scm.com/),一個分散式版本控制系統,用於專案的版本控制管理,作者是 Linux 之父。如果 Git 還不熟悉可以參考廖雪峰大神的 [Git](https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000) 教程。
## 1.1 Node.js的安裝與配置 ##
>下載地址:https://nodejs.org/en/
>
>根據你電腦系統的配置資訊,下載對應的安裝程式,然後開始進行下面的步驟。
### 這裡我推薦[菜鳥教程的Node.js 安裝配置](https://www.runoob.com/nodejs/nodejs-install-setup.html)這裡面很詳細!!
安裝完成後呢,我們就要去驗證有沒有安裝成功。
首先,win+R,再輸入cmd,按Enter進入到我們的控制檯,檢視node和npm的版 本,看是否安裝成功。
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDIwMDIwOTE5MjIzNTIyMS5wbmc?x-oss-process=image/format,png)
按照上圖這樣輸入命令後,如果結果和上圖差不多的話(你們下載的版本有可能不一樣),就說明已經安裝成功了!
假如執行`node -v`報錯的話,那麼手動將Node.js的安裝路徑新增到環境變數中,右擊點選我的電腦 ->屬性 -> 高階系統設定 -> 環境變數,在系統變數下找到名為path的變數名,如下圖:
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzE5MTEwNy5wbmc?x-oss-process=image/format,png)
選中path,或者雙擊,然後將你node.js的安裝路徑放在path變數值的最後面,如果新增之前path值最後有 英文的分號,則直接將路徑新增進去即可,如果沒有,先新增分號,然後點選儲存,回到桌面,開啟cmd(Win+R),執行`node -v`,看是否成功。
接下來,由於國內映象源速度比較慢,一般先安裝`cnpm淘寶源`,選擇複製下列一個命令粘到cmd執行
```bash
# 檢視npm的配置
npm config list
# 預設源
npm config set registry https://registry.npmjs.org
# 臨時改變映象源
npm --registry=https://registry.npm.taobao.org
# 永久設定為淘寶映象源
npm config set registry https://registry.npm.taobao.org
# 另一種方式,編輯 ~/.npmrc 加入下面內容
registry = https://registry.npm.taobao.org
```
安裝映象後,輸入下列指令,檢視是否安裝成功
> cnpm -v
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDIwMDIwOTE5Mjg0NDc3MC5wbmc?x-oss-process=image/format,png)
# 1.2 Git的安裝與配置 #
同樣這裡我還是推薦大家去[菜鳥教程Git的安裝與配置](https://www.runoob.com/git/git-install-setup.html),下載安裝後按照下面步驟進行
回到桌面,點選滑鼠右鍵,會出現兩個選項`Git GUI Here`和`Git Bash Here`,在開啟Cmd(Win+R),分別輸入`git`和`git --version`,如果出現如下圖的情況,即安裝成功!
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy9naXQtMTIucG5n?x-oss-process=image/format,png)
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy9naXQtMTMucG5n?x-oss-process=image/format,png)
# 二、Github註冊以及Github Pages建立
我推薦一個簡書上面的博主寫的文章[Github註冊以及Github Pages建立](https://www.jianshu.com/p/683a120c6264),根據他的步驟完成Github的註冊以及Github Pages後,讓我們進入下一環節!!
# 三、配置Git使用者名稱和郵箱
在桌面點選滑鼠右鍵,點選`Git Bash Here`,會出現一個介面如下圖所示:
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIxNTExOC5wbmc?x-oss-process=image/format,png)
然後分別輸入下面的兩個命令,並回車:
```bash
git config --global user.name "此處填寫你註冊時的使用者名稱"
git config --global user.email "此處填寫你註冊時的郵箱"
# 一般只要不報錯,可以跳過下面尋找.gitconfig檔案
```
然後找到`.gitconfig`檔案,檔案存放位置在`C:/Users/[username]/.gitconfig`(未找到的話,請開啟顯示隱藏檔案的功能),用編輯器開啟,看到如下圖所示的內容,即配置成功!
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMDAxNi5wbmc?x-oss-process=image/format,png)
# 四、本地安裝hexo靜態部落格框架以及釋出到Github Pages
首先選擇一個磁碟作為你部落格檔案的存放位置,然後新建一個資料夾,比如名為blogtest的資料夾,建立完後,先不要點進去,在此處點選滑鼠右鍵,選擇`Git Bash Here`,然後依次輸入如下命令,:
```bash
# hexo框架的安裝
npm install -g hexo-cli
# 等上一個命令完成後,在輸入下面的命令
hexo init <新建資料夾的名稱> #初始化資料夾
cd <新建資料夾的名稱>
npm install # 安裝部落格所需要的依賴檔案
```
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTEyOS5wbmc?x-oss-process=image/format,png)
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTE0NC5wbmc?x-oss-process=image/format,png)
等待執行完成,此時資料夾中多了許多檔案。
**注意**:**後續的命令均需要在站點目錄下(即資料夾內)使用Git Bash執行。**
此時Hexo框架的本地搭建已經完成了。我們來執行一下看看,命令列依次輸入以下命令 :
```bash
hexo g
hexo s
```
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTE1Ny5wbmc?x-oss-process=image/format,png)
瀏覽器中開啟[http://locakhost:4000或者127.0.0.1:4000,可以看到一個網頁,說明Hexo部落格已經成功在本地執行。](https://yafine-blog.cn/go.html?url=aHR0cDovL2xvY2FraG9zdDo0MDAw5oiW6ICFMTI3LjAuMC4xOjQwMDDvvIzlj6/ku6XnnIvliLDkuIDkuKrnvZHpobXvvIzor7TmmI5IZXhv5Y2a5a6i5bey57uP5oiQ5Yqf5Zyo5pys5Zyw6L+Q6KGM44CC)
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMTIwNi5wbmc?x-oss-process=image/format,png)
## 1. 本地部落格釋出到Github Pages
之前的步驟中,我們已經完成了對Github賬戶的註冊以及Github Pages的建立,接下來是將本地部落格釋出至Github Pages。
首先需要安裝釋出的外掛,在站點目錄下執行下面的命令,也就是建立的部落格目錄下:
```bash
npm install hexo-deployer-git --save
```
緊接著,將本地目錄與GitHub關聯起來,輸入下面的命令列:
```bash
ssh-keygen -t rsa -C "你的郵箱地址"
```
輸入後一直回車,然後在`C:/Users/[username]`目錄下找到名為`.ssh`的資料夾, 資料夾內會有兩個檔案,一個`id_rsa.pub`一個`id_rsa`,用文字編輯器開啟`id_rsa.pub`,複製裡面的的內容。 然後開啟Github,點選右上角的頭像 **Settings** 選擇**SSH and GPG keys**
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMjc0Ni5wbmc?x-oss-process=image/format,png)
點選**New SSH key** 將之前複製的內容粘帖到Key的框中。 上面的**Title**可以隨意,點選**Add SSH key** 完成新增。
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyMzA0OS5wbmc?x-oss-process=image/format,png)
然後回到Git的命令列介面,測試一下是否與GitHub連線成功。輸入下面的命令列:
```bash
ssh -T [email protected]
```
點選回車,然後會出現一個詢問內容,輸入`yes`,回車,會出現一段內容,`Hi ! You've successfully authenticated, but GitHub doesnot provide shell access.`。 說明連線成功。此處這個``應該是你Github的使用者名稱。
進入部落格站點目錄,用文字編輯器開啟`_config.yml`,這個`_config.yml`是部落格的配置檔案,在以後的部落格修改,如個性化修改,部落格SEO優化等都會使用到,修改如下圖的幾個地方:
```yml
title: 你的部落格名
subtitle: 部落格的副標題,有些主題支援
description: 部落格描述
keywords: 部落格關鍵詞
author: 作者,在文章中顯示
language: 部落格語言語種
timezone: 時區
```
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyNDEzOC5wbmc?x-oss-process=image/format,png)
滑到檔案最底部,有一個deploy,在deploy下面新增一個repo項 ,一個branch項。填入如下程式碼,並如下圖所示:
```yml
type: git
repo: [email protected]:Github使用者名稱/github使用者名稱.github.io.git
//也可使用https地址,如:https://github.com/Github使用者名稱/Github使用者名稱.github.io.git
branch: master
```
![](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L2doL2JhaWZlbmc2Ni9waWNnb3Bob3RzL2ltYWdlcy8yMDE5MTExNzIyNDE1MS5wbmc?x-oss-process=image/format,png)
最後就是生成頁面,併發布至Github Pages,執行如下命令:
```bash
# Hexo會根據配置檔案渲染出一套靜態頁面
hexo g
# 將上一步渲染出的一系列檔案上傳至至Github Pages
hexo d
# 也可以直接輸入此命令,直接完成渲染和上傳
hexo g -d
```
上傳完成後,在瀏覽器中開啟**https://<使用者名稱>.github.io**,檢視上傳的網頁。如果頁面變成了之前本地除錯時的樣子,說明上傳以及完成了。沒變的話檢視一下上傳時命令列視窗的資訊有沒有錯誤資訊,沒有的話清除一下瀏覽器快取試試。
到此,基本的個人部落格搭建就完成啦,以為預設的主題不好看,所以後續我會將部落格美化教程發出來。
最後,歡迎大家來我的個人部落格踩踩喲!
# --- [晚楓^-部落格]( https://white_maple.gitee.io) --- #