Hexo部署小記

序曲：

在Emlog經歷數次伺服器死亡之後，我開始尋找穩定性高的方案。
我將目光看向了純靜態頁面的Hexo，可以免卻SQ資料庫管理的繁瑣。
不過，Git是什麽？我該如何部署？這些特殊名詞如何去理解？這些，都是一道道難題。
現在距離Hexo建站之初已有半年之久，我將盡力去回憶每一處過程並記錄。當然，這不是教學。

準備：

若不隨意更改核心軟體的安裝路徑，便可避免許多未知的錯誤。
Node.js和Git均為如此。VSCode？本質上是Hexo的管理器罷了。

01.Node.js的安裝

01.打開Node.js的下載頁面；

02.選擇Windows Installer X64.msi下載並安裝；

03.按照默認路徑&選項安裝，以規避無法部署的風險；

04.CDM鍵入“node -v”進行驗證，若出現版本訊息即為安裝成功。

02.Git的安裝

01.打開Git的下載頁面；

02.選擇Windows X64下載並安裝；

03.按照默認路徑&選項安裝，以規避無法部署的風險；

04.CDM鍵入“git –version””node -v””npm -v”進行驗證，若出現版本訊息即為安裝成功。

03.VSCode的安裝

01.打開VSCode的下載頁面；

02.選擇Windows X64下載並安裝，路徑可隨意選擇盤符；

P.S.: VSCode本質上作為Hexo的管理器存在，頁面編輯和終端部署均可在其中完成。

部署：

部署包括Hexo的本地部署和Github的通信部署。
本地部署仍需遵循不隨意變動默認安裝目錄的準則。
若SSH無法使用，那麽切換為HTTPS也是一個不錯的方法。

01.Hexo的安裝

01.打開VSCode，啟動Gitbash終端；

02.在終端中鍵入以下指令，若提示鍵入新指令則安裝完成；

1	npm install -g hexo-cli

03.在C:\Users<用戶名>路徑創建資料夾，用以存放Hexo本地檔案；

04.在終端中鍵入”cd <01步驟創建的文件夾名>”，意為進入03步驟創建的目錄；

05.在終端中鍵入以下指令，若提示鍵入新指令則安裝完成；

1	npm install

06.在終端中鍵入以下指令進行驗證，若出現版本訊息即為安裝結束。

hexo -v

06.在終端中鍵入”hexo clean && hexo g && hexo s”，訪問終端出現的連結，若正確訪問即成功。

P.S.: 若安裝路徑不為默認，Bash終端將在下一次重載系統後無法調用Hexo指令。

02.Github的部署

01.鍵入以下指令，安裝推送部署擴展；

1	npm install hexo-deployer-git --save

02.打開_config.yml文件，修改deploy為如下配置；

deploy:
  type: git
  repository: [email protected]:Magstic/magstic.github.io.git
  branch: main

03.鍵入以下指令，配置SSH密鑰；

1	ssh-keygen -t ed25519 -C "[email protected]"

04.若出現文件路徑，則Enter兩次，鍵入如下命令，複製密鑰至剪貼板；

1	clip < ~/.ssh/id_rsa.pub

05.訪問Github-Settings-SSH and GPG Keys，將剪貼板上的密鑰添加至SSH key；

06.創建名為magstic.github.io的Repositories，勾選Public和Add a README file；

07.進入06創建的Repositories，Settings-Page-Branch，選擇main分支。
進入06創建的Repositories，Settings-Page-Custom domain，連結域名並使用HTTPS；

08.鍵入以下指令，初始化本地Git；

Git init

09.鍵入以下指令，使用個人信息鏈接Git；

1 2	git config --global user.name "Magstic" git config --global user.email "[email protected]"

10.鍵入以下指令，鍵入yes，若出現Hi Magstic…則通信成功。

1	ssh -T [email protected]

寫作：

個人在寫作中的常用指令。建立新的貼文無需指令，複製即可。
寫作時會遇見子頁面的需求。新建貼文不是好的方法，因此需要自由頁面。
自由頁面並非真正意義上的子頁面——不過，它仍可以被本地搜索引擎檢索。

01.常規指令

寫作中的一系列常用指令。

清理緩存檔案

1	hexo clean

生成靜態頁面

hexo g

部署至本地訪問

hexo s

部署至Git訪問

hexo d

一系列常用的組合指令

1	hexo clean && hexo g

