# Jerry的HEXO分享
## 連結
* [上課簡報](https://jerry080401.github.io/From-Hexo/)
* [HEXO](https://jerry080401.github.io/)
## 前置作業
在開始HEXO前，必須先在電腦安裝下列工具:

* [Node.js](https://nodejs.org/en/download/) 提供npm來安裝所需的套件。這裡可以選擇安裝最新的V20.12.2版本
> HEXO官網建議使用10.0級以上版本，若不確定下載哪個版本可以使用終端機輸入
> `npm versin` 查看版本號

---
* [Git](https://git-scm.com/) 用來將網站發布到Github Page
> Git基礎用法可參考:[Denny學長的Git教學(上)](https://hackmd.io/@EJuMQJj_QPylQryxaYpC-Q/S1L8jjah6)
>

> [補充]Git是用來版本控制的程式；GitHub則是提供存放Git Repository的服務，讓使用者能在視覺化界面進行管理。

## HEXO環境設置
### Step1.安裝HEXO

開啟CLI介面(cmd, powershell ...等終端機)輸入:

$ cd ~

> 返回根目錄

輸入下列的安裝指令:

$ npm install -g hexo-cli

> hexo-cli 會安裝HEXO，同時安裝HEXO的命令使得使用者可以直接通過命令來操控HEXO

安裝完後可輸入`hexo version`或`hexo -v`查看HEXO版本，確認是否有安裝成功


## 初始化HEXO

直接輸入以下指令，會在當前目錄下新增一個資料夾用來使用HEXO。

$ cd ~
$ hexo init <資料夾名稱>

> 記得將括號內修改成要放HEXO的資料夾名稱，若不指定資料夾名稱，則會直接初始化當前目錄:

我們進入剛剛初始化的資料夾:

$ cd <資料夾名稱>

## 在資料夾安裝所需的檔案

cd進入剛剛初始化的資料夾後，執行下列指令，安裝所需的npm檔案:

$ npm install


## 測試

在編輯網頁的過程中需要時刻瀏覽網頁，可以輸入以下指令:

$ hexo s

>這裡的s是sever的意思，hexo會啟動本地端伺服器，預設路徑為`http://localhost:4000/` 按Ctrl+C即可關閉
>!注意!hexo s只能在自己的電腦上看到。

## 部屬到GitHub

### 1. 初始化版本庫

$ cd <剛剛建立的資料夾>
$ git init

### 2. 建立新的GitHub repository

將專案名稱命名為`username.github.io`，username記得改成自己的帳號喔。


進入剛剛建立的資料夾，輸入以下指令:

$ cd <剛剛建立的資料夾>

> `$ git remote add origin ....`
要用自己的資料庫裡的喔

### 3. 定義 GitHub Actions工作流程
1. 輸入以下查詢Node.js版本號

$ node --version

2. 輸入以下指令開啟vscode:

$ cd <剛剛創建的HEXO資料夾>
$ code .

3. 在vscode中找到`.github/workflows`在資料夾底下建立`pages.yml`並填入以下內容

name: Pages

on:
  push:
    branches:
      - main  # default branch

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          token: ${{ secrets.GITHUB_TOKEN }}
          # If your repository depends on submodule, please see: https://github.com/actions/checkout
          submodules: recursive
-      - name: Use Node.js 20
+      - name: Use Node.js 自己的版本號
        uses: actions/setup-node@v4
        with:
          # Examples: 20, 18.19, >=16.20.2, lts/Iron, lts/Hydrogen, *, latest, current, node
          # Ref: https://github.com/actions/setup-node#supported-version-syntax
          node-version: '20'
      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: npm install
      - name: Build
        run: npm run build
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./public
  deploy:
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

> 將`name: Use Node.js 20`中的20改為自己的node.js版本號

### 4. 在GitHub中前往`Settings/Pages/Source`將`Source`改為`GitHub Actions`