1. 程式人生 > >用GitHub和Hexo搭建個人部落格

用GitHub和Hexo搭建個人部落格

很久前就想利用GitHub來搭建一個個人部落格了,今天就琢磨了一下搭建方法,在這裡寫出來以供他人蔘考~

一、簡介

Hexo:
Hexo 是一款基於Node.js、快速、簡潔且高效的部落格框架,Hexo 使用 Markdown解析文章,在幾秒內,即可利用各式主題生成靜態網頁

NodeJs
Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境,Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型,使其輕量又高效。Node.js 的包管理器 npm,是全球最大的開源庫生態系統

Git
Git是一個開源的分散式版本控制系統,用以有效、高速的處理從很小到非常大的專案版本管理

GitHub
GitHub是一個程式碼託管平臺和開發者社群,開發者可以在GitHub上建立自己的開源專案並與其他開發者協作編碼

二、準備工作

這裡寫圖片描述

我的軟體安裝路徑是:C:\nodejs

一路點選下一步即可

這裡寫圖片描述

安裝完成後檢查是否有自動添加了環境變數,沒有的話需要手動設定

這裡寫圖片描述

(3)註冊一個GitHub賬號,這個不必多說吧~

三、本地部署

我的電腦是Windows平臺
開啟CMD,即命令提示符,進入NodeJS的安裝目錄

這裡寫圖片描述

使用命令列安裝Hexo,這個耗時可能會稍微長點,需要等等

npm install -g hexo

這裡寫圖片描述

建立一個資料夾命名為blog並開啟
名字可以隨個人喜好取,不過最好只包含英文字元

mkdir blog && cd blog

這裡寫圖片描述

然後再依次執行以下命令

初始化

hexo init

安裝依賴包

npm install

生成靜態頁面

hexo g

啟動本地服務,檢視效果

hexo s

這裡寫圖片描述

這裡寫圖片描述

此時部落格應該已經搭建成功了,可以看到CMD提示說Hexo已經執行在“http://localhost:4000/”了,檢視效果

這裡寫圖片描述

可以看到網站樣式還是挺好的,當然,此時網站還只是部署在本地

開啟\nodejs\blog\source\_posts資料夾,可以看到一個hello-world.md檔案,即網站上顯示的文章,用Markdown格式書寫

四、部署到GitHub

首先,登入你的GitHub賬號,新建一個倉庫

這裡我新註冊了一個GitHub賬戶用來演示,名為czyhexo

倉庫的名字的格式必須為:使用者名稱+.github.io

這裡寫圖片描述

點選按鈕建立,選中Settings進入設定介面
選中“啟動頁面自動生成器”按鈕

這裡寫圖片描述

設定頁面資訊

這裡寫圖片描述

選擇主題然後釋出即可

這裡寫圖片描述

這裡寫圖片描述

五、推送本地檔案

這裡寫圖片描述

進入C:\nodejs\blog資料夾,開啟_config.yml檔案

修改最下邊一行,並新增兩行命令,注意之間的空格

這裡寫圖片描述

回到CMD視窗,如果之前的狀態還沒退出,可以按ctrl+c,輸入y確定退出

依次輸入以下命令

npm install hexo-deployer-git --save

重新生成靜態頁面

hexo g

清理並推送到GitHub

hexo clean && hexo d

注意,此處需要你電腦本地的Git已經與GitHub賬戶繫結,這樣才有許可權可以推送檔案,繫結方法可以參考我上邊所說的Git教程

六、更換主題

開啟主題資料夾:C:\nodejs\blog\themes
開啟Git,下載該主題

git clone https://github.com/litten/hexo-theme-yilia.git

等下載完成後,可以看到資料夾下多了個檔案,將之重新命名為:yilia

這裡寫圖片描述

修改C:\nodejs\blog資料夾下的_config.yml檔案,將theme值修改為:yilia,注意空格,儲存退出

這裡寫圖片描述

再依次執行以下命令

重新生成頁面

hexo g

推送到GitHub

hexo d

這裡寫圖片描述