1	hexo clean && hexo g

1	hexo clean && hexo g && hexo s

1	hexo clean && hexo g && hexo d

02.自由頁面

什麽是“自由頁面”？
Hexo會默認渲染通用路徑下的頁面，有時候會為自定義Html帶來困擾。
因此，我們需要使頁面規避抑或進行Hexo的渲染，以使最終頁面的結構合理。

打開_config.yml文件，修改Directory的skip_render項。
Skip_Render意為“略過渲染”，在這裡可以使用Glob表達式配對路徑。
“source”為資源路徑，在渲染後source中的内容會出現在靜態頁的根目錄。
故修改路徑時略過source，直接填寫其下的子資料夾或者文件名即可。

這是一些例子：

我不想令指定路徑下的一個html被渲染！

1 2	skip_render: - "html/aojiru/coll.html"

我不想令指定路徑下的全部html被渲染！

1 2	skip_render: - "html/aojiru/*"

03.其他事項

合理安排資源路徑比其他任何事情都重要。
不論自己能否記清每一檔案的明細，都應做好分類。
此外，Hexo是輕量化的靜態頁，應避免在source中直接上載媒體資源。
當然，這涉及優化，將在最後一個環節中去總結。

美化：

……

01.Butterfly

Butterfly是Hexo的一個主題，由Jerry開發。
Butterfly文檔已囊括90%的美化策略，我將在下面記錄該site上所應用的策略。

主題安裝

1	npm install hexo-theme-butterfly

主題被安裝到該路徑：node_modules/hexo-theme-butterfly

打開_config.yml文件，修改theme項以應用主題。

1	theme: butterfly

插件安裝

1	npm install hexo-renderer-pug hexo-renderer-stylus --save

配置檔路徑

透過npm安裝的内容均在node_modules目錄下，這不便於管理配置檔。
首先，打開該路徑，複製config文件的全部内容：node_modules/hexo-theme-butterfly/_config.yml；
然後，回到根路徑下建立_config.butterfly.yml檔案，將複製的内容貼在該檔案上並保存；
最後，可直接使用根路徑下的_config.butterfly.yml檔案配置主題，優先級>主題路徑下的_config.yml。

配置主題檔

# Tittle 
nav:
  logo: 
  display_title: true
  fixed: false # fixed navigation bar

# Menu
menu:
  歸類: /categories/ || fas fa-folder-open
  關於: /about/ || fas fa-paper-plane
  足跡: /message/ || fas fa-shoe-prints

# Favicon（網站圖標）
favicon: https://magstic.art/images/avatar.jpg

# Avatar (頭像)
avatar:
  img: https://magstic.art/images/avatar.jpg
  effect: false

# 關閉頂圖
disable_top_img: true

# 404自定義
error_404:
  enable: true
  subtitle: '站點重建中，請訪問主頁。'
  background: https://s2.loli.net/2023/05/12/V8LgEuI6CnvYe7F.png

# 文章屬性
post_meta:
  page: # Home Page
    date_type: created
    date_format: date
    categories: true
    tags: false
    label: true
  post:
    date_type: both
    date_format: date
    categories: true
    tags: true
    label: true

# 圖片描述文字
photofigcaption: false

# 複製權
copy:
  enable: true
  copyright:
    enable: false

# 文章目錄&版權
toc:
  post: true
  page: false
  number: true
  expand: false
  style_simple: false # for post
  scroll_percent: true

post_copyright:
  enable: false
  decode: false

# 頁脚
footer:
  owner:
    enable: true
    since: 2020
  custom_text:
  copyright: true

# 側邊欄
aside:
  enable: true
  hide: false
  button: true
  mobile: true # display on mobile
  position: right # left or right
  display:
    archive: true
    tag: true
    category: true
  card_author:
    enable: true
    description:
    button:
      enable: true
      icon: fab fa-google
      text: Gmail
      link: mailto:[email protected]
  card_recent_post:
    enable: true
    limit: 2
  card_archives:
    enable: false
  card_webinfo:
    enable: false
    post_count: true
    last_push_date: true

# 暗黑
darkmode:
  enable: true

調整主題檔
……

02.星空背景

No content to show

03.本地檢索

No content to show

04.摺叠擴展

No content to show

05.留言系統

No content to show

優化：

……

01.Lazyload

No content to show

02.Google Search Console

No content to show

03.Cloudflare

No content to show