Hexo + Github Pages 搭建圖檔部落格

Github Pages

提供了一種不需要購買域名，搭建部落格的方式。具體教程各種部落格都有所介紹，這裡就不贅述了。

關于 Github 建庫 可以參考官方教程：Hello World

關于 Github Pages 可以參考官方教程：Github Pages

關于 Hexo 安裝 可以參考官方教程：Hexo中文文檔

按照官方教程安裝Hexo之後，就可以建站了。依次輸入以下指令：

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

等待一會兒，建站成功。

預設使用的主題是landscape，可以在

themes

檔案夾中檢視。

Hexo 主題

Hexo 有很多主題可供使用：Hexo主題

因為blog主要以分享攝影作品為主，适當添加一些文字，是以我用了 Sharvari Desai 的 edinburgh 主題，個人很喜歡這個風格，首頁展示圖檔，整體畫面非常簡潔，連結放在下面。

https://github.com/sharvaridesai/hexo-theme-edinburgh

建立

以下是一些常用指令。

• hexo new post "title"

  建立文章

  或者

  hexo new "title"

  ，這裡的預設設定可以在

  _config.yml

  中更改

  

• hexo new page "page title"

  建立頁面

  例如，首頁有 About、Contact、Archives 等，希望點選後跳轉到相應頁面。可以分别建立以下頁面：

  > hexo new page "About"
  > hexo new page "Contact"
  > hexo new page "Archives"
             

  再在

  _config.yml

  中設定相應的連結位址：

  

• hexo new draft "draft title"

  建立草稿

  預設設定下，草稿不會在頁面中渲染出來。

插入圖檔

Hexo 中，在文章裡插入圖檔有多種方法。

• 方法一：Markdown 文法

  

• 方法二：Hexo 标簽插件

  {% img [class names] /path/to/image [width] [height] [title text [alt text]] %}

• 方法三：Html 文法

  <img src=" " style="zoom:50%"/>

  <img src=" " width="200" height="100"/>

注意

1. hexo 中，将圖檔統一放在

   source/image

   檔案夾中，在post中可以通過

   /image/img.jpg

   相對路徑擷取圖檔。
2. 使用 hexo-asset-img 插件在文章中插入圖檔，預設原圖大小，圖檔的尺寸需要另行設定。
3. 圖檔尺寸設定，hexo允許在 md 檔案中使用

   img

   标簽，通過添加

   width

   height

   style

   等屬性設定圖檔寬高。
4. 文章中使用圖檔過多，頁面顯示速度會很慢，建議使用 CDN加速。
5. 圖床可使用微網誌圖床，七牛雲等。七牛雲存儲需要綁定域名，因為認證完成後給的測試域名30天後會自動回收。
6. 可以在阿裡雲上購買域名，這個域名建議專門用于綁定七牛雲。一般用二級域名。

最後

歡迎通路我的部落格： 柚子燒酒

才開始搭建，比較生疏，很多功能都沒有實作，後續會慢慢維護。（抱拳）