使用Hexo和GitHub Pages搭建免費獨立博客

摘要:這是一篇使用GitHub Pages和Hexo搭建免費獨立博客的總結。

我在這里寫下長篇大論,只希望小白們能更快速入門。一天搭建出屬于自己的個人獨立博客,我將會通過 安裝流程主線+優質文章 作為參考。從我個人接觸到成功搭建博客,走了很多彎路,網上的資料更是琳瑯滿目無從下手,希望通過本教程給想搭建個人博客的人一個敢于嘗試的機會。我會將這篇教程寫仔細,會將我出現過的問題給予解決方法。大家有問題可以留言,我會盡量幫助大家解決。

先給大家預覽一下我的博客的最終版,這是我的預覽地址https://sylujia.github.io/

001.png

前言

為什么選擇GitHub Pages?

  • 無需購置服務器,目前的blog掛載在Github Pages,免服務器費的同時還能做負載均衡;
  • github pages有300M免費空間,資料自己管理,保存可靠;
  • 學著用github,享受github的便利,上面有很多大牛,眼界會開闊很多;
  • 順便看看github工作原理,最好的團隊協作流程;
  • github是趨勢;
  • 就算github被墻了,我可以搬到國內的gitcafe中去。

準備工作

相信自己,敢于面對,過程并不是很難。

Nodejs 環境包

因為 Hexo 是基于 Node.js 的第三方模塊,所以缺少 Node.js 不可。訪問 Node.js官網下載適合自己系統的 Node.js 安裝包。目前最新的版本為 v6.5.0。

