來用Hexo建自己的Blog吧!
寫在頭前
想換個地方寫寫，Medium這邊應該多少會同步更新（吧？），它還是有好處啦，例如追蹤其他人的文章是方便的。
推力：Medium真的不好寫程式碼，沒有Markdown。
拉力：可以建立自己的網域，有Markdown。
前置安裝環境
以下我會盡量手把手教學。
有寫到 $ 字號開頭的指令，是在終端機進行指令操作，與程式碼無關。
我的安裝環境，是macOS (Mojave 10.14.6)，使用iTerm (oh-my-zsh)。
我們需要先安裝
1. Node.js
2. Git
如果是macOS，而且在編譯上出現問題，可能還需要
3. Xcode
這些我都裝過了，所以容我跳過，可能改天換電腦再來加入這系列的文章。
如果你是 Ruby on Rails 的開發者，可能已經安裝過這些了。
那我們用終端機指令檢查一下是否環境已安裝完成。
官方文件只說要Node.js，且限定在特定的版本以上，所以才會有些安裝教學的文章會先安裝nvm，但也要看使用環境有沒有需要經過那一步。
nvm (Node Version Manager) 是 Node.js 版本管理的工具。等同於Ruby的 rvm 。
npm (Node Package Manager) 是 Node.js 的一個線上套件庫，可以下載各式各樣的 Javascript 套件。
yarn和npm同樣功用 ，但它是facebook開源出來的套件管理工具。兩者皆等同於Ruby的gem。
安裝Hexo
1.環境和工具設置好了之後，接著開始安裝Hexo。
官網是用npm，雖然我對yarn的第一印象比較好，但官網這麼用，而且網路教學文章很多都是用npm，但兩者放全域的資料夾可能也是不同的，那我們就一路到底地給它npm裝下去。
$ npm install -g hexo-cli安裝之後，用指令 $ hexo -v 檢查版本，確定有安裝好了。
應該會像這樣，版本號不同沒關係：
2.再來建立、初始化Hexo用的檔案夾，有兩套步驟，擇一。
一種方式是，進到你想放的母層資料夾，在這邊建立你的Blog用資料夾，輸入：
$ hexo init <file_name> # <file_name>就是你自己取的資料夾名稱這邊的 <file_name> 資料夾名稱，如果是用windows+WSL安裝，檔名要記得用小寫。
可以先進去這資料夾查看剛剛hexo幫我們建了什麼，如果跟我一樣，那應該是有建好。
另一種方式是，先建立空的資料夾，資料夾名稱自己取，然後進去資料夾，輸入：
$ hexo init$ hexo init 後面沒輸入資料夾名稱，會預設對現在所在的資料夾進行初始化，但資料夾要是空的，否則可能會報錯。
3.確定進到Hexo資料夾，並安裝相關套件
$ npm install先到這裡，我們先看一下成果。
在終端機輸入：
$ hexo s # s是server的意思
訊息很明顯，我們要開瀏覽器，網址列輸入 localhost:4000 查看
成功一半了，接下來看看怎麼使用Hexo，其實在Hexo生成的這個資料夾裡，就已經有貼文檔案初步說明了，在啟動 hexo server 看到的這首頁第一篇“Hello World”，就有hexo的指令提示，這些開發者真的是很貼心。
簡單新增文章
試著直接用提示的指令，新增文章。
$ hexo new "文章標題"
上面建立 “hello world 2” 這個名稱滿順利的滿順利的，但另一個就沒有。
dquote>
以我這篇文的標題「 用Hexo建自己的Blog吧！」去新增文章，會跳出 dquote>
可能是因為標題最後有 ！ 符號，導致它以為我沒有打完 " 符號。
這時候打 q 或 exit 都沒用，只要補給它一個 " 就可以了；或者用Ctrl+C直接取消指令，修改標題，重做一遍。
完成之後，用你習慣的文字編輯器打開Hexo資料夾看看，我這邊用的是Visual Studio Code。
我們可以在第二個—-- 之下編輯文章內容，且可同時開啟 Hexo server，像開發專案時一樣同步。
還有很多文章寫作的細節操作，有空再講。
我們先回過頭在剛剛建立hexo資料夾那邊，看看裡面生成的檔案和資料夾。
Hexo資料夾
_config.yml
網站配置檔案，可以在此配置大部分的設定。用 yaml 格式編寫。
yaml 檔裡 : 後一定要有一個空格。
主題(theme)、網站名稱，都在這邊設定。
這邊擷取幾個比較重要的來介紹：
# Site
title: Hexo # 網站標題
subtitle: '' # 網站副標題
description: '' # 網站描述，給搜索引擎看的訊息
keywords: # 網站的關鍵詞。支援多個關鍵詞。
author: John Doe # 您的名字
language: en # 網站使用語言，預設為 en。
# 看主題是否支持，具體書寫方式也因主題而異
timezone: '' # 網站時區，Hexo 預設使用您電腦的時區
# URL
url: http://example.com # 網站的網址，
# must starts with http:// or https://
root: / # 網站的根目錄
permalink: :year/:month/:day/:title/ # 文章永久連結的格式# Extensions
theme: landscape # 網站的佈景主題# Deployment
deploy: # 發佈型態，例如(git、heroku...)
type: '' # 部署位置，例如(git@github.com:帳號/REPO名.git)
node_modules
npm安裝的套件都在這。
scaffolds
鷹架資料夾。當您建立新文章時，Hexo 會根據 scaffold裡的檔案來生成文章或分類。
看到這名稱，Rails開發者會心一笑。
source
是放置內容的地方。在一開始只有_posts 文件夾，用來存放發表後的文章。
除了 _posts 資料夾以外，檔案 / 資料夾名稱開頭為 _ (底線) 、隱藏檔案會被忽略。
之後如果生成過草稿文件，就會多出來一個 _drafts 文件夾，用於存放草稿，同時如果生成過獨立頁面，還會生成與頁面名稱相同的文件夾。
themes
網站主題套件存放的資料夾，每個主題一個資料夾，具體名稱可以隨意修改，但修改後，一定要連同根目錄下的 _config.yml 中 的theme一起修改，不然會出現錯誤。Hexo 會根據主題來產生靜態檔案。
如果在theme資料夾下發現了 languages 文件夾，那麼說明這個主題是支持多種語言的。
可以將_config.yml 中的 language修改為文件名中的<language_name> ，例如有zh-TW.yml，就將language 修改為zh-TW 。
Git 初始化
這邊很少人講到，但我覺得在修改主題之前，先commit起來比較好，等一下會上傳GitHub並部署，爽賺綠點點囉～
$ git init
$ git add .
$ git commit -m "git init"
$ git branch -M master main # 因為BLM社會運動，GitHub都建議改名main分支Hexo主題套件 (themes)
學會建立文章之後，再來加點視覺風格。
到官網找主題，可以找自己喜歡的主體，點擊圖片可以參觀demo的網站，點擊文字會跑到這個主題在GitHub上的Repo。
我這邊本來打算用Cards這個主題做我的網站，但做下去之後，發現我能力不足，太難改了，怕會鑽研錯原本此文設定的方向，失去原本要做部落格的初衷。所以我決定隨波逐流，跟隨社群討論度最高的NexT 作主題。
點擊進到NexT的GitHub上，複製repo的位置，準備把它clone下來，如果不熟悉指令可以看看Git和GitHub教學。
終端機這時候在Hexo資料夾操作指令
$ git clone <URL> themes/next<URL>是你剛剛複製repo的網址，後面的 themes/next 表示clone下來的檔案要放入的位置。
在文字編輯器找到themes資料夾下面有剛剛clone回來的主題資料夾，複製資料夾名稱，然後開啟 _config.yml 找到 themes: 進行修改。
修改完畢之後，記得要把Hexo server關掉 ( Ctrl+C )。
再次開啟Server，並查看瀏覽器。
$ hexo s
成功啦！
部署到GitHub Pages
我們接下來要做的事，是符合GitHub Pages的規定，也就是使用了GitHub的這項服務。
新增Repo
點擊 New repository
這個Repository命名，Hexo官網有規定，必須是 <GitHub用戶名>.github.io ，這點要特別注意！
按下 Create repository
看到這頁面，表示新增repo成功，截圖中標出的連結，把它複製起來。
回到Hexo資料夾，找到 _congfig.yml 的 Deployment
如圖示修改成這幾行：
type: git
repo: <剛剛在GitHub repo複製的那段連結>
branch: main # 我前面步驟已經把分支master改為main了要注意的是，這邊 repo 要放的連結，如果是用SSH Key連結的網址，那應該要先設定好SSH Key的連結。
git config設定
如果你使用過 git push 指令，那這步可以跳過。
$ git config --global user.name "你的GitHub名字"
$ git config --global user.email "你的GitHub信箱"$ git config --list # 檢查有沒有設定好
GitHub部署
我們先到剛剛建立的GitHub repo查看 Settings
拉到下方的 GitHub Pages，記住現在顯示的樣子，什麼都沒有，先記著。
回到終端機，因為Hexo沒有預載一鍵部署的功能，需要安裝 hexo-deployer-git 套件幫忙。
$ npm install --save hexo-deployer-git然後做部署
$ hexo generate # 生成
$ hexo deploy # 部署或直接將上面兩行簡寫成：
$ hexo d -g # 生成靜態網頁並部署
會看到類似這樣的畫面，似乎成功了，再去GitHub看一下。
部署完成！接著把上圖中，GitHub Pages 給你的網址複製起來。
設定連結
回到Hexo資料夾
找到 _config.yml 的 URL 區塊，把剛剛GitHub Pages 提供的網址貼上。
再做一次 $ hexo s 應該就有了。
有空再講發文操作、Next的其他擴充工具、Markdown原始檔git版控、hexo指令……
References
Hexo官方文件
GitHub Pages官方簡介
從無到有的 Blog 建置教學 (含 domain 購買轉址)
Ray-歡迎來到網頁世界-Hexo 分類 ← 大推這系列，看完變Hexo小天～才！
喜歡yarn大於npm的，也可以看這些：
记录生活，分享点滴：通过 Hexo 搭建与使用个人博客
使用 Hexo 和 Github 快速搭建个人博客
如果有把Hexo資料夾做 git init ，且因為clone主題下來，導致Hexo資料夾裡有兩層git版控的話，可以看這篇：
在 hexo 中使用 git submodules 管理主題
