蓋瑞的學習筆記室

hexo 架設Blog紀錄

發表於 更新於 分類於

初衷

因為想藉著參加六角學院舉辦的w3HexSchool 鼠年全馬鐵人挑戰，督促自己來寫文，
所以想要做一個專屬自己又能免費的blog，紀錄著往前端領域學習的過程，因此使用多數工程師用的 hexo + github 的Blog方式、並記錄這次開始的過程。

目錄

  1. 架設環境
  2. 安裝檔案
  3. 設定結構
  4. Next主題
  5. 佈屬
  6. 參考資料

架設環境

Step1. 架設hexo前,必須安裝使用以下軟體

Step2. 接著設定網路環境

  • github
    登入github帳號,創建新的 repository, 命名規則為 “用戶名”+”.github.io”

Step3. 創建資料夾,選擇想要放置的目錄,選擇資料夾點選右鍵選擇 “Git Bash Here” 打開。

Step4. 取得SSH Key , ssh key 主要是之後hexo佈傳github時, 不用輸入密碼,使用Git Bash Here 陸續打下以下指令

1
2
3
$ git config --global user.name "github 用戶名"
$ git config --global user.email "github 註冊信箱"
$ ssh-keygen -t rsa -C "github 註冊信箱"

過程中會一直問一些細項,按 enter 即可 , 最後輸入 yes 完成

Step5. 打入以下指令,複製ssh key 

1
$ cat ~/.ssh/id_rsa.pub

Step6. 到 github 裡,找到“settings”,點選“SSH and GPG keys”,貼上ssh key,並去創立好的 repository 資料夾裡, 改選SSH方式 , 之後等待佈屬


安裝檔案

Step7. 回到“Git Bash Here” 打入以下指令, 安裝 hexo

1
npm install -g hexo-cli  //安裝 hexo 套件

安裝完 hexo 套件等環境繼續以下指令

1
2
3
4
hexo init name  //初始化新的 hexo，在當前路徑建立一個叫 name 的資料夾
cd name  //進入您剛剛建立的 name 資料夾當中
npm install  //安裝 hexo
npm install hexo-deployer-git --save  //安裝 git 部署套件

設定結構

Step8. 設定部落格相關資訊,進入剛設定好的 hexo 資料夾之後，先找到 _config.yml 這個檔案，用記事本開啟或自己習慣的文字編輯器打開

開始設定基本資料

1
2
3
4
5
6
7
title: 我的部落格  //輸入部落格標題
subtitle: 一個記錄學習筆記的地方  //輸入副標題
description:  //輸入網站描述 
keywords:  //輸入網站關鍵字(以逗號隔開)，方便 SEO 
author: 本人  //輸入姓名或暱稱
language: zh-TW  //輸入您所使用的語言
timezone:  //留空以使用系統時間

找到 url , 填上你github page的網址, 通常就是 https:// 名稱.github.io

1
url: https://username.github.io/

測試頁面

Step9. 測試頁面,先在本地端測試有無安裝好hexo
到“Git Bash Here” 打入以下指令,開啟本地端畫面

1
hexo s

在瀏覽器打入http://localhost:4000 ,有看到以下畫面表示成功安裝了

Step11. 新增頁面,打入以下指令可以新增頁面

1
hexo new 想要新增頁面的名稱

Next主題

Step12. 安裝主題 , 此網站選用大多數人使用的 Next 主題。

連到 next 提供的最新主題連結下載

下載解壓縮後檔案複製到安裝hexo的資料夾中”themes”的資料夾

回到 _config.yml , 找到 theme , 並填上資料夾名稱

1
theme: hexo-theme-next

佈屬

Step13. 設定部署至 GitHub 的資訊 ,到 _config.yml , 找到 deploy (在文件的底部)，請輸入以下設定,其中username,輸入自己的github名稱

1
2
3
4
deploy:
  type: git
  repository: git@github.com:username/username.github.io.git
  branch: master

Step14. 上傳hexo資料 ,到“Git Bash Here” ,依序輸入指令，將網站上傳到 github 中。

1
2
3
hexo cl  //清除之前建立的靜態檔案
hexo g  //建立靜態檔案
hexo d  //佈署至 Github Pages

之後網站自動生成並發佈，完成後就可以打開瀏覽器到 https://username.github.io 看看自己網站了。

參考資料

架設 Hexo+GitHub
Hexo - 前端也能建置部落格！安裝與建置篇