1. 新建 github.io 項目
其實 github pages 有兩個用途,大家可以在官方網(wǎng)頁看到。其中一個是作為個人/組織的主頁(每個賬號只能有一個),另一個是作為 github 項目的項目主頁(每個項目可以有一個)。
而 github pages 本身就支持 jekyll ,所以二者的結(jié)合使用非常方便。
這兩種靜態(tài)頁面怎么生成在 https://pages.github.com/ 這里都有詳細步驟。
所以現(xiàn)在既然我們要建的是個人博客,就是第一種用途了。
- 在
github上新建一個 repo,命名為username.github.io,其中username就是你的github用戶名。 - 把該項目 clone 到本地。
- 進入項目目錄,在根目錄下創(chuàng)建
index.html,這個會自動作為博客的主頁。 - 把所有的修改通過
git push到剛剛創(chuàng)建的 repo。 - 好了,現(xiàn)在我們可以通過
https://username.github.io來瀏覽我們的個人網(wǎng)站了。
2. 安裝、使用 jekyll
網(wǎng)站跑起來了,但是里面沒內(nèi)容。當然我們可以自己寫各個頁面去豐富她。但是這樣比較麻煩,弄個人博客我們主要關注的當然是寫博文,而不想每次寫一篇文章都要自己去排版一個頁面。jekyll 就是可以幫助我們實現(xiàn)只要關注寫文章本身,她會幫我們自動轉(zhuǎn)化成靜態(tài)頁面。
可以看一下官網(wǎng)的描述
Jekyll 是一個簡單的博客形態(tài)的靜態(tài)站點生產(chǎn)機器。它有一個模版目錄,其中包含原始文本格式的文檔,通過一個轉(zhuǎn)換器(如 Markdown)和我們的 Liquid 渲染器轉(zhuǎn)化成一個完整的可發(fā)布的靜態(tài)網(wǎng)站,你可以發(fā)布在任何你喜愛的服務器上。Jekyll 也可以運行在 GitHub Pages 上,也就是說,你可以使用 GitHub 的服務來搭建你的項目頁面、博客或者網(wǎng)站,而且是完全免費的。
支持 markdown ,非常方便。
下面我們開始安裝 jekyll 并且新建一個項目看一下。
# 安裝jekyll
gem install jekyll
# 新建項目
jekyll new myblog # myblog 是項目名
# 進入項目目錄
cd myblog
創(chuàng)建成功后的項目目錄是這樣的

因為現(xiàn)在最新版(3.8.3)的 jekyll new 命令創(chuàng)建的項目默認已經(jīng)用了主題了(可以在 _config.yml 配置文件下看到 theme: minima 這一行),因此我們要安裝相應的依賴。
# 安裝依賴包
gem install jekyll bundler
bundle install # 這個命令會自動安裝項目所需的依賴
# 啟動一個本地服務器,而且啟動后還會自動監(jiān)聽文件,如果本地修改了某個文件,會重新生成靜態(tài)頁面,我們只需要在瀏覽器刷新一下就好
jekyll serve
啟動后應該能看到以下的輸出

這時候我們就能在本地通過 http://127.0.0.1:4000/ 來預覽效果了。

PS:有一些預設的設置可以在 _config.yml 配置文件里面修改。
3. 怎么寫一篇文章
大家可以先看看 jekyll 項目的目錄結(jié)構(gòu)
所以新增文章應該在 _posts 目錄下操作,而且注意命名要按照 年-月-日-標題.后綴名 的格式。
現(xiàn)在我們來新建文章。
cd _post
touch 2018-08-14-my-first-article.md
2018-08-14-my-first-article.md 文件輸入以下內(nèi)容
---
layout: post # 使用post模版
title: "我的第一篇文章"
date: 2018-08-14
categories: life
---
這是我的第一篇文章
再啟動一下 jekyll serve 就能看到效果了。


4. 使用 jekyll 主題美化網(wǎng)站
內(nèi)容知道怎么創(chuàng)建了,但是現(xiàn)在網(wǎng)站太簡陋了。那怎么辦?不用擔心,jekyll 本身已經(jīng)提供了挺多主題供我們選擇使用。大家瀏覽 Jekyll Themes 這個網(wǎng)頁慢慢選吧~~
至于每個主題怎么用最好還是看這個主題項目的說明,具體可能不太一樣,我就不細說了。
記得最后修改完在本地預覽沒問題后要 git push 到 github 上哦~~
參考鏈接:
GitHub Pages
Jekyll文檔
快速在 Windows 上搭建 Jekyll 開發(fā)環(huán)境
本文首發(fā)于我的個人博客【https://dandelion-drq.github.io】,轉(zhuǎn)載請標明出處。