# 前言 # 部落格有第三方平臺，也可以自建，比較早的有部落格園、CSDN，近幾年新興的也比較多諸如：WordPress、segmentFault、簡書、掘金、知乎專欄、Github Page 等等。 這次我要說的就是 Github Page + Hexo 搭建個人部落格的方式！Github Page 是 Github 提供的一種免費的靜態網頁託管服務（所以想想免費的空間不用也挺浪費的哈哈哈），可以用來託管部落格、專案官網等靜態網頁。支援 Jekyll、Hugo、Hexo 編譯靜態資源，這次我們的主角就是 Hexo 了，具體的內容下面在文章內介紹。 ## 演示站：[晚楓^-部落格]( https://whitesir-blog.top/)  部落格文章連結：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的版 本，看是否安裝成功。  按照上圖這樣輸入命令後，如果結果和上圖差不多的話（你們下載的版本有可能不一樣），就說明已經安裝成功了！ 假如執行`node -v`報錯的話，那麼手動將Node.js的安裝路徑新增到環境變數中，右擊點選我的電腦 ->屬性 -> 高階系統設定 -> 環境變數，在系統變數下找到名為path的變數名，如下圖：  選中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 ​  # 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`，如果出現如下圖的情況，即安裝成功！   # 二、Github註冊以及Github Pages建立 我推薦一個簡書上面的博主寫的文章[Github註冊以及Github Pages建立](https://www.jianshu.com/p/683a120c6264),根據他的步驟完成Github的註冊以及Github Pages後，讓我們進入下一環節！！ # 三、配置Git使用者名稱和郵箱 在桌面點選滑鼠右鍵，點選`Git Bash Here`，會出現一個介面如下圖所示：  然後分別輸入下面的兩個命令，並回車： ```bash git config --global user.name "此處填寫你註冊時的使用者名稱" git config --global user.email "此處填寫你註冊時的郵箱" # 一般只要不報錯，可以跳過下面尋找.gitconfig檔案 ``` 然後找到`.gitconfig`檔案，檔案存放位置在`C:/Users/[username]/.gitconfig`（未找到的話，請開啟顯示隱藏檔案的功能），用編輯器開啟，看到如下圖所示的內容，即配置成功！  # 四、本地安裝hexo靜態部落格框架以及釋出到Github Pages 首先選擇一個磁碟作為你部落格檔案的存放位置，然後新建一個資料夾，比如名為blogtest的資料夾，建立完後，先不要點進去，在此處點選滑鼠右鍵，選擇`Git Bash Here`，然後依次輸入如下命令，： ```bash # hexo框架的安裝 npm install -g hexo-cli # 等上一個命令完成後，在輸入下面的命令 hexo init <新建資料夾的名稱> #初始化資料夾 cd <新建資料夾的名稱> npm install # 安裝部落格所需要的依賴檔案 ```   等待執行完成，此時資料夾中多了許多檔案。 **注意**：**後續的命令均需要在站點目錄下（即資料夾內）使用Git Bash執行。** 此時Hexo框架的本地搭建已經完成了。我們來執行一下看看，命令列依次輸入以下命令 : ```bash hexo g hexo s ```  瀏覽器中開啟[http://locakhost:4000或者127.0.0.1:4000，可以看到一個網頁，說明Hexo部落格已經成功在本地執行。](https://yafine-blog.cn/go.html?url=aHR0cDovL2xvY2FraG9zdDo0MDAw5oiW6ICFMTI3LjAuMC4xOjQwMDDvvIzlj6/ku6XnnIvliLDkuIDkuKrnvZHpobXvvIzor7TmmI5IZXhv5Y2a5a6i5bey57uP5oiQ5Yqf5Zyo5pys5Zyw6L+Q6KGM44CC)  ## 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**  點選**New SSH key** 將之前複製的內容粘帖到Key的框中。 上面的**Title**可以隨意，點選**Add SSH key** 完成新增。  然後回到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: 時區 ```  滑到檔案最底部，有一個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 ```  最後就是生成頁面，併發布至Github Pages，執行如下命令： ```bash # Hexo會根據配置檔案渲染出一套靜態頁面 hexo g # 將上一步渲染出的一系列檔案上傳至至Github Pages hexo d # 也可以直接輸入此命令，直接完成渲染和上傳 hexo g -d ``` 上傳完成後，在瀏覽器中開啟**https://<使用者名稱>.github.io**，檢視上傳的網頁。如果頁面變成了之前本地除錯時的樣子，說明上傳以及完成了。沒變的話檢視一下上傳時命令列視窗的資訊有沒有錯誤資訊，沒有的話清除一下瀏覽器快取試試。 到此，基本的個人部落格搭建就完成啦，以為預設的主題不好看，所以後續我會將部落格美化教程發出來。 最後，歡迎大家來我的個人部落格踩踩喲！ # --- [晚楓^-部落格]( https://white_maple.gitee.io) --- #