# 建立個人網誌系統HEXO

## 說明
- 透過AWS建立個人網誌系統HEXO
- HEXO介紹
- 暫時展示網址: http://ec2-52-204-177-131.compute-1.amazonaws.com:4000/ (棄用)

### 在 AWS 以 Cloud 9 快速建立環境

### 1. 建立 Cloud9 基本開發環境
:::spoiler
### 摘要
- 用AWS Cloud9環境可以線上開發，配合開啟一個EC2即可。
- 程式碼整理為複製貼上即可架起網站服務。
- 為了設定InBound Rule，需要設定VPC、Subnet，才能設定Secerity Group的InBound Rule，開啟4000Port或其他。
- 最後至所屬EC2設定好InBound Rule，取得對外連線位址即可完成。
---
- 原本應該要本機電腦建立Git版本控制環境佈署在EC2上，本教學先採用AWS Cloud9線上IDE部署
- 選取Cloud9
- 
- 建立環境
- 
- 命名選擇下一步
- 
- 建立新的EC2
- 
- 
- 採用預設方案t2.micro，平台選Ubuntu示範
- 
- 選擇下一步，確認後建立環境。稍後在建立VPC與Subnet、Security Group。
- 
- 啟用Cloud9介面，下方為終端機指令輸入處
- 

:::

### 2. 設定安全連線

:::spoiler
- 另開AWS服務頁面，搜尋VPC，點擊進入設定
- 
- 創建新的VPC，命名Hexo，IPv4 CIDRs輸入10.0.0.0/16
- 
- 選項創建新的Subnet
- 命名sb1，選擇所屬VPC(Hexo)
- 命名sb01，AZ選第1個，IPv4 CIDRs輸入10.0.10.0/24，按下Creat subnet
- 
- 
- 至AWS服務頁面，到EC2，點選Security Group設定
- 
- 
- 選擇對應Cloud9創建EC2的名稱(這邊範例關鍵字為Hexo-blob)，切換到Inbound rules，點選Edit
- 
- 按下新增Rule，Port輸入4000，Source選Anywhere IPv4，並Save rule。
- 
- 回去檢視您的EC2實例有沒有設置好Security Group，沒有的話可以在Actions修改。
- 
:::

## 3. 建立 Hexo 部落格撰寫環境

- 在終端機複製貼上以下程式碼，中斷的話從中斷處重新貼上執行:

    sudo apt-get update
    apt install npm
    
    npm install -g hexo-cli
    sudo apt-get install nginx -y
    hexo init hexo
    cd hexo
    npm install

- 可編輯的文章草稿在sourse->_posts資料夾，設會有hello-world.md一篇。
- 新增文章以`hexo new <標題名稱>`建立空白文章。如果會用Makedown語法，就可以快速寫筆記了!

    hexo new first-post

- 編輯完請按`ctrl+s`儲存。
- 要產生部落格頁面，執行`hexo generate`即可

    hexo g

- 再執行`hexo server`，即開啟網頁服務等待使用者連線

    hexo s


#### 查閱部落格
- 找到公開網址並點擊，在EC2的instance的對應實例，詳細資料之中可以找到，點擊他
- 
- 如果您此時Cloud9仍在伺服器開啟的狀態，將聯外網址改為http而不是https連線，並加上`:400`像是`http://[你的聯外網址]:4000`
- 
- 建立完成
- 

#### 終止服務
- 回到Cloud9終端機執行`ctrl+d`中斷服務。
- 將所屬EC2實例stop。
- 下次要連線的話再至cloud9終端機目錄資料夾輸入`hexo s`開啟服務

#### 回到服務
- 至cloud9終端機輸入`hexo s`開啟服務，`-debug`模式開啟後，任何在cloud9文章更新都可以及時渲染網頁，請記得程式修改後要儲存(ctrl+s)，網頁要刷新(F5)

    cd hexo
    hexo s -debug

## 參考
- https://hexo.io/zh-tw/docs/
- https://zhuanlan.zhihu.com/p/45287915

---

## 繼續研究HEXO

- 參考 https://hackmd.io/@Heidi-Liu/hexo-theme
- Keep官網 https://keep-docs.xpoet.cn/

### 更改主題

- 到 https://hexo.io/themes/ 找自己喜歡的，這次選擇 [Keep](https://github.com/XPoet/hexo-theme-keep)

- 參考 keep主題的 [github](https://github.com/XPoet/hexo-theme-keep)說明

    $ cd [您的hexo目錄]

    $ npm install hexo-theme-keep
    或
    $ git clone https://github.com/XPoet/hexo-theme-keep themes/keep


- 修改主題設定，在`config.yml`找到theme，改成 `theme:keep`
- 更新

    npm update hexo-theme-keep

`

---

## windows10
- 安裝須以管理者權限執行Powershell
- 如果遇到`hexo : 因為這個系統上已停用指令碼執行，所以無法載入`，表示執行腳本工具受到限制，可以適當的調整權限
- 調整方式: 使用管理員身分執行powershell(在開始按滑鼠右鍵跳出選單)，輸入`Get-ExecutionPolicy -List`查看權限，本次修改為`Set-ExecutionPolicy RemoteSigned`，**可以使用本機所撰寫的腳本檔案，不需要簽署就可以執行，但是從遠端下載的腳本就必須經由可信任的發行者簽署後才可以執行。**並選擇同意Y。

    Set-ExecutionPolicy RemoteSigned

- 修改完成後hexo cli命令列指令即可順利執行。
- 參閱https://hsiangfeng.github.io/other/20200510/1067127387/

- 在windows powershell可執行的安裝指令

    npm install -g hexo-cli
    wget -o nginx.zip http://nginx.org/download/nginx-1.21.4.zip
    Expand-Archive .\nginx.zip

    hexo init hexo
    cd hexo
    npm install

- Hexo操作

    hexo new "新文章標題"

    # 清除暫存，較穩定
    hexo cl

    # 將MD檔渲染成靜態網頁
    hexo g

    # 啟動伺服器，port:80
    # -debug方便開發時看資訊，實際部屬不用
    hexo s -p 80 -debug