GitHub + Hexo搭建自己部落格(一) 基本內容

Sandop發表於2019-02-19

一、基本環境

1、安裝Node.js和配置好Node.js環境

NodeJs安裝(Windows版本)

2、安裝Git和配置好Git環境

Git安裝

二、Hexo安裝

1、在自己認為合適的地方建立資料夾,並進入

2、安裝Hexo,輸入npm install hexo -g,並檢查是否安裝成功hexo -v

3、初始化檔案,輸入hexo init

4、安裝所需元件,輸入npm install

5、生成靜態檔案,輸入hexo g 或者 hexo generate

6、啟動本地服務,輸入hexo s 或者 hexo server

若頁面一直無法跳轉,那麼可能埠被佔用了。此時我們ctrl+c停止伺服器,接著輸入hexo server -p 埠號來改變埠號,例如hexo server -p 5000

7、若能看見如下圖就成功啦

三、建立GitHub倉庫

1、建立專案

注意:專案必須要遵守格式:賬戶名.github.io

2、檢視專案

在新建專案的setting設定中,可以看到GitHub Pages板塊,如下圖說明建立成功,點選https://賬戶名.github.io/可以看到自己的部落格

四、關聯部落格

1、設定Git的user name和email

如果是第一次使用Git需要在Git Base Here 中分別輸入git config --global user.name "使用者名稱"git config --global user.name "郵箱"

2、建立SSH Key

在使用者主目錄下,看看有沒有.ssh目錄,如果有,再看看這個目錄下有沒有id_rsa和id_rsa.pub這兩個檔案,如果已經有了,可直接跳到下一步。

也可以輸入cd ~/.ssh檢查是否有.ssh資料夾,輸入ls,列出該檔案下的內容。下圖說明存在

如果沒有,開啟Git Bash,建立SSH Key:

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

你需要把郵件地址換成你自己的郵件地址,然後一路回車,使用預設值即可,由於這個Key也不是用於軍事目的,所以也無需設定密碼。

如果一切順利的話,可以在使用者主目錄裡找到.ssh目錄,裡面有id_rsa和id_rsa.pub兩個檔案,這兩個就是SSH Key的祕鑰對,id_rsa是私鑰,不能洩露出去,id_rsa.pub是公鑰,可以放心地告訴任何人。

3、新增SSH Key

(1).登陸GitHub,開啟“settings”,“SSH and GPG Keys”頁面 (2).填上任意Title,在Key文字框裡貼上id_rsa.pub檔案的內容 (3).點“Add Key”,你就應該看到已經新增的Key (4).輸入ssh -T git@github.com,測試新增ssh是否成功。如果看到Hi後面是你的使用者名稱,就說明成功了

4、配置Deployment

在部落格的根目錄資料夾中,找到_config.yml檔案

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

複製程式碼

注意: 1.每個冒號之後必須有空格;2.repository中的使用者名稱更改為自己的使用者名稱

5、安裝擴充套件

在生成以及部署文章之前,需要安裝一個擴充套件npm install hexo-deployer-git --save

6、生成部署

輸入命令hexo ghexo d

7、部署成功

部署成功後訪問你的地址:http://使用者名稱.github.io。那麼將看到自己的部落格

五、設定主題

在 Hexo 中有兩份主要的配置檔案,其名稱都是 _config.yml。 其中,一份位於站點根目錄下,主要包含 Hexo 本身的配置;另一份位於主題目錄下,這份配置由主題作者提供,主要用於配置主題相關的選項。

為了描述方便,在以下說明中,將前者稱為 站點配置檔案, 後者稱為 主題配置檔案

PS:需要特別注意的地方是,冒號後面必須有一個空格,否則可能會出問題。

1、安裝 NexT主題

在終端視窗下,定位到 Hexo 站點目錄下。使用 Git checkout 程式碼:

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

2、啟用主題

當 克隆/下載 完成後,開啟 站點配置檔案, 找到 theme 欄位,並將其值更改為 next。

3、檢視效果

在切換主題之後、驗證之前, 我們最好使用 hexo clean 來清除 Hexo 的快取。 然後在本地檢視效果

hexo s -g //生成靜態檔案,啟動本地服務

4、同步部落格

在本地瀏覽沒有問題之後就可以同步到部落格 執行hexo d

5、訪問我的hexo+github部落格

可以訪問我的git部落格來檢視效果: sandop.github.io/

相關文章