###### tags: `Hexo` `hexo-admin`
# 【學習筆記】hexo-admin：Hexo 後台管理工具


在上篇[【學習筆記】如何使用 Hexo + GitHub Pages 架設個人網誌](https://heidiliu2020.github.io/2020/11/07/202011-hexo-github/)中，學會如何打造個人網誌後，再來要介紹如何透過 hexo-admin 這個套件，在後台管理網誌文章。

## 為什麼需要 hexo-admin？

在上篇文章介紹到，要在網誌發布文章，必須透過 CLI 介面以 `hexo new` 指令新增文章，再利用 `hexo g -d` 生成並部署。

透過 hexo-admin 這套插件，我們就能透過 GUI 介面進行後台管理，例如編輯原有的 markdown 文件，也可以新增文章或頁面、發布草稿和提供預覽功能等等，在操作上簡化了發布文章的流程。

## 安裝套件

> 詳細可參考文件說明：[jaredly/hexo-admin](https://github.com/jaredly/hexo-admin)

1. 首先進入本地端存放 hexo 專案的資料夾
2. 在終端機輸入安裝指令

$ npm install --save hexo-admin

## 進入 hexo-admin 後台

安裝完成之後，就可以進入後台管理，步驟如下：

1. 架設本地端伺服器

$ hexo server -d
// 或簡化成
$ hexo s

看到下方提示就代表運行成功：


2. 在瀏覽器輸入 http://localhost:4000 可以預覽發布前的網誌
3. 進入 http://localhost:4000/admin 可進入後台管理，在 Posts 可看到文章列表：


在 Pages 可編輯其他頁面：


## 新增文章 Publish

1. 點選左上角的 New Post，可輸入該文章的網址名稱，接著打勾或按 Enter：


2. 就會進入編輯頁面，可在標題列編輯文章標題，標題下方則是文章網址，左邊區塊可編輯 Markdown 文章內容，右方區塊則是預覽文章


3. 編輯完成後，可點選 Publish 左側的設定，修改發布文章時間、標籤、分類，確認都沒問題後，即可點選 Publish 發布文章


4. 回到 http://localhost:4000 即可看到剛才新增的文章


### 補充：Read more 功能

在上方編輯模式中，可以看到 `<!--more-->` 這行程式碼，在這行以下的內容就會自動被隱藏，會多一個閱讀全文（Read more）的連結，必須點擊文章才會看到全文。

## 部署到 GitHub

確認文章都沒問題之後，就可以準備部署到 GitHub 上，步驟如下：

1. 在終端機按 Ctrl+C，可停止本地端伺服器


2. 輸入下方三個指令進行部署

- hexo clean：清除之前建立的靜態檔案
- hexo generate：建立靜態檔案
- hexo deploy：部署到 Github Pages

也可以簡寫成：

$ hexo cl
$ hexo g
$ hexo d

這樣就成功透過 hexo-admin 管理後台文章！

## 心得記錄

其實上次在搬運筆記的時候，就已經有使用 hexo-admin 這套工具，卻沒想到過一段時間後，還是會忘記該如何操作，於是乎乾脆寫成一篇文章，之後也可以回來複習。

金魚腦如我，果然還是不能沒有學習筆記XD

參考文章：
- [[教學] 我的第一篇 Hexo 文章：使用 hexo-admin 後台管理工具](https://ed521.github.io/2019/08/hexo-admin/)