使用Hexo&GitHub免費快速搭建博客教程

通過兩天的折騰，終於搞定了屬於本身的第一個博客的搭建，在此期間踩了許多坑，現總結一下幫助各位可以更方便去搭建本身的博客。先貼上成果 拾憶的博客

百度參考了各路大神的博客文章最後進行的總結，望各路大神不要介意哦~

由於本人長期使用mac電腦，故本篇文章只在mac系統的基礎上去實現功能，使用Windows系統須要自行參考，其原理是同樣的。

這是本人寫的第一篇文章，可能會看到和其餘的許多文章有類似之處，請你們自動忽略(￣▽￣)~* ，全文純手打，旨在幫助你們更方便的實現搭建過程，你們不喜勿噴哦~

1、引子

1.搭建博客的緣由

• 曾經用過印象筆記，有道筆記等工具來記錄文章，但用起來老是感受有或多或少的問題，不如用博客看的更直觀
• 能夠隨心發表，改造外觀，功能
• 擁有一個本身的博客網站，感受更爽
• 但願更多的人能夠看到本身寫的文章

2.整個過程使用的時間

• 最開始百度參考了各路大神的文章，每篇文章都會有或多或少的缺陷，本身又踩了許多坑才完成
• 用了大概兩天的時間，完成了博客的搭建和主題的修改

3.環境配置

• mac系統，sublime編輯器 （暫時使用到的）
• github帳號，hexo框架配置，next主題 （下面會提供配置方式）

4.搭建方式

• 使用hexo框架進行網站的構建，而後部署到免費的github上

2、GitHub配置

1. 登錄 github.com/ ，沒有帳號的就去註冊一個，記住本身的用戶名

2. 主頁中點擊右上角本身的圖標，點擊your profile

   

3. 點擊repositories，新建一個

   

4. Repository name （填本身的名字） http://yourname.github.io(yourname與你的註冊用戶名一致,這個就是你博客的域名了),下圖中報錯是由於我已經用過了這個名字，你們填寫本身的名字不會遇到這個問題，而後點擊create repository進行下一步

   

5. 點擊本身的這個repository，而後找到settings

   

6. 下拉找到GitHub Pages, 其中上面紅框中的即爲你的博客地址，下面紅色框中能夠進去選擇本身的主題樣式, 此時github中的基本配置已經完成

   

   如第一次進入，可能會不顯示博客地址，以下圖，則能夠先選擇github自帶的主題樣式，Choose a theme 按鈕，再回來後就可以看到了(注意：在save按鈕左邊那項要顯示爲master branch才表示正確)

   

3、環境配置

1. 安裝 Node.js 安裝完成後終端輸入

   node -v

   npm -v

   查看版本號，如存在則代表配置成功

2. mac系統自帶Git環境，Windows用戶須要自行下載Git

3. 安裝完成後，經過git命令查看本身的用戶名和郵箱是否和本身github中的一致，如不一致請自行更改，如查詢到多個用戶名須刪除沒用的用戶名，如查詢後沒有任何反應則代表尚未配置用戶名，用下面的修改或者添加用戶名命令便可，如提示其餘之類的可先執行命令 git config，而後再執行如下命令便可成功,附查看和更改命令（其餘命令可自行百度查找）：

   查看用戶名： git config --global user.name

   查看郵箱： git config --global user.email

   刪除用戶名 git config --global --unset user.name 要刪的用戶名

   增長用戶名 git config —global —add user.name 新加的用戶名

   修改用戶名 git config --global user.name 用戶名

   修改郵箱 git config --global user.email 郵箱

4. 終端中輸入 npm install -g hexo-cli(如提示無權限即下圖紅色框中permission denied，則輸入sudo npm install -g hexo-cli,後輸入電腦密碼enter便可)

   

5. 這個過程會比較久，若是出現WARN錯誤能夠忽略。我記得當時，每次都會出現說有一個依賴包已經不更新，這個不影響。執行完成後，使用 hexo -v 查看是否安裝成功，以下圖所示，即代表已經成功安裝上

   

4、網站代碼以及設置

1. 在桌面上建立一個文件夾，名字自定義如：hexo,終端cd 進入hexo文件夾

