1. 程式人生 > >Github Pages + Jekyll 創建個人博客

Github Pages + Jekyll 創建個人博客

工具 服務器 發表 靜態網頁 comm config hub 過程 CA

正文之前

在去年的時候接觸到了Github,同時也了解到了Github Pages,這是Github為每位用戶提供的一個能夠作為個人主頁的倉庫,上個月才開始搭建個人倉庫,應網友的請求,寫一篇搭建個人博客的過程。

關於題目中說到的Jekyll,是一個靜態博客網站生成器,也就是說,用MarkDown寫完的文章,經過你選定的Jekyll模板的轉換,就能夠生成面向公眾的靜態網頁了,而且Jekyll集成了服務器,支持本地預覽

技術分享圖片

正文

接下來說重點:

1. 創建倉庫

既然是每個用戶只能有一個主頁,所以倉庫的名字肯定是要特殊化的:

用戶名.github.io

我創建了一個小號來做這個示範:

技術分享圖片

2. Jekyll工具

準備一個Linux系統,來使用Jekyll工具,我用的是虛擬機裏的Ubuntu系統

具體的Jekyll下載過程:

  1. 需要配置按照官網給出的環境:

技術分享圖片

  1. 安裝Jekyll:

Ubuntu鏡像應該自帶上述環境,我直接進行了jekyll的安裝:

gem install jekyll

技術分享圖片
  1. 挑選模板

在jekyll的模板目錄中挑選自己喜歡的,並找到模板的GitHub地址,這裏要將一點,推薦選用那些有空白模板的,免得有很多需要修改的信息

我們以模板中的第一個模板為例

技術分享圖片 找到模板的源碼位置: 技術分享圖片

3. 本地編輯

把這個模板倉庫和你剛才創建的博客倉庫下載到本地,並且認真閱讀模板項目中的README文檔,文檔裏有關於模板的基礎配置,一些特點以及博客文章的規範等信息

具體的操作試模板而定,我是直接把模板裏的所有文件(除了README文檔)全部復制到我的倉庫裏,簡單粗暴,然後push

4. Jekyll目錄

官網給出的基本的目錄是這樣的:

技術分享圖片

然後我以我的博客目錄來解釋一下這些文件夾:

  • _config.yml

是核心的配置文件,裏面包含了你的博客的基本信息,網頁的地址,其他的鏈接以及MarkDown格式等信息

  • _includes

是一些可重用的組件,比如Github、知乎和簡書的鏈接,谷歌分析的代碼等等

  • _layouts

是你博客網頁的布局

  • _posts

這裏存放要發表的文章,也就是需要被轉換成.html.md文件

  • _site

這個文件夾是存放Jekyll轉換完成的頁面,官方推薦最好放入.gitignore 文件中,以免被他人查看

其他沒有提到的是我沒有使用到的,當然我使用的博客模板中還有一些如css, js, img, font之類的目錄,這些都視模板而定

5. 發布文章

  • 文章標題

年-月-日-標題.MARKUP,比如當前這篇文章就是:

2018-05-28-Github Pages + Jekyll 創建個人博客.md

  • YAML頭信息

每篇文章都需要YAML頭信息,具體的信息是由你的模板決定的

  • Jekyll轉換

把添加了頭信息和修改了標題的文章放至_posts文件夾中,然後在博客倉庫內使用 jekyll serve 命令:

技術分享圖片

運行之後可以在本地預覽博客內容,端口為:http://localhost:4000:

技術分享圖片

預覽完成之後,用git命令來進行add和commit,並且push本地倉庫,過幾分鐘登陸博客地址,就能夠看到內容更新了:

技術分享圖片

git add
git commit
git pull
git push

這四條命令就夠了,博客的基礎搭建就這樣結束了,祝大家都能挑選到心儀的模板。

Github Pages + Jekyll 創建個人博客