利用GitHubPages+jekyll+Markdown搭建個人部落格

YZcxy發表於2017-12-05
Github

GitHub Pages

我的個人理解就是，GitHub Pages就是一個小型託管雲服務，把自己的專案託管上去，就可以直接訪問，所以你還可以把他當做雲盤來用（但我覺得這種做法還有有點極端）:trollface:

所以今天我們就直接使用他的正規用法。 :lemon:

Websites for you and your projects.

  1. 首先你要建立一個GitHub倉庫 什麼，你還不知道什麼是GitHub，趕緊點選這裡。 好吧，你已經是GitHub老司機了，趕緊建立一個username.github.io的倉庫。

  2. 然後克隆你的倉庫到本地，然後建立一個index.html

git clone https://github.com/username/username.github.io
cd username.github.io
echo "Hello World" > index.html
複製程式碼
  1. 將本地倉庫的修改push到GitHub上
git add --all
git commit -m "Initial commit"
git push -u origin master
複製程式碼
  1. ok,現在你可以通過http://username.github.io訪問自己的部落格了。

做到了這裡，聰明的你，如果恰好又是前端大神，ok，可以不用繼續了，開始創造你的部落格吧。:watermelon:

jekyll

為什麼使用jekyll，它能為我們做什麼呢？

個人覺得寫部落格應該關注部落格的內容，而不是一些花裡胡哨的東西(其實很多模板也相當好看)，所以jekyll為我們提供了便捷的方式，讓我們將內容轉換為靜態的頁面。

  • 安裝jekyll

gem install jekyll bundler

可能很多人不知道gem命令是什麼，那我們就先講講gem和budler。:tangerine:

RubyGems 是 Ruby 的一個包管理器，它提供一個分發 Ruby 程式和庫的標準格式，還提供一個管理程式包安裝的工具。

Bundler相當於多個RubyGems批處理執行。在配置檔案gemfilel裡說明你的應用依賴哪些第三方包，他自動幫你下載安裝多個包，並且會下載這些包依賴的包。

所以，你得先安裝好上述東西之後，你就可以愉快的安裝jekyll了。 什麼，不知道怎麼安裝，快看這裡。

  • jekyll建立部落格
//建立自己的部落格目錄
~ $ jekyll new myblog

//進入該目錄
~ $ cd myblog

//啟動服務
~ $ bundle exec jekyll serve

//然後你就可以訪問自己的部落格了 http://localhost:4000
複製程式碼

下面分析一下你的部落格目錄。

.
├── _config.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.textile
|   └── on-simplicity-in-technology.markdown
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.textile
|   └── 2009-04-26-barcamp-boston-4-roundup.textile
├── _site
├── .jekyll-metadata
└── index.html //也可以用index.md代替
複製程式碼
檔案/目錄 描述
_config.yml 儲存配置資料。很多配置選項都可以直接在命令列中進行設定，但是如果你把那些配置寫在這兒，你就不用非要去記住那些命令了。
_drafts drafts（草稿）是未釋出的文章。這些檔案的格式中都沒有 title.MARKUP 資料。學習如何 使用草稿.
_includes 你可以載入這些包含部分到你的佈局或者文章中以方便重用。可以用這個標籤 " include file.ext" 來把檔案 _includes/file.ext 包含進來。
_layouts layouts（佈局）是包裹在文章外部的模板。佈局可以在 YAML 頭資訊中根據不同文章進行選擇。 這將在下一個部分進行介紹。標籤 "content" 可以將content插入頁面中。
_posts 這裡放的就是你的文章了。檔案格式很重要，必須要符合: "YEAR-MONTH-DAY-title.MARKUP"。 永久連結 可以在文章中自己定製，但是資料和標記語言都是根據檔名來確定的。
_data 格式化好的網站資料應放在這裡。jekyll 的引擎會自動載入在該目錄下所有的 yaml 檔案（字尾是 .yml, .yaml, .json 或者 .csv ）。這些檔案可以經由 ｀site.data｀ 訪問。如果有一個 "members.yml" 檔案在該目錄下，你就可以通過 "site.data.members" 獲取該檔案的內容。
_site 一旦 Jekyll 完成轉換，就會將生成的頁面放在這裡（預設）。最好將這個目錄放進你的 ".gitignore" 檔案中。
.jekyll-metadata 該檔案幫助 Jekyll 跟蹤哪些檔案從上次建立站點開始到現在沒有被修改，哪些檔案需要在下一次站點建立時重新生成。該檔案不會被包含在生成的站點中。將它加入到你的 ".gitignore" 檔案可能是一個好注意。
HTML, Markdown, Textile files 如果這些檔案中包含 YAML 頭資訊 部分，Jekyll 就會自動將它們進行轉換。當然，其他的如 .html, .markdown, .md, 或者 .textile 等在你的站點根目錄下或者不是以上提到的目錄中的檔案也會被轉換。

如果自帶的模板滿足不了你，可以參考這裡。

關於模板的使用，就是將別人的倉庫拷貝到自己的GitHub倉庫，然後修改_posts中的部落格內容就好了。

Tips:當你發現一些大牛的GitHub Pages很漂亮很實用，克隆他的倉庫到本地，拷貝到自己的倉庫，然後你就可以愉快的寫自己的部落格了。

Markdown

我覺得Markdown其實就是一種標記語言，讓你的文字通過簡單的標籤，變得有序，變得格式化。總之，易學實用，值得入手。

我這裡就推薦一個參考地址吧，戳這裡。

將你創作的Markdown部落格檔案，放入jekyll倉庫的_posts目錄下，然後push到GitHub上，完工。

Tips: 在push之前最後先在本地bundle exec jekyll build一下看看有沒有問題

好了，到這裡一個高逼格，專注於內容的部落格系統已經搭建好了，請開始你的創作吧。:strawberry:

相關文章