--- title: 使用 Hexo 在 GitHub Pages 上建立 Blog date: 2017-08-12 16:59:57 tags: Hexo, GitHub --- # 使用 Hexo 在 GitHub Pages 上建立 Blog ## 前言 最近想開始把一些學習的筆記記錄下來，但又覺得筆記分散在各個資料夾裡不容易整理，瀏覽起來也不方便，因此興起了寫網誌的念頭。本來想直接用現成的 Google Blogger 來紀錄，但覺得在網頁上進行編輯與排版實在是有點麻煩，就開始尋找一個可以將 markdown 文件轉成 html 並幫我把版面全部搞定的方案，這樣我就只要專心紀錄內容就好，不需要去煩惱排版之類的問題。 搜尋了相關資料後，發現 GitHub 提供一個免費的空間讓使用者建立網頁，而且透過 Hexo 可以快速的使用別人設計好的網頁樣板，於是開始嘗試安裝 Hexo 並把 Blog 放在 GitHub 上。 ## 事前準備 1. 一個 GitHub 帳號 2. 先 Google 搜尋一下 `Hexo Theme`，確定有喜歡的 open source 樣板，再開始安裝 ## 安裝 1. 安裝 nodejs ```bash sudo apt-get update sudo apt-get install nodejs ``` 2. 安裝 npm ```bash sudo apt-get install npm ``` 3. 安裝 Hexo ```bash sudo npm install -g hexo-cli ``` 4. 安裝 hexo-deployer-git ```bash sudo npm install hexo-deployer-git --save ``` ## 建立網誌 1. 建立 Hexo 工作空間，其中 HEXO_FOLDER 為資料夾的名稱 ```bash hexo init HEXO_FOLDER ``` 執行後，會自動生成資料夾和一些預設的檔案 2. 進入 Hexo 工作空間，啟動 Hexo server ```bash cd HEXO_FOLDER hexo server # or hexo s ``` 使用瀏覽器開啟 http://localhost:4000 ，確認 Hexo 是否順利安裝 ## 連接 GitHub，並發布網頁 1. 在 GitHub 上建立一個名為 `USERNAME.github.io` 的 repository，其中 USERNAME 為 GitHub 的帳號名稱 2. 開啟 Hexo 工作空間資料夾中的 `_config.yml`，將 Hexo 與 GitHub repository 連接 ```yml # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: git@github.com:USERNAME/USERNAME.github.io.git branch: master message: 'Updated:{{now("YYYY-MM-DD HH:mm:ss")}}' ``` 3. 將網頁發布至 GitHub ```bash cd HEXO_FOLDER hexo clean hexo generate # or hexo g hexo deploy # or hexo d # generate and deploy in one line: hexo d --g ``` 發布後，使用瀏覽器開啟 http://USERNAME.github.io 即可看到網頁內容 4. 網誌內容更新： * 更新並啟動 server: `hexo s --g` * 更新並發布至 GitHub: `hexo d --g` ## 使用其他主題 1. 複製想要的 Hexo Theme 到 Hexo 工作目錄下的 theme 資料夾 ```bash cd HEXO_FOLDER/theme git clone https://github.com/FAVORITE/THEMENAME.git ``` 2. 開啟 Hexo 工作空間資料夾中的 `_config.yml`，將 theme 設定為 clone 下來的資料夾名稱 ```yml # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ ## theme: landscape theme: THEMENAME ``` 3. 更新並啟動 server，確認是否成功 ```bash hexo s --g ``` --- ## 參考資料 * [Ubuntu平台下通过Hexo在Github上搭建博客教程(一)](http://www.jianshu.com/p/a3ab83dba041) * [Ubuntu平台下通过Hexo在Github上搭建博客教程(二)](http://zhufj.com/2016/08/14/%E9%80%9A%E8%BF%87Hexo%E5%9C%A8Github%E4%B8%8A%E6%90%AD%E5%BB%BA%E5%8D%9A%E5%AE%A2%E6%95%99%E7%A8%8B-%E4%BA%8C/ ) * [在Ubuntu系统下用Github和Hexo建立自己的博客](http://gniba.com/2016/07/07/blog-hexo-github-ubuntu.html)