Hexo - Deployment

Hexo - Deployment

LAVI
  2023-06-30 2023-06-30 Created   2024-09-12 2024-09-12 Updated    

Hexo Deployment

LAVI’s Blog 誕生啦
紀錄一下在架設這個網站過程的一些筆記
接下來應該會陸陸續續補上一些以前的重要記事和筆記

環境配置

  1. 下載 node.js
  2. 安裝 Hexo CLI
    1
    npm install hexo-cli -g
  3. 建立 Project
    1
    2
    hexo init <projectname>
    cd <projectname>
  4. 安裝 Hexo 相關套件
    1
    npm install
  5. 啟動 Hexo
    1
    hexo server

    此時 terminal 會出現 Hexo is running at http://localhost:4000/
    若連線 http://localhost:4000/ 出現了 Hexo 預設畫面，則代表成功

Hexo 主題修改

Hexo 官方主題模板

  1. 選擇喜歡的主題後下載解壓縮於 <projectname>\themes
  2. 開啟位於 <projectname>\_config.yml 檔案，找到 theme 並修改
    1
    theme: redefine # 這邊修改為你下載的主題
  3. 重啟 Hexo server，此時網頁更新為下載的模板樣
    1
    hexo server
  4. 針對位於 <projectname>\themes\redefine\_config.yml 進行修改，就可以將模板個人化成自己的部落格ㄌ

佈署到 Github

  1. 安裝 Hexo deployer git 套件
    1
    npm install hexo-deployer-git --save
  2. 修改位於 <projectname>\_config.yml 的
    1
    2
    3
    4
    deploy:
      type: git 
      repo: # 自己的 Github repositories git 連結
      branch: main # 自訂分支名稱
  3. 利用 Hexo CLI 將本地更新好的整體網頁佈署到 Github 
    1
    2
    hexo generate # 生成靜態頁面
    hexo deploy # deploy

新增文章

1
hexo new [layout] <New Post Title>
  • layout 為模板種類，預設有以下三種
    1. draft.md 新增草稿
    2. page.md 新增頁面
    3. post.md 新增文章 (預設若無寫 [layout] 時為此方式)
  • 更多新增文章方式：Hexo 新增文章和頁面

常用寫作功能

筆記區

  • 顏色可換，可加圖標，標題自改
    1
    2
    3
    {% notel red 標題 %}
    內容
    {% endnotel %}

    標題

    內容

提示

  • 顏色可換，可加圖標
    1
    2
    3
    {% note danger%}
    <i style="color:#F9727D" class="red fa-solid fa-circle-exclamation"> </i> 內容
    {% endnote %}

    內容

1
2
3
{% note yellow%}
<i style="color:#F7DC6F" class="fa-solid fa-star"></i> 內容
{% endnote %}

內容

1
2
3
{% note orange%}
<i style="color:#EB984E" class="fa-solid fa-drumstick"></i> 內容
{% endnote %}

內容

多選項

1
2
3
4
5
6
7
8
9
10
{% tabs 不重複的ID %}
<!-- tab 按鈕顯示名稱1 -->
內容
<!-- endtab -->

<!-- tab 按鈕顯示名稱2 -->
內容
<!-- endtab -->

{% endtabs %}

摺疊

1
2
3
{% folding blue::標題 %}
內容
{% endfolding %}
標題

內容

按鈕

1
{% btn center large::<按鈕顯示名稱>::<連結>::<按鈕圖標> %}
INCLAVIC

Github 按鈕模板

1
{% btn center large::<repo名稱>::<repo連結>::fa-brands fa-github %}

簡報按鈕模板

1
{% btn center large::<簡報名稱>::<簡報連結>::fa-solid fa-file-powerpoint %}

文章按鈕模板

1
{% btn center large::<文章名稱>::<文章連結>::fa-solid fa-paper-plane %}

程式文章按鈕模板

1
{% btn center large::<文章名稱>::<文章連結>::fa-regular fa-window %}

文章加密

安裝

1
npm install --save hexo-blog-encrypt

在文章 title 新增 password: <密碼>

1
2
3
4
5
---
title: Hello World
date: 2016-03-30 21:18:02
password: hello
---

在 hexo _config.yml 新增以下內容

1
2
3
4
5
6
7
8
9
# Security
encrypt: # hexo-blog-encrypt
  abstract: 有東西被加密了, 請輸入密碼查看.
  message: 您好, 這里需要密碼.
  tags:
  - {name: tagName, password: 密碼A}
  - {name: tagName, password: 密碼B}
  wrong_pass_message: 抱歉, 這個密碼看著不太對, 請再試試.
  wrong_hash_message: 抱歉, 這個文章不能被校驗, 不過您還是能看看解密後的內容.

文章隱藏

安裝

1
npm install hexo-hide-posts --save

在文章 title 新增 hidden: true

1
2
3
4
5
---
title: Hello World
date: 2016-03-30 21:18:02
hidden: true
---

即可隱藏，且文章只是於首頁被隱藏，仍然可以透過連結訪問他

Reference

Redefine Documents

Hexo Teaching Articles

On this page
Hexo - Deployment
  1. Hexo Deployment
    1. 環境配置
    2. Hexo 主題修改
    3. 佈署到 Github
    4. 新增文章
  2. 常用寫作功能
    1. 筆記區
    2. 提示
    3. 多選項
    4. 摺疊
    5. 按鈕
  3. 文章加密
  4. 文章隱藏
  5. Reference
    1. Redefine Documents
    2. Hexo Teaching Articles