HEXO(Next主題)+Github+Git部署一個屬于自己的博客教程(一)

基于HEXO+Github+Git搭建的博客終于大功告成了,在我搭建這個博客的過程中,走了很多彎路,其中也看了很多的博文和教程,但眾說紛紜,所以有必要盡快把我搭建博客的整個過程記錄下來(免得忘記),一方面是為了讓瀏覽到此篇文章的小伙伴少走一些彎路,另一方面是希望把整個過程記錄下來,以至于下一次搭建博客,會節省一些時間。補充一下,整個搭建過程都是基于windows的。下面我們就開始吧!

1、環境搭建

1.1安裝node框架

HEXO是基于node框架的,所以我們首先要下載安裝node,下載地址[node.js官網]< https://nodejs.org/en/ >

推薦下載長期支持版(即LTS版),因為當前發布版雖然含新功能但不穩定,而且奇數版在當前版本發布之后六個月將變為不支持狀態(node.js版本不得低于8.6建議10.0及以上版本)

安裝完成后win+R啟動命令行,輸入node -v,來檢測安裝是否成功。如果返回如下圖所示,證明你安裝成功了

1.2注冊Github賬號

Github推出的Github Pages服務可以很方便的建立一個屬于我們自己的個人博客

進入[Github 網站],按照提示進行注冊然后登陸(已經注冊過的大佬繞過)

點擊右上角加號--->new repository,新建一個倉庫,這個倉庫就是用來存放博客的地方

接著進入到創建倉庫界面,Repository name就是使用瀏覽器訪問你的博客的地址

1.3安裝Git

為了能夠把自己所寫的博客上傳到github上面去,我們使用分布式版本控制工具——[git官網]< https://git-scm.com/ > 進入官網后,直接下載安裝最新版就可以了。安裝完成之后在桌面右鍵會有一個Git Bash。類似于Linux終端,可以模擬Linux下的終端進行操作。可以在命令提示符中輸入git --version打開之后,像下圖這樣

1.4安裝HEXO

HEXO的安裝在它的[官方文檔]< https://hexo.io/zh-cn/docs/ >中說的很詳細,下面我就簡單的介紹一下HEXO的安裝

1.4.1新建一個用來存放博客的文件夾

在合適的位置新建一個用來存放今后所寫博客的文件夾,比如我的存放在E:\my blog\目錄下

創建成功后進入該文件夾,在該目錄下右鍵打開Git Bash Here,啟動Git控制臺(后面所有的命令行操作都用Git,不用windows自帶的命令提示符,即CMD),輸入npm i hexo-cli-g安裝HEXO,會出現幾個報錯,但是不用理會

安裝完成后輸入hexo -v,出現下圖界面,表示安裝成功

隨后,初始化文件夾,仍然在該命令行窗口執行hexo init 新建的文件夾名

接著,輸入npm install安裝所需要的組件。在剛剛新創建的文件夾下就會產生文件目錄

_config.yml文件是網站的配置文件,可以配置大部分參數,也是最重要的文件

package.json文件是應用程序的信息

source是資源文件夾,是用來存放用戶的資源,如用戶每次編寫的博客、標簽頁面、分類頁面

themes是主題文件夾,HEXO會根據主題生成不同的靜態頁面

scaffolds是模板文件夾,新建的文章會根據模板來建立文件

2、開始搭建

2.1部署到本地

其實在環境配置完成之后,就已經在本地生成了博客主頁。仍然是在剛剛的Git命令行中執行hexo g(hexo generation,生成靜態頁面),然后執行hexo s(hexo server 啟動本地服務,進行文章預覽調試)。然后瀏覽器輸入 http://localhost:4000 就可以看到你博客的效果啦,不過這是本地調試用,其他人是看不到的。(調試完畢后記得 control + C 關閉本地端口,不然下次是進不去的)? 看下圖:

這是安裝HEXO的默認主題,在之后的博文中,我會分享如何更改主題

2.2部署到Github

2.2.1部署簽名

先使用下面的命令對Git進行初始化配置,即設置簽名,作用是區別不同開發人員身份。這里郵箱地址不一定非得是注冊Github的郵箱地址,任意郵箱即可,作用不是很大。

$ git config --global user.name "your name"

$ git config --global user.email "your e-mail address"

2.2.2配置SSH

? 打開Git Bash,執行下面的命令生成SSH訪問私鑰及公鑰?

$ ssh-keygen -t rsa -C "email@email.com"

當提示輸入的時候,不用管,一直回車就可以。

然后/c/users/你的電腦賬戶名/.ssh文件下會生成兩個文件

然后打開你的Github,點擊右上角頭像-->Setting-->SSH keys。

然后點擊New SSH Key新建一個SSH key。Tittle可以自己起。然后將id_rsa.pub

文件中的內容復制粘貼到Key下面。然后用下面的命令測試是否連接到Github

$ ssh -T git@github.com

如果出現下圖所示內容則證明連接成功

2.2.3設置deploy參數

打開HEXO主文件夾下的_config.yml(鼠標移動到該文件上右鍵,選擇opendlg打開),設置底部的deply參數,下面是我的設置。type和branch和我設置的一樣就行

其中repo在Github中進行復制,如下圖:

deploy:

? type: git

? repo: git@github.com:Jerenliu/jerenliu.github.io.git

? branch: master

? 注意:配置的時候要嚴格注意格式,不然后面會出錯(type,repo,branch后面的冒號統一用英文的,冒號后面必須有一個空格。type,repo,branch前面要有兩個空格,并對齊)。后面進行配置文件都需要遵循這種格式?

2.3驗證

? 以上配置完成后保存 然后回到終端執行npm install hexo-deployer-git --save安裝一個插件,這樣才能將你寫好的文章部署到github服務器上并讓別人瀏覽到。安裝完成后在終端中依次執行如下代碼

? hexo clean? ? 作用:清理緩存

? hexo generate? ? 作用:進行渲染? 簡寫: hexo g

調試完畢后使用? hexo deploy? ? 作用:部署到git服務器? 簡寫: hexo d?

然后就能在瀏覽器輸入地址訪問博客頁面了

2.4問題

? 當執行hexo d可能會出現如下錯誤

類似這樣的錯誤,這個錯誤的原因是因為本地的博客版本與遠程版本不一致

第一種解釋:.deploy_git這個文件的內容是用于將自己所寫的博客部署到github倉庫中的內容

第二種解釋:這個應該是git部署用的文件。比如你寫好的博客想部署到 GitHub Pages上去的話,可以用git部署插件,那個插件會創建這個目錄

那么如何解決這個問題呢?

第一步,刪除自己博客目錄下的.deploy_git文件

第二步,進入git,輸入:hexo clean 清除緩存hexo g -d 渲染部署?

? 執行完以上操作后打開瀏覽器地址欄輸入你的博客地址,就可以看到效果了

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,565評論 6 539
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,115評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 177,577評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,514評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,234評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,621評論 1 326
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,641評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,822評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,380評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,128評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,319評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,879評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,548評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,970評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,229評論 1 291
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,048評論 3 397
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,285評論 2 376