---
# System prepended metadata

title: Hexo架站

---

Hexo架站
===
### [Hexo官網](https://hexo.io/zh-tw/)
```
筆者工具描述:
1. Node版本: v18.18.1
2. VScode
3. GitHub
```

## 安裝
```
npm install -g hexo-cli
```

## 指令介紹
### 1. 建立 Hexo 部落格

```
hexo init 你的網站名稱，不需要特別加上''/""
```
- #### 介面介紹
  全站設定
  
    ![1714129362759](https://hackmd.io/_uploads/Byb-5-KZA.jpg)

    這邊的Site區塊就是HTML的[OGP設定](https://medium.com/@bleach1827/metadata-meta-%E7%9F%A5%E5%A4%9A%E5%B0%91-b65470fbece1) 

    ![1714129702799](https://hackmd.io/_uploads/HkvHobt-R.jpg)


### 2. 開啟 Hexo 伺服器
```
hexo server
```
### 3. 開新的文章
```
hexo new "頁面名稱(中/英皆可" ，這邊要記得加上''/""可以從source/posts資料夾查看
```
- 畫面呈現
    ![1714135327468](https://hackmd.io/_uploads/SycEb7KbA.jpg)
    1. title : 當前頁面名稱
    2. date : 創建日期
    3. tags : 該頁面標籤(可以在首頁顯示，以利找尋特定標籤)

### 4. 觀看哪些內容部署到GitHub
```
hexo generate 
```
- 畫面呈現
    ![1714135561398](https://hackmd.io/_uploads/SJCzfmKZR.jpg)
    使用後會出現檔名為public的資料夾
    
### 4. 當更新畫面卡住時
```
hexo clean 
```
- 用這個語法是當打好的內容儲存後畫面沒有動作時，就像是重啟的概念

### 5. 新增新的路徑
```
hexo new page 路徑名稱
```

### 6. navbar新增標籤
- 第一步: hexo-theme-landscape [樣式連結](https://github.com/hexojs/hexo-theme-landscape)

    ```
    git clone --depth 1 https://github.com/hexojs/hexo-theme-landscape themes/landscape
    ```
- 第二步: themes > landscape > config.yml

    ![1714155240445](https://hackmd.io/_uploads/SkybyOKbR.jpg)
    加上剛剛新增的路徑 ps名字一定要跟路徑名稱一樣
    <br>
    結果:
    
    ![1714155697099](https://hackmd.io/_uploads/B14pRZcW0.jpg)
    
### 7. 圖片存放空間([Google Firebase](https://firebase.google.com/))

-  因為GitHub存放空間有限，所以使用這個服務
-  申請&操作步驟
    1. 首頁右上角 > Go to console
    2. 新增專案 > 接受GA分析等等打勾 > 建立專案
    3. 進去專案 > 左邊項目列找到建構 > 點選 Storage
    4. 開始使用 > 以正式版模式啟動 > 完成(大概等30s~1min左右)
    5. 上傳檔案 > 完成後點選檔案 > 點選名稱 > 複製網址丟到hexo裡面即可

### 8. [Hexo + GitHub Pages 官方部署說明(直接看一鍵部署)](https://hexo.io/zh-tw/docs/github-pages#%E4%B8%80%E9%8D%B5%E9%83%A8%E5%B1%AC)
- #### 提醒: config第16行裡面也要改唷
    ![1714205951334](https://hackmd.io/_uploads/HJ1y8VqW0.jpg)

    