(注:至于安裝過程和環境變量配置請參考菜鳥教程-Node.js安裝配置

Git工具包

如果之后你需要安裝一些 Hexo 的主題和插件,Git 是最好的下載方式。因為好多主題都被放在了 Github 上,你只需要敲幾個字符就可以下載。

(注:寧浩網之前介紹過Git的使用方法,安裝過程及簡單使用請見這里

Git與GitHub區別

這里,我們要區分清楚git與github。
git是一個版本控制的工具,而github有點類似于遠程倉庫,用于存放用git管理的各種項目。

與GitHub建立聯系

git安裝好以后執行以下步驟:

  1. 從程序目錄打開 "Git Bash" ,或者直接用git shell,github自帶的工具
  1. 鍵入命令:ssh-keygen -t rsa -C "email@email.com"
    "email@email.com"是github注冊賬號郵箱地址
  2. 提醒你輸入key的名稱,你可以不用輸入,直接3個回車,就OK了;
  3. 在C:\Documents and Settings\Administrator\下產生兩個文件:id_rsa和id_rsa.pub
  4. 用記事本打開id_rsa.pub文件,復制內容,在github的網站上找到ssh密鑰管理頁面,添加新公鑰 。
  5. 在git bash中輸入ssh -T git@github.com命令,出現Hi sylujia! You've successfully authenticated表示成功。

設置用戶信息

現在你已經可以通過 SSH 鏈接到 GitHub 了,還有一些個人信息需要完善的。

Git 會根據用戶的名字和郵箱來記錄提交。GitHub 也是用這些信息來做權限的處理,輸入下面的代碼進行個人信息的設置,把名稱和郵箱替換成你自己的,名字必須是你的真名,而不是GitHub的昵稱。

$ git config --global user.name "aierui"http://用戶名
$ git config --global user.email "imland@outlook.com"http://填寫自己的郵箱

開始搭建

因為最終博客是要部署到github上的,這里我首先講解github建立倉庫,然后講解hexo安裝。為了方便大家一次部署成功并且考慮到以后如果大家換電腦或者重裝系統后還能夠修改以前的博客,請按照我的解決方案進行,這里大家不懂也沒事,照著來就行,我會在文章末尾優化部署與管理中詳解。

創建GitHub Pages 倉庫

在自己的GitHub賬號下創建一個新的倉庫,命名為username.github.io
(username是你的賬號名)。在這里,要知道,GitHub Pages有兩種類型:User/Organization Pages 和 Project Pages,而我所使用的是User Pages。
簡單來說,User Pages 與 Project Pages的區別是:

  • User Pages 是用來展示用戶的,而 Project Pages 是用來展示項目的。
  • 用于存放 User Pages 的倉庫必須使用username.github.io的命名規則,而 Project Pages 則沒有特殊的要求。
  • User Pages 將使用倉庫的 master 分支,而 Project Pages 將使用 gh-pages 分支。
  • User Pages 通過 http(s)://username.github.io 進行訪問,而 Projects * Pages通過 http(s)://username.github.io/projectname 進行訪問。

** 這一步很關鍵 **
創建兩個分支:master 與 hexo。** 設置hexo為默認分支 **(因為我們只需要手動管理這個分支上的Hexo網站文件)

到這為止,我們的github倉庫已經建立好了,我們馬上就能見到成果了,下面我們開始建站。

hexo介紹

Hexo 是一個輕量的靜態博客框架。通過Hexo可以快速生成一個靜態博客框架,僅需要幾條命令就可以完成,相當方便。

而架設Hexo的環境更簡單了 不需要 lnmp/lamp/XAMPP 這些繁瑣復雜的環境 僅僅需要一個簡單的http服務器即可使用 或者使用互聯網上免費的頁面托管服務

比如本人的這個博客 就是托管于 GitHub Pages服務上

hexo安裝

安裝Hexo相當簡單。在安裝之前,必須檢查電腦中是否已經安裝下列應用程序:

如果您的電腦中已經安裝上述必備程序,那么恭喜您!接下來只需要使用 npm 即可完成 Hexo 的安裝。打開git bash執行以下命令:
$ npm install -g hexo-cli
這樣hexo就已經安裝好了。

使用hexo建站

安裝完后,在你喜歡的文件夾內(我的是根目錄)(例如H:\),點擊鼠標右鍵選擇Git bash,輸入以下指令(填自己的地址):
git clone git@github.com:sylujia/sylujia.github.io.git

002.png

該命令會把你的博客倉庫同步下來,然后cd到你的倉庫文件夾下面依次執行以下命令:

1、$ hexo init

該命令會在目標文件夾內建立網站所需要的所有文件。接下來是安裝依賴包:

2、$ npm install

這樣,我們就已經搭建起本地的Hexo博客了。可以先執行以下命令(在對應文件夾下),然后再瀏覽器輸入localhost:4000查看。

3、$ hexo generate
4、$ hexo server

這個博客只是本地的,別人是瀏覽不了的,之后需要部署到GitHub上。

相關資料

部署博客到GitHub上

部署其實很簡單,只要改一下配置文件,執行幾條命令就行了,為了以后的方便,現在麻煩了一點,大家跟著做就行了,具體原因也在配置管理與優化里有講到。

配置站點文件

我們繼續使用上面的文件夾H:\sylujia.github.io(也可以新建一個文件夾重新生成),然后編輯該文件夾下的_config.yml(這是站點配置文件)
默認生成的_config.yml:

# Deployment 
## Docs: http://hexo.io/docs/deployment.html 
deploy:   
  type:

修改后的_config.yml:(也是填入自己的ssh地址)

deploy:
  type: git
  repository: git@github.com:sylujia/sylujia.github.io.git
  branch: master

這里解釋一下前面為什么建立兩個分支master和hexo,為了管理方便,以后master分支用來發布網站(一會再說怎么發布),hexo分支用來存放Hexo網站文件。

發布

為了能夠使Hexo部署到GitHub上,需要安裝一個插件:(在項目目錄下執行命令)
$ npm install hexo-deployer-git --save
然后,執行下列指令即可完成部署:(以后發布也按照這三條命令執行)

$ hexo clean #清空public文件夾下生成的靜態文件和db.json文件
$ hexo generate #重新生成靜態文件和db.json
$ hexo deploy #按照站點配置文件部署到github上

之后,可以通過在瀏覽器鍵入:username.github.io進行瀏覽,開心吧~

提交Hexo網站文件到hexo分支

由于上面執行了hexo init命令,所以要重新關聯遠端庫
首先在項目文件夾下執行以下命令:

$ git init #初始化為一個git目錄
$ git remote add origin git@github.com:sylujia/sylujia.github.io.git #使用你自己的地址關聯
$ git pull #pull一下你的遠端庫

此時你應該在hexo分支下,如下:
$ H:\sylujia.github.io (hexo) (hexo-site@0.0.0)
如果不是,執行以下命令切換到hexo分支:
$ git checkout hexo
然后執行以下命令提交網站相關文件:

$ git add . #添加所有文件到暫存區
$ git commit -m "提交信息"     #提交到本地倉庫
$ git push origin hexo  #把本地庫push到遠端庫的hexo分支

提交后去github上查看是否成功,這是我的github地址,看看是否一樣。

更換主題

我使用的是next主題,大家喜歡也可以去我的github上fork一下,然后在這基礎上修改,大家也可以找自己喜歡的主題來換。
如果想要使用其他主題,可以使用git clone將別人的主題拷貝到H:\sylujia.github.io\themes下,然后將_config.yml中的theme: landscape改為對應的主題名字。
下面以切換next主題為例來講一下具體如何操作,同樣也是在項目文件夾下執行以下命令:

$ git clone https://github.com/iissnan/hexo-theme-next.git themes/next

然后在站點配置文件_config.yml中的theme: landscape改為theme: next,重新發布一下就完成了。

相關資料

優化部署與管理

概述

Hexo部署到GitHub上的文件,是.md(你的博文)轉化之后的.html(靜態網頁)。因此,當你重裝電腦或者想在不同電腦上修改博客時,就不可能了(除非你自己寫html)。
其實,Hexo生成的網站文件中有.gitignore文件,因此它的本意也是想我們將Hexo生成的網站文件存放到GitHub上進行管理的(而不是用U盤或者云備份啦。)這樣,不僅解決了上述的問題,還可以通過git的版本控制追蹤你的博文的修改過程,是極贊的。
但是,如果每一個GitHub Pages都需要創建一個額外的倉庫來存放Hexo網站文件,我感覺很麻煩(10個項目需要20個倉庫)。
所以,我利用了分支!!!
簡單地說,每個想建立GitHub Pages的倉庫,起碼有兩個分支,一個用來存放Hexo網站的文件,一個用來發布網站。
下面以我的博客作為例子詳細地講述。

我的博客搭建流程

1、創建倉庫,sylujia.github.io;
2、創建兩個分支:master 與 hexo;
3、設置hexo為默認分支(因為我們只需要手動管理這個分支上的Hexo網站文件);
4、使用git clone git@github.com:sylujia/sylujia.github.io.git拷貝倉庫;
5、在本地sylujia.github.io文件夾下通過Git bash依次執行npm install hexo-cli、hexo init、npm install 和 npm install hexo-deployer-git(此時當前分支應顯示為hexo);
6、修改_config.yml中的deploy參數,分支應為master;
7、使用git init 、
git remote add origin git@github.com:sylujia/sylujia.github.io.git以及git pull命令重新關聯遠端庫。
8、使用git checkout hexo命令切換到hexo分支然后依次執行git add .、git commit -m “…”、git push origin hexo提交網站相關的文件;
9、執行hexo generate -d生成網站并部署到GitHub上。

這樣一來,在GitHub上的sylujia.github.io倉庫就有兩個分支,一個hexo分支用來存放網站的原始文件,一個master分支用來存放生成的靜態網頁。完美!

我的博客管理流程

日常修改

在本地對博客進行修改(添加新博文、修改樣式等等)后,通過下面的流程進行管理:
依次執行git add .、git commit -m “…”、git push origin hexo指令將改動推送到GitHub(此時當前分支應為hexo);
然后才執行hexo generate -d發布網站到master分支上。
雖然兩個過程順序調轉一般不會有問題,不過邏輯上這樣的順序是絕對沒問題的(例如突然死機要重裝了,悲催….的情況,調轉順序就有問題了)。

本地資料丟失

當重裝電腦之后,或者想在其他電腦上修改博客,可以使用下列步驟:

1、使用git clone git@github.com:sylujia/sylujia.github.io.git拷貝倉庫(默認分支為hexo);
2、在本地新拷貝的sylujia.github.io文件夾下通過Git bash依次執行下列指令:npm install hexo-cli、npm install、npm install hexo-deployer-git(記得,不需要hexo init這條指令)。

結尾

在網上看了很多資料,總結了很多資料,好累(-.-)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容