# Hexo 部落格架設

環境配置
* 安裝[NVM](https://github.com/nvm-sh/nvm)
* 安裝 [Node.js](https://nodejs.org/en/)
* 安裝 [Git](https://git-scm.com/)

# NVM,Node.js

> Node Version Manager

Node的版本控制器，因應各種不同需求所有有辦法下載不同版本的node.js是很重要的!

記得要在WSL的環境下安裝喔!
[在windows安裝WSL](https://hackmd.io/csXtjcARRWmb9AS3mKC1oQ)

並且使用VScode開啟

## Installing and Updating

* 記得終端機環境要選WSL

* 安裝NVM
`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash`

* 更新Node.js到最新版本

`nvm install --lts`

# Hexo

[Hexo](https://hexo.io/zh-tw/)

## Installing and Updating

`$npm install hexo-cli -g`

`$hexo init blog`

`$cd blog` 一定要找到資料夾裝在哪邊!不然之後推不上去Github

`$npm install`

`$hexo server`

最後一部完成之後基本上就可以得到本地端的Blog雛形


## 使用 Hexo

這邊必須先把Hexo的資料夾init才能跟Github作部署

$ hexo init <folder>
$ cd <folder>
$ npm install

使用Vscode 的資料夾會長這樣


* _config.yml：網站 配置 檔案，可以在此配置大部分的設定。
* themes：主題 資料夾。Hexo 會根據主題來產生靜態檔案。

## 常用指令

`$ hexo generate` (hexo g) 產生靜態檔案，會在目錄下產生public 資料夾。
`$ hexo server` (hexo s) 啟動伺服器，預設是 http://localhost:4000/。
`$ hexo deploy` (hexo d) 部署網站。（ 比如 github, heroku 等平台 ）

`$ hexo new [layout] <title>` 如果沒有設定 layout 的話，則會使用 _config.yml 中的 default_layout 設定代替。

`$ hexo new “postName”` 新建文章
`$ hexo new page “pageName”` 新建頁面

所有的文章都會在source/_posts裡面。一開始裡面就已經有一篇範例文章hello-world.md了。

常用组合

`$ hexo d -g` 產生靜態檔後部署
`$ hexo s -g` 產生靜態檔後預覽

## 更換主題

[Hexo主題](https://hexo.io/themes/)

Element

是我選取的主題內容

* 必須先使用`git clone`
抓到本地端的資料夾內，後方的themes/element是你要存放的資料夾位置跟名稱

`git clone https://github.com/artchen/hexo-theme-element.git themes/element`

* 詳讀主題作者的Github內容
會有很多安裝資訊以及客製化的方法每一個主題都不太一樣，我這邊有很多必須先預裝的plugins(插件)

This theme depends on the following Hexo plugins:

hexo-generator-tag
hexo-generator-feed
hexo-renderer-ejs
hexo-renderer-scss
hexo-renderer-marked
hexo-pagination
hexo-all-minifier
hexo-autoprefixer
hexo-front-matter

* 接著修改網站設定_config.yml
他原本預設是landscape


* 重新啟動server

`$ hexo server`

* 就可以使用主題摟!

## 在 GitHub 上新增 GitHub Pages

重點來了，讓Blog上線!

1. 在GitHub 創建一個名稱為`<username>.github.io` 的專案


1. 安装 deploy git 插件

`npm install hexo-deployer-git --save`

3. 在主題配置文件 _config.yml 中修改 repository 名稱


4. 執行 hexo d 即可發佈到 GitHub 上

<username>.github.io 到真實的網頁上面輸入就可以看到剛剛推上去的Blog搂!