使用Hexo&GitHub免費快速搭建部落格教程

拾憶sky發表於2018-03-05
HexoGithub

經過兩天的折騰，終於搞定了屬於自己的第一個部落格的搭建，在此期間踩了許多坑，現總結一下幫助各位能夠更方便去搭建自己的部落格。先貼上成果 拾憶的部落格

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

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

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

一、引子

1.搭建部落格的原因

  • 曾經用過印象筆記，有道筆記等工具來記錄文章，但用起來總是感覺有或多或少的問題，不如用部落格看的更直觀
  • 可以隨心發表，改造外觀，功能
  • 擁有一個自己的部落格網站，感覺更爽
  • 希望更多的人可以看到自己寫的文章

2.整個過程使用的時間

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

3.環境配置

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

4.搭建方式

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

二、GitHub配置

  1. 登陸 github.com/ ，沒有賬號的就去註冊一個，記住自己的使用者名稱

  2. 主頁中點選右上角自己的圖示，點選your profile

    picture1

  3. 點選repositories，新建一個

    picture2

  4. Repository name （填自己的名字） http://yourname.github.io(yourname與你的註冊使用者名稱一致,這個就是你部落格的域名了),下圖中報錯是因為我已經用過了這個名字，大家填寫自己的名字不會遇到這個問題，然後點選create repository進行下一步

    picture3

  5. 點選自己的這個repository，然後找到settings

    pictures4

  6. 下拉找到GitHub Pages, 其中上面紅框中的即為你的部落格地址，下面紅色框中可以進去選擇自己的主題樣式, 此時github中的基本配置已經完成

    picture5

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

    picture7

三、環境配置

  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即可)

    picture8

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

    picture9

四、網站程式碼以及設定

  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伺服器過程中失敗

五、部落格網站配置資訊

  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中複製

    gif1

     deploy: 

 	type: git

 	repository: git@github.com:username/username.github.io.git

 	branch: master
複製程式碼

    儲存完畢。

  4. 各類主題的配置資訊，要在主題資料夾內的_config.yml上進行配置！後續會以next主題為例進行示範，此處可忽略。

六、發表文章

  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的使用者名稱）

七、主題設定

主題設定中，最好玩的就是嘗試各式各樣的主題啦！因本人喜歡next主題的風格，所以會在下篇文章中以next主題為例，走一遍釋出文章和配置部落格各種資訊的流程，下面是其他的一些主題，大家可根據自己喜歡的樣式去選擇主題下載配置，一般的主題配置都會在其相應的github中說明

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

在這裡推薦幾個主題：

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

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

    2. 下載完以後將檔案解壓縮後放到blog中的themes資料夾中

    3. 修改主題資料夾名稱，將其改為 next(名稱為你的主題的名稱，可自定義，無硬性要求，下以next為例) 。 然後開啟配置檔案（/blog/_config.yml），找到 theme 欄位，並將其值更改為 next(你剛才自定義的名稱, 注意theme後加空格)，儲存關閉

      picture6

    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 整個部落格就完成主題修改啦

八、總結

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

  • 看著別人的文章一路搭建下來中間還是會遇到很多問題，於是各種百度解決，故在此奉上此文，我遇到的坑這裡都明確的解決了，大家也一樣，可能會遇到各種不同的問題，百度去一個一個的解決就好了（萬能的百度啊~~~）

  • 編寫文章用了一遍Markdown的語法，感覺還可以

  • 拾憶的部落格

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

相關文章