這篇文章主要用來記錄，~~怕我之後忘記hexo怎麼用~~

需要準備的東西

Node.js -> 必備軟體
VS code -> 修改程式碼、寫文使用
Github帳號 -> VS code同步、後續網站伺服器使用
GitHub Desktop -> Git指令及介面、將檔案上傳至Github

準備這些東西就可以開始使用hexo了！

建立hexo資料夾

Windows可以在在檔案總管打開自己想要的路徑，在檔案總管的路徑上輸入cmd後Enter。
Mac OS可以直接對著路徑按下在終端機中開啟，接著複製以下的指令並修改括號的內容。

npm install hexo-cli -g && hexo init (hexo資料夾名稱) && npm install

例如：

npm install hexo-cli -g && hexo init blog && npm install

Github

上傳至GitHub

打開GitHub Desktop並且登入GitHub帳號後，選擇Add a Local Repository，把剛剛的hexo資料夾放進去。
在彈出的視窗上點一下create a repository

接著就可以關閉剛剛彈出的視窗，並且放上第一次的檔案內容。

這樣就上傳完畢可以去GitHub確認檔案了。

安裝主題

接著進入到hexo資料夾內，像剛剛一樣開啟指令視窗。

主題我使用的是安知鱼大大製作的anzhiyu。

作者本身有提供兩種安裝方式，但因為主題有大量的簡體中文描述我想改成繁體中文以及很多修改，又想及時跟進主題的更新，所以兩種方式我都不使用。

我使用的方式如下:

fork原主題
將fork的主題放到hexo資料夾內
1. 找到主題的網址
2. 使用指令
  git submodule add 剛剛的網址 themes/anzhiyu
  這種方式適用於任何有在github上傳的主題，themes後面的子資料夾名稱可以是任何喜歡的主題

使用vscode修改_config.yml

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: anzhiyu # <-這裡改成剛剛換的主題

安裝主題必須Plugin

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

複製主題設定
Windows直接進到主題內複製一份_config.yml到hexo根目錄並改成_config.anzhiyu.yml
MacOS則使用以下指令即可：
cp -rf ./themes/anzhiyu/_config.yml ./_config.anzhiyu.yml
建議修改後將內容複製回去，如果以後更新會修改主題設定的時候會比較方便。

主題更新

如果作者後面更新了主題怎麼辦？
別擔心，還記得剛剛的fork嗎，現在派上用場了。

如果碰到衝突也沒關係，確認一下是要捨棄變更、融合、接受變更就行。
打開VS code，找到最左邊的原始檔控制，如果找不到就對著那一列按右鍵把它顯示出來。
可以看到合併變更的地方有紅色驚嘆號，那些就是有衝突的檔案。

點開需要修改衝突的檔案，右邊的捲軸可以看到有衝突的地方，而在修改前的段落上方會顯示要不要接受變更。

接著點一下右下角的在合併編輯器中解析，會將變更前，變更內容，變更結果三個一起顯示。

最後的檔案會是下面的結果，如果確定好結果就可以完成合併了。

修改後再次上傳Github

後續只要有修改東西，要記得回到Github Desktop將檔案push回去你的repo，以備不時之需，如果同時修改2個以上的檔案，都要輸入Summary才上得去。
如果發現修改主題檔案後上不去，請把左上角repo換一下，先上主題檔案，後上Hexo的東西。

第一步

如果卡在這裡記得換去主題repo

推回倉庫及主題修改後方式如上。

hexo基本教學

初執行hexo

hexo有幾個基本的指令可以使用。

hexo cl - 清除現有的生成資料
hexo g - 生成資料
hexo s - 本地伺服器
hexo d - 部署到伺服器
hexo v - hexo版本查詢
hexo new [佈局類型] [標題] - 建立一個指定佈局的標題頁面

現在要在自己的電腦測試，所以使用的是s，如果執行了以後就會生成檔案，所以建議再使用cl，這樣我們的指令組合會是這樣：

hexo cl && hexo s

輸入了之後，應該打開指令視窗的網址就能看到網頁了！
使用Ctrl+C就能關閉本地伺服器。

更多的指令可以看hexo的說明。

修改hexo、主題設定

hexo的_config.yml修改說明可以看這裡。
anzhiyu主題的修改說明在這裡。

hexo根目錄的設定都會優先，所以主題資料夾內的_config.yml不太會被使用到，但更新時要注意主題設定有無新項目需要複製出來。

我在hexo設定裡面有修改permalink為:abbrlink/，因為我想維持乾淨一點，而且網址的slug可以明顯一點(?)

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://www.nagongze.me
permalink: :abbrlink/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

改了這個之後，文章佈局的front-matter可以新增一行abbrlink: 作為slug名稱。
比如這篇文章的front-matter如下：

