Hexo快速構建個人小站-Hexo初始化和將專案託管在Github(一)

沛山發表於2020-06-17

 

背景交代

    相信每個程式設計師都有自己做過個人網站,部落格之類的專案了,但是現在還在維護嗎?反正我前前後後做過2到3個了,維護一段時間後因為一些不可逆的原因(主要是懶)都沒有維護了,購買的一些域名和伺服器資訊也都過期了,最近玩了一下hexo,發現這個東西挺方便的,基本半個小時就可以搞完,並且如果 完全託管在github上基本就是0成本,用作學習記錄輸出是夠了。

 

1.依賴於nodejs安裝,安裝nodejs和npm

下載地址,可以對照電腦系統版本進行下載安裝:https://nodejs.org/en/download/
現在nodejs的安裝包內建了npm,所以下載安裝完成之後,nodejs和npm都會安裝好

檢查安裝是否成功


安裝成後會顯示出對應的版本資訊,由於我電腦之前就安裝過了,所以應該不是最新的版本

2.安裝hexo

安裝命令:

sudo npm i -g hexo

直接一步就安裝完成了,然後可以通過hexo -v檢視是否安裝成,成功安裝的話,會列印出上面截圖中的一些版本資訊

3.hexo初始化部落格專案

命令:

hexo init

 

初始化完成之後,看看hexo在資料夾給我生成了哪些檔案

 

如果你是一名前端或者nodejs開發者,相信對這些檔案再熟悉不過了,還是對上述幾個檔案簡單解釋一下:

  • node_modules:存放依賴包資訊

  • public:存放生成的頁面

  • scaffolds:存放生成文章的一些模板

  • source:存放用命令建立的各種文章

  • themes:存放部落格使用的主題

  • _config.yml:存放整個部落格的配置

  • db.json:存放source解析所得到的

  • package.json:存放專案所需模組專案的配置資訊

 

4.將生成的部落格專案跑起來

1、清除
hexo clean
2、生成
hexo g
3、啟動服務
hexo server

 

啟動完成後就可以按照提示,開啟 http://localhost:4000 來訪問我們在本地初始化好的部落格專案了

可以看到我們的專案已經成功跑起來了,成功的邁出了第一步,先暫且按耐住激動的心情,我們繼續!

 

5.在GitHub上建立倉庫用於託管部落格專案

開啟Github:https://github.com/PeyShine,新建一個倉庫,如圖

倉庫名稱需要配置為:個人名字.github.io,倉庫設定為公開,然後點選建立就可以

 

6.配置_config.yml

deploy:
   type: git
   repository: https://github.com/PeyShine/PeyShine.github.io.git
   branch: master

  

7.上傳專案 

在此之前請先安裝一個外掛

npm install hexo-deployer-git --save

  

部署(上傳到GitHub) 

hexo d 或者 hexo deploy


上傳過程中輸入了使用者名稱和密碼,如果提前配置好ssh也可以不用輸入

到Github上看一下,是否上傳成功

可以看到檔案都已經上傳成功了

8.成功訪問

通過域名“https://peyshine.github.io” 來訪問

相關文章