用Hexo免費製作一個blog

在種種原因之下，從Blogger牽到GitHub Pages上，陪伴我一學期的Blogger正式停止更新。紀念一下這是原站點 ↗，而讓我跳槽到Hexo的原因如下:

• Blogger 後臺真的十分陽春(上手很難進一步改動)。
• 我習慣使用的Markdown語法需要轉成html再貼上Blogger編輯器。
• 功能被Blogger本體受限。
• 加個程式框還要改css，基本上修改一下自訂主題就不會想再多做修改了。

所以我就跳槽囉~~

# Why GitHub Pages??

選擇Github Pages的原因很簡單:

1. 可以直接使用markdown語法撰寫文章
   • Markdown語法十分輕鬆，且可以簡單插入程式碼
   • 簡單做到排版，讓使用者更專注於文章內容，而非html語法
   • 基本語法CheatSheet ↗
2. 能夠Hosting再GitHub Pages ↗上
   • 只要在Github新建一個username.github.io的倉庫，就能透過username.github.io到達主頁
   • 不需要自己管理主機交由github來處理
3. 可以使用git ↗管理自己的網誌
   • 可以使用branch和merge來管理目前需要更動的文章
   • 刪除文章也可以透過git恢復

# Why Hexo??

使用Hexo前我有試過Jekyll ↗，因為我對Ruby比較熟悉一些。
但是Jekyll的中文資源較少，且Ruby在windows上的表現，hmmm...沒有要戰的意思，不過相對Ruby，Hexo需要的Node.js對windows更友善些。
我覺得最重要的還是Hexo作者tommy351 ↗是台灣人!!還不用起來。
其實還有一些技術性 ↗的關係啦 ！像Ruby文章一多生成網站的速度就會慢很多，雖然Jekyll也有人做出些優化的方法，不過我不想弄得那麼麻煩，所以最後就選擇Hexo啦~

# 安裝流程

安裝Node.js

• 先去Node.js ↗官網下載安裝

安裝 Hexo ↗

• npm安裝

npm install hexo-cli -g

• 安裝成功後，可以輸入來確定版本

hexo version

• 建立自己的blog

hexo init blog  #初始化blog
cd blog         #切換至blog資料夾
npm install     #安裝相關套件
hexo server     #在localhost顯示頁面

• 將文章部屬上github

deploy:
    type: github
    repository: git@github.com:yourname/yourname.github.io.git
    branch: master

在這邊就不贅述github和本機端連線的教學了

• 執行部屬

hexo d

若發生ERROR Deploer not found，執行以下程式碼
npm install hexo-deployer-git --save

# 美化Blog

當然用hexo最重要的就是美化blog囉~
而我使用Next ↗，將它clone至themes資料夾，再修改這邊。

## Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next #修改這行

就可以依造官網調配出屬於你自己的Next。

# 使用編譯器編輯文檔

我自己是使用vscode去撰寫.md檔，可以一邊預覽一邊寫文章相當方便，且搭配終端機可以達成快速撰寫並送出的功能

hexo clean
hexo d -g #d部屬 g=generate

就可以很輕鬆地將md檔自動轉成html並部屬到你的github上了。

# 修改標題顏色

在source/css/_variables/base.styl裡面有個顏色原本的色碼
用w3s ↗選個喜歡的顏色hexo s看一下

# Extra Live2D看板娘

這裡就不說太多

先安裝live2d pkg

npm install --save hexo-helper-live2d

選擇你愛的2D娘 ↗

npm install {你選的}

設定_config.yml加上下面這堆

live2d:
  enable: true
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-haru/02 # 改成你選擇的
  display:
    position: right
    width: 150 
    height: 300
  mobile:
    show: false  #手機顯示

# Reference

Hexo 安裝教學、心得筆記 ↗
Hexo+GitHub，新手也可以快速建立部落格 ↗
用Hexo打造你的專屬Blog ↗
hexo 添加live2d看板动画 ↗
hexo-helper-live2d ↗