---
abbrlink: 'hexo' (加上上面的設定就是https://網域/hexo/)
title: 我的Hexo流程
date: 2023-05-10T15:12:32+08:00
updated: 2023-05-10T15:12:32+08:00
categories:
    - 
tags:
    - hexo
description: '一點心得和教學。'
---

scaffolds(佈局模板)

不管是草稿、文章、頁面都有。
它會在每次使用new相關指令時套用模板。
可以看主題的頁面設定及hexo的Front-Matter說明進行調整。

source(資產資料夾)

這個資料夾內放了網站內會拿來用的東西，比如文章、頁面、草稿、圖片、js、額外追加的css等。

文章及草稿分別在_posts及_drafts。

新增的頁面(page)會直接在source內開一個同名資料夾，比如執行hexo new page test指令時，source資料夾內就會有一個test資料夾內並包含一個頁面內容的index.md，且有可能因為使用的主題有多種頁面模板，可能還會將資料放在_data資料夾內。

如果是圖片及其他東西引用到其他地方也很簡單，直接將source作為根目錄，做相對路徑使用，以下以主題的設定檔案做範例：

# Avatar (頭像)
avatar:
  img: /img/avatar.jpeg #實際路徑為source/img/avatar.jpeg
  effect: false

標籤外掛(tag plugin)

標籤外掛是只有hexo文章才可使用的東西，在一般的markdown渲染中看不出來，可以看看這裡找到anzhiyu的所有標籤外掛。

VS code

可以選擇登入GitHub帳號，這樣vscode設定就自動存在帳號裡了，而且延伸模組或者是使用者程式碼片段也都會被同步。

使用者程式碼片段

這個東西可以在文章內使用標籤外掛時更為便利。

在喜好設定下有一個設定使用者程式碼片段，按下去之後如果沒有markdown最先彈出來，請直接輸入markdown後按下Enter。

打開json之後可以看到有給預設的範本，按照格式修改後儲存就可以使用這些片段了，以下是我提供的範例圖：

要注意json的格式，如果顏色有跟範例不一樣的基本上代表該片段無效！
Butterfly標籤外掛及擴充的程式碼片段也有人做了vscode的延伸模組可以快速輸入，可以自己找看看。

開始寫文

如果裝了上面vscode部分所使用的延伸套件，文章部分可以不用指令生成，直接按POST旁邊的+就好，這樣可以維持伺服器開啟狀態，讓資料夾分配分類的功能一直開啟。

新增文章後，記得填寫好front-matter再開始寫文，才不會忘記喔！

Ｍarkdown基本說明

如果還不會Markdown語法可以展開。

hexo寫文使用的語法是markdown，下面給點基本說明：

標題

# Html的H1 (大標)
## Html的H2 (中標)
### Html的H3 (小標)

Html的H1 (大標)

Html的H2 (中標)

Html的H3 (小標)

一直到H6都有。

文本格式

**這是粗體**
*這是斜體*
***這是粗斜體***
~~這是刪除線~~

這是粗體
這是斜體
這是粗斜體
~~這是刪除線~~

如果發現需要使用*時被認為是語法，可使用\ 在符號前。

如果發現需要使用\*時被認為是語法......

超連結

[連結顯示標題](網址)

連結顯示標題

如果裝了上面vscode部分所使用的延伸套件，只要複製連結並選取想要做超連結文字後直接貼上就好了。

圖片

![圖片註解](圖片直連)

圖片註解

清單

使用清單後如果想要其他內容在下方，記得空一行，否則會與最後一個項目的縮排一致。

無序

- 1
* 2
+ 3

以上三種都行。

有序

1. ㄧ
    1. 1-1
2. 二
    - 可以插入無序
3. 三
    文字內容或圖片都可以被縮排

ㄧ
1. 1-1
二
- 可以插入無序
三
文字內容或圖片都可以被縮排

使用Tab鍵縮排，Shift+Tab取消縮排。

任務

- [ ] 沒有勾勾
- [x] 有勾勾

沒有勾勾

有勾勾

分割線

***
---
___

以上三種都行。

程式碼
使用```作為區塊。
使用`作為標註。

```markdown=1
測試
```

測試

markdown<-這裡輸入想做高亮色的語法名稱(=1)<-後面加上等號&數字可以指定行，需要在_config.yml修改一下。

highlight:
  enable: true
  line_number: true
  first_line_number: 'inline' # 加這行
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

可以在句子插入需要`程式碼標註`的部分。

可以在句子插入需要程式碼標註的部分。

表格
表格這東西用vscode寫實在太麻煩了，我使用其它工具來寫。
比如hackmd，~~對不起它真的好好用~~

引用

使用引用後如果想要其他內容在下方，記得空一行，否則內容會在引用內。

>引用內容
>>可以套娃

引用內容
可以套娃

如果想隱藏這段內容可以點一下旁邊目錄快速上去。

圖床工具

圖片不一定要全都放在hexo資料夾內，那可能會導致hexo的東西太大影響github的使用，可以使用imgur，他有提供api且vscode也有很方便的延伸套件可以使用。

再不行的話…一樣可以用hackmd(?)，它可以把剪貼簿的圖片直接貼上。

不過當然也有其他的選擇，使用PicList！

這個軟體可以讀取剪貼簿的圖片，也可以管理上傳之後的圖片。

引用站外連結

PicList

docs

我的軟體設定很多是預設的，所以就不特別講了，而上傳及imgur的設定方式可以看上面的說明，說明很詳細。

我自己使用的圖床方式是CloudFlare R2，它是一個相容S3相關的空間，好處是基本使用免費，除了圖片還可以上傳任何檔案進行儲存。

CloudFlare R2

開啟R2功能

登入帳號後按順序點一下

填入信用卡資料或paypal，下面的帳戶類型記得改一下

R2功能開了之後，就開始建立空間放檔案了！

建立貯體、公開

先建立貯體

輸入名稱後就可以進行下一步了

然後就進到建立好的貯體內了，先去設定修改公開性，這樣才可以在網站上使用你儲存的檔案。

公開性設定的方式有兩種：

自訂網域 - 連接在CloudFlare管理的網域。
使用R2.dev 子網域 - 使用R2本身的子網域 (這個示範裡用這個)

只需要擇一使用，因為只是網址不同。

取得網址之後就可以回到PicList進行設定了。

PicList圖床設定

在插件面板搜尋s3並安裝
圖床設定 -> Amazon S3 -> 右邊的新增
按照下面的指示新增
1. 圖床配置名
  用來在PicList分辨的名字
2. 应用密钥 ID、应用密钥
  
  這個頁面在填完以前記得留著，因為它只可以看一次，如果你只輸入其中一個就關掉，記得重新生成。
3. 桶
4. 文件路径
  如果不想多想，可以直接用我的。
  {year}/{month}/{md5}.{extName}
5. 地区不用管
6. 自定义节点
  
  尾巴的/不要。
7. 代理不用管
8. 自定义域名
  剛剛的R2 dev子網域，注意的地方和節點一樣
9. PathStyleAccess
  維持預設，不要開
10. rejectUnauthorized
  維持預設，開著
11. ACL访问控制列表
  維持預設，public-read

設定完成之後就可以使用R2上傳檔案了！

用上面設定的R2上傳一下測試

寫文的部分大概就這樣了，沒什麼特別需要注意的地方。

伺服器

終於來到最後放網路上的時候了！

先安裝hexo-deployer-git：

npm install hexo-deployer-git --save

打開_config.yml，找到deploy，將格式修改一下。

deploy:
  type: git
  repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
  branch: main

到github再建立一個hexo生成檔案使用的repo，我是選擇repo不公開。

接著到這裡建立Token，給hexo上傳檔案的鑰匙。

設定好之後往下拉到最下面，綠色按鈕揍下去

取得token之後按照下面格式修改一下repository url。

repo: https://「完整token」@github.com/「使用者名稱」/「倉庫名稱」

範例：

repo: https://ghp_XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX@github.com/nagongze/Hexo-blog-publish

到這裡部署的設定就好了，接著就是伺服器了。

Vercel

引用站外連結

vercel

使用github登入之後，可以選擇讓它可以看多少個repo，或者是都可以看。

把剛剛建立的repo匯入進去

這裡可以修改生成的網址

如果你沒有買域名，可以改的只有.vercel.app前面的字串喔！

Zeabur

引用站外連結

Zeabur

和Vercel一樣，使用github登入之後，可以選擇讓它可以看多少個repo，或者是都可以看。

如果github帳號註冊未滿一個月，這個網站是無法使用的。

它的方式跟Vercel很不一樣的一點：它的專案是資料夾，而不是一個小項目。
所以要先輸入專案名稱之後再新增項目。
環境不用動，新增下方的服務就行。

這裡點左邊

預設是沒有域名的，可以自己選擇生成或自訂。

指令

最後只要輸入指令就能在你的網站上看到了！

hexo cl && hexo d

我的Hexo流程

需要準備的東西

建立hexo資料夾

Github

上傳至GitHub

安裝主題

主題更新

修改後再次上傳Github

hexo基本教學

初執行hexo

修改hexo、主題設定

推薦外掛

scaffolds(佈局模板)

source(資產資料夾)

標籤外掛(tag plugin)

VS code

推薦延伸模組

使用者程式碼片段

開始寫文

Ｍarkdown基本說明

圖床工具

CloudFlare R2

開啟R2功能

建立貯體、公開

PicList圖床設定

伺服器

Vercel

Zeabur

指令

宮沢雫Nagongze