個人網站搭建: 基於Hexo框架

項目介紹

項目鏈接

​ 鏈接: https://ilsao.github.io/

動機

​ 網路上各種博客網站零瑯滿目，上傳分類卻非常麻煩，時不時還有廣告擾亂思緒，故興起自己搭建個人網站的念頭。上網蒐尋許多資料，為減少學習與時間成本，最終選擇使用Hexo框架編寫個人網站。

Hexo框架的優點

  • 無須購買域名與服務器，可直接部屬在GitHub Page
  • 無須學習前後端代碼編寫，使用yml設定格式並使用Markdown設計業面與發佈內容
  • 主題繁多，頁面優美

個人網站功能

  1. 主頁:

    1

  2. 時間軸: 展示各文章發布時間

    2

  3. 標籤: 文章依標籤檢索

    3

  4. 分類: 文章依分類檢索

    4

  5. 友情鏈接: 可添加其他網站鏈接

    5

  6. 文章閱讀

    6

  7. 評論: 接入Giscus實現文章評論功能

    7

開發歷程

安裝工具與框架

  • git

  • nodejs

    • Hexo (可能要使用管理員身分運行，之前沒用管理員身分運行報錯)

      1
      npm install hexo-cli -g

  • Butterfly主題

    1
    git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly

  • Hexo 自動部屬工具(可能要使用管理員身分運行，之前沒用管理員身分運行報錯)

    1
    npm install hexo-deployer-git --save

創建倉庫

  1. Create a new repository
  2. 注意repository的名稱必須是“用戶名.github.io”
  3. 勾選public
  4. 勾選Add a README file

生成SSH Key

在Git Bash中輸入:

1
ssh-keygen -t rsa -C "email address"

在C:\Users\username中找到.ssh文件夾

打開id_rsa.pub並複製其中內容

轉回GitHub

設置 -> SSH Key

新建SSH Key並黏貼複製的id_rsa.pub內容

初始化博客內容

創建好放置博客的文件夾後，右鍵Git Bash Here，輸入

1
2
3
npx hexo init
npx hexo install
npx hexo g

打開文件夾中的_config.yml，將文件最底部的deploy處改為

1
2
3
type: git
repository: 
branch: main

返回GitHub，複製倉庫鏈接，黏貼到_config.yml中的repository後

在Git Bash中輸入

1
2
3
npx hexo cl
npx hexo g
npx hexo d

便可訪問”用戶名.github.io”看看生成的頁面

更改主題

我選擇的主題為: Butterfly

參考官方文檔獲得更多修改資訊: https://butterfly.js.org/posts/21cfbf15/

心得反思

​ 此項目為我第一次接觸網站搭建，不了解HTML與CSS的情況下，比起學習網站搭建相關知識所需耗費大量時間，選擇使用已有框架搭建。可以快速展現成果並實現所需功能，將剩餘學習時間分配在更有興趣的電腦底層知識研究方面。

製作此項目我學習到：

  • Git 分布式版本控制軟體的使用
  • Markdown使用語法
  • 認識與使用SSH協議