2. 輸入hexo init blog (如出現warn錯誤可忽略，不影響)

   • _config.yml, 網站的配置信息，能夠在此配置中配置大部分的參數
   • source，資源文件夾是存放用戶資源的地方。除 posts 文件夾以外，開頭命名爲 (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析並放到 public 文件夾，而其餘文件會被拷貝過去
   • themes，主題 文件夾。Hexo 會根據主題來生成靜態頁面。

3. 等待提示Start blogging with Hexo，就是安裝成功了

4. 文件夾中自帶一篇文章「Hello World」

5. 命令行cd進入blog目錄下

6. 輸入hexo g，生存靜態文件

7. 輸入hexo s，啓動服務器。默認狀況下，訪問網址爲： http://localhost:4000/ 此時服務開啓，如需關閉Ctrl+ C

   注：hexo s 命令開啓的是本地服務，開啓後，則可使用上述地址訪問，如關閉，則上述地址訪問不到，本功能旨在用來檢查修改的配置是否成功，如打開查看後發現沒有問題則能夠部署到服務器上，以後再用你的博客地址訪問便可看到最新的設置效果。

   如上傳服務器以後當即查看博客可能沒有當即變化，可嘗試多刷新幾回或從新打開瀏覽器便可

8. 新打開一個終端，輸入：ssh-keygen -t rsa -C "Github的註冊郵箱地址"

   一路enter過來，中間有的問題是選y/n的，選y便可，最後獲得信息中找到這句話： Your public key has been saved in /Users/zjjk/.ssh/id_rsa.pub.

   找到該文件(上句中in 後面即爲該文件的地址)，打開（使用sublime text或其餘編輯器）,Ctrl + a複製裏面的全部內容，而後進入Sign in to GitHub：github.com/settings/ss…

   一步步操做：New SSH key ——Title：blog —— Key：輸入剛纔複製的—— Add SSH key

   注：此過程是生成ssh key，如後續再次執行此命令時，則須要把新生成的SSH key再配置到github中，由於新生成的SSH key會覆蓋以前的，如不去github中替換會致使後續上傳git服務器過程當中失敗

5、博客網站配置信息

1. 進入blog文件夾，用sublime打開_config.yml文件，此文件爲博客的配置信息，在此修改參數。（特別注意：每一個參數的後面都要加個空格）

2. 按照本身的信息進行基礎設置

   title: 拾憶的博客

   subtitle: 小白的技術成長之路

   description: 小白的技術成長之路

   author: 拾憶

   language: zh-CN

   timezone: Asia/Shanghai

3. 在_config.yml文件中找到 deploy配置處（通常在最下面，默認的顯示可能不全，需按照下方示例本身添加）, username替換成你本身的username, repository的地址爲你在github中建立的那個項目的地址，可去github中複製

   

   deploy: 
   
    	type: git
   
    	repository: git@github.com:username/username.github.io.git
   
    	branch: master
   複製代碼

   保存完畢。

4. 各種主題的配置信息，要在主題文件夾內的_config.yml上進行配置！後續會以next主題爲例進行示範，此處可忽略。

6、發表文章

1. 終端 cd 進入blog文件夾下，輸入hexo new "Hello blog"(Hello blog爲你的文章名，可自定義)

2. 打開返回的文件地址，打開文件（也可在blog文件夾下 source/_posts/Hello blog.md 中找到你剛纔建立的文件）

3. 文章內容採用Markdown語法進行編輯，須要用相關軟件才能打開這個文件，本人使用的軟件爲MacDown mac版, 你們可根據本身習慣下載喜歡的工具(附：Markdown語法使用說明)

4. 打開文件編輯

   ---
    title: Hello blog
   
    date: 
   
    ---
   複製代碼

   只輸入title字段便可，後續其餘字段可根據主題再添加（注意：title後面需加空格）

5. 打開終端執行如下步驟:

   cd 進入blog 文件夾
    
    $ hexo clean
    INFO  Deleted database.
    INFO  Deleted public folder.
    
    $ 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.
   複製代碼

   此處三步是進行本地配置完成後，在本地打開查看剛剛修改的配置是否修改爲功，三處命令也可這樣寫 hexo clean hexo g hexo s

6. 打開 http://localhost:4000/後檢查，如沒有任何問題能夠部署到服務器上

   $ hexo deploy
    INFO  Deploying: git
   複製代碼

   此時可能會出現 error deployer not found:git 的錯誤，輸入如下代碼

   npm install hexo-deployer-git --save(如提示無權限錯誤則輸入sudo npm install hexo-deployer-git –-save，後輸入電腦密碼enter便可)

   再次執行 hexo deploy

   其中，可能會出現github登陸界面，正常填寫就行(這裏我一直登錄着github，暫時沒有遇到)

   完成，終端可Ctrl+C關閉本地服務，而後打開 username.github.io 便可訪問本身的博客（username爲本身的github的用戶名）

7、主題設置

主題設置中，最好玩的就是嘗試各式各樣的主題啦！因本人喜歡next主題的風格，因此會在下篇文章中以next主題爲例，走一遍發佈文章和配置博客各類信息的流程，下面是其餘的一些主題，你們可根據本身喜歡的樣式去選擇主題下載配置，通常的主題配置都會在其相應的github中說明

官方hexo主題大全，裏面有許多主題都能嘗試一下。

在這裏推薦幾個主題：

• next官網,Git(我用的就是這個啦，十分推薦！）
• Material官網，Git

  1. 主題配置，首先要下載主題，到相應的Git連接

  2. 下載完之後將文件解壓縮後放到blog中的themes文件夾中

  3. 修改主題文件夾名稱，將其改成 next(名稱爲你的主題的名稱，可自定義，無硬性要求，下以next爲例) 。 而後打開配置文件（/blog/_config.yml），找到 theme 字段，並將其值更改成 next(你剛纔自定義的名稱, 注意theme後加空格)，保存關閉

     

  4. 接下來，打開主題相應的博客中的文檔說明，對比「主題」中的_config.yml（ /blog/themes/next/_config.yml ），針對本身須要的功能進行相關設置

  5. 有關設置中的圖片，統一放到主題文件夾(/next/)內\source\img。在設置中，用」/img/xigua.png」相似格式進行圖片設置。

  6. 設置時切記 : 後面要加一個空格。這個坑有點惱人~

  7. 最後再從新進行一次，hexo clean,hexo g,hexo s,hexo deploy 整個博客就完成主題修改啦

8、總結

• 用了兩天的時間，完成的博客的搭建，又花了一天時間來編寫此篇文章，全文純手打，寫到這裏真的好累啊~

• 看着別人的文章一路搭建下來中間仍是會遇到不少問題，因而各類百度解決，故在此奉上此文，我遇到的坑這裏都明確的解決了，你們也同樣，可能會遇到各類不一樣的問題，百度去一個一個的解決就行了（萬能的百度啊~~~）

• 編寫文章用了一遍Markdown的語法，感受還能夠

• 拾憶的博客

• 後續會陸續編寫更多的文章，歡迎你們訂閱哦~