【免費的Blog】github.io + hexo

May 5, 2019 · 1 min read · github blog hexo install ·

相信身為打字工的各位一定知道GitHub是什麼東西吧？沒有它，人生是黑白的？有了它，就可以提早下班？上面有許許多多前人的貢獻，更有大量的輪子在上面可供免費使用，真的是佛心來的。雖然它被微軟買下來，但是原本要錢的私人倉庫現在變成『免費』使用，真的是太開心了。其實GitHub除了放Code之外，它也有做為靜態網頁的功能，只是一般人都是去使用Google的Blogger、Medium、Wordpress、痞客邦、簡書…等，其實上述的功能都相當的不錯，但是…寫文章是沒有什麼問題的，如果是寫程式相關的文章時，Code的排版跟highlight就相當的重要了，有顏色的話就一目了然，在我的仔細研究之下，github.io是最優的選擇，現在就來記錄一個Blog的產生過程。

新建GitHub靜態網頁倉庫

先登入個人的GitHub

建立一個全新的公開倉庫

倉庫名稱長這樣：<your_github_id>.github.io

建立完成

注意大小寫要一致

安裝Hexo

首先安裝Hexo

首先安裝Hexo，git與nodejs的安裝過程就不贅述

git --version
node -v
npm -v
npm install npm -g
npm install hexo-cli -g
hexo version

建立一個全新的Blog專案

cd ~/Desktop/
hexo init MyBlog
cd MyBlog/
npm audit fix

安裝必要的套件

npm install hexo-deployer-git --save
npm audit fix
npm install
npm audit fix
hexo server -g

安裝完成

可以開啟http://localhost:4000/來試試是否正常運作

設定網頁位置

將靜態網頁的名稱加入到_config.yml檔案之中

deploy:
  type: git
  repository: https://github.com/<your_github_id>/<your_github_id>.github.io.git
  branch: master

將網頁上傳到GitHub上

過程中會要輸入您的GitHub的帳號跟密碼

hexo clean
hexo deploy -g

然後就上傳完成了

是不是很簡單啊，現在可以上網試試看了喲 => <your_github_id>.github.io

安裝佈景主題

佈景主題 - spfk

其實Hexo相關的佈景主題還滿多的，因為夏令電價的關係，所以個人選擇這個環保愛地球的主題 (yelee也不錯)

git clone https://github.com/luuman/hexo-theme-spfk.git themes/spfk
sudo nano _config.yml

設定_config.yml檔

更換佈景主題

theme: spfk

加入與開啟圖片資源

npm install hexo-asset-image --save
npm audit fix

post_asset_folder: true

佈景更新完成

重新啟動網頁，至於Hexo的指令與佈景的設定細節就請參考各官網 => http://localhost:4000/

hexo clean
hexo s -g

加入第一份文章

可以在『<your_blog_name>/source/_posts』中，去編輯Markdown檔案，圖片放在與文件『同名』的資料夾內

hexo new Hello_Hexo
hexo s -g

文章越來越多怎麼辦？

如果文章越來越多的話，要找之前寫過的文章就很難找了，但是要怎麼分資料夾呢？使用hexo new的話，產生的文章會在『source/_posts』之下，如果想要變成產生在『source/_posts/2019』之下要怎麼處理呢？

首先設定在根目錄下的『_config.yml』檔，加入設定，此時生成新的文章就會在『source/_posts/2019』之下

new_post_name: :year/:title.md

然後設定文章模版

然後在『scaffolds/post.md』加入設定，此時文章才會對應在『source/_posts/2019』之下

permalink: {{ title }}

產生新文章

再來就使用『hexo new』產生新文章試試看吧。那舊的怎麼辦呢？就慢慢移，慢慢加『permalink』