使用Hexo＋Github Pages 來搭建免費的專屬博客

使用Hexo＋Github Pages 來搭建免費的專屬博客

1、簡介

Hexo

Hexo是一個開源的靜態博客框架,基於node.js開發,做者是臺灣大學生tommy351。

Github

若是是程序員確定知道，Github是開源代碼庫以及版本控制系統。在GitHub，用戶能夠十分輕易地找到海量的開源代碼。

Github Pages

Github Pages能夠理解爲用戶編寫的、託管在github上的靜態網頁，你只需將你的改動提交到Github，就能夠實現更改你的網頁。

2、基礎環境配置

安裝Node

從Node.js官網下載對應的版本安裝便可。

安裝Git

從Git官網下載對應版本安裝便可。

安裝Hexo

Node和Git都安裝完畢後，在任意路徑下新建一個文件夾(隨意命名)，如Hexo，做爲你的博客專屬路徑，用於存放Hexo相關配置信息，以後終端進入到此路徑並分別執行以下命令來安裝和初始化Hexo

sudo npm install-g hexo
hexo init

至此，可使用Hexo了，咱們來實驗一下。

分別執行以下命令來生成一個靜態網頁並啓動本地服務來預覽你的初始博客，

hexo generate
hexo server

或者簡寫

hexo g
hexo s

初始化後文件結構如圖:

如圖，啓動本地服務後，便可在瀏覽器輸入http://localhost:4000 來預覽博客啦！

3、配置GitHub

首先你得有個Github賬號，到https://github.com 上註冊個賬號，至於如何註冊，相信你會的。

綁定Git & Github

//Github用戶名
git config --global user.name "ConnorLin"
//註冊Github的郵箱
git config --global user.email  "your_email@example.com"

建立博客倉庫

註冊賬號後，點➕來建立一個repository，該倉庫必須以 「your_user_name.github.io」 的格式命名

配置SSH Key

首先查看本地是否已經有SSH Key, 終端輸入以下命令：

cd ~/.ssh;ls

若是存在id_ras.pub，說明已經有SSH Key，不然須要從新建立。
使用以下命令生成密鑰

ssh-keygen -t rsa -C "your_email@example.com"

按提示分別輸入Key文件保存路徑和密碼(能夠爲空)，完成會有以下提示即表示建立成功

The key fingerprint is:
01:0a:f6:3c:ca:95:d6:17:a1:7d:f0:65:9d:f0:a2:db your_email@example.com

將SSH Key添加到ssh-agent:

eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa

添加SSH Key到Github帳戶

一、複製ssh key內容

pbcopy < ~/.ssh/id_rsa.pub

二、點擊Github帳戶頭像，點擊設置進入Github設置

三、點擊左邊的SSH and GPG Keys

四、添加SSH Key, 填寫剛剛複製的密鑰內容

測試SSH鏈接

ssh -T git@github.com

若是有以下提示：

The authenticity of host 'github.com (192.30.252.1)' can't be established.
RSA key fingerprint is nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.
Are you sure you want to continue connecting (yes/no)?

輸入yes便可

Hi username! You've successfully authenticated, but GitHub does not provide shell access.

4、關聯Hexo 和 Github

配置Hexo

進入博客根路徑，打開_config.yml，拉到最後，修改以下：

//注意冒號後面有空格
deploy:
  type: git
  repository: git@github.com:ConnorLin/Connorlin.github.io.git
  branch: master

安裝Hexo git插件

npm install hexo-deployer-git --save

將博客部署到Github

hexo deploy

至此，在瀏覽器輸入博客地址 http://connorlin.github.io 就能夠訪問博客啦！

5、Hexo經常使用命令

一、新建文章

hexo new [template] "Title"  //新建標題爲Title的文章

其中template是可選參數，我稱之爲文章模板，默認值爲post。scaffolds路徑下的文件就是模板文件，你能夠新建或編輯現有模板。
執行命令後，在source/_posts/下會生成Title.md文件，固然，也能夠手動建立後綴爲「.md」的文件，並用喜歡的markdown編輯器編輯。

二、新建頁面

heox new page "Page Title"  //新建頁面

三、生成靜態頁面至public目錄

hexo generate   //生成靜態頁面

四、本地預覽

hexo server //啓動本地服務，Ctrl＋C關閉

五、部署到Github

hexo deploy     //將博客部署到Github

六、清理已經生成的靜態文件

hexo clean

6、美化

美化天然離不開主題，Hexo主題花樣繁多，能夠在Hexo_Themes找到你中意的主題。
試過幾種主題，我的比較中意Yilia和Next這兩款主題，本文主題使用的是Next。
Next有官方教程，講解很是詳細，包括添加評論、搜索等包羅萬象，此處再也不贅述。
至於如何應用主題，步驟大同小異，此處以next爲例：

//進入博客根目錄
$ cd your-hexo-site
//從Github上克隆主題到你博客theme裏
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

而後打開根目錄下的_config.yml文件，將theme的值改成主題名字：

theme: next

配置完畢，此時能夠啓動本地服務http://0.0.0.0:4000/ 來預覽主題了。

7、寫做

Markdown

寫博客固然用Markdown，目前mardkdown工具備不少，找到適合本身的仍是要花點時間的，參考好用的Markdown編輯器一覽找到你中意的吧。

做爲一名程序猿，固然選擇Sublime Text來裝bility啦！

一、安裝Package Control插件
　　詳見官方教程

二、打開Package Control
　　按快捷鍵 Shift ＋ command(Ctrl) ＋ P -> 輸入install -> 選擇Install Package
稍等一會(左下角進度)，就能夠安裝你想要的插件啦！

三、安裝插件
　　輸入插件名，回車便可安裝，插件請參考Sublime插件：Markdown篇。

四、開始用Sublime Text寫博客吧～

圖牀

開始寫博客才知道圖牀，爲了博客穩定，須要選擇一個可靠且免費的圖牀，推薦七牛，有10G免費空間，僅作圖牀足矣。可是七牛如今註冊須要實名，這點比較使人糾結。
因此我更推薦以強大的Github爲免費圖牀，雖然麻煩點，但穩定安心！！！
一、添加博客圖片專用Repository，如BlogImages，這樣有利於維護；
二、發佈博客前，將博客中用到的圖片push到BlogImages；
三、從Github裏獲取圖片地址，如何獲取我想你會的；
四、將地址中的blob替換爲raw，必須替換，不然沒法顯示圖片

如  
「https://github.com/ConnorLin/BlogImages/blob/master/2016:04:02/hexo_server.png」  
改成  
「https://github.com/ConnorLin/BlogImages/raw/master/2016:04:02/hexo_server.png」

五、將修改後的地址用於博客便可，大功告成！

至此，博客基礎框架搭建完畢，Enjoy it！

參考資料

一、hexo你的博客
二、HEXO+Github,搭建屬於本身的博客
三、Github Help
四、小白獨立搭建博客–Github Pages和Hexo簡明教程
五、Sublime插件：Markdown篇
六、遷移博客圖片者的福音：使用GitHub作免費不限流量圖牀

原創文章，歡迎轉載，轉載請註明出處

個人簡書帳號是ConnorLin，歡迎光臨！

歡迎關注個人微信