使用minimal mistakes美化jekyll

1 分鐘閱讀

想必很多人都聽過Jekyll,網路上有很多把jekyll放上github page當的教學,jekyll有很多theme可以選擇,minimal mistakes是其中之一,而小弟的blog也是用這個theme,個人使用上覺得還不錯,所以分享給大家:)
內容可能有錯,如果有需要更正,請聯絡小弟;)

安裝 dependency

先安裝ruby
Windows安裝包下載 | 其他平台安裝說明

再安裝git
官方下載連結&說明

安裝jekyll

安裝jekyll的gem

$ gem install bundler jekyll

建立blog環境

$ jekyll new myblog

進入工作資料夾

$ cd myblog

以debug mode啟動blog

$ bundle exec jekyll serve

在網址列輸入http://localhost:4000/ ,就能看到第一個jekyll blog啦 ;)

套用minimal mistakes

因為如果要從jekyll生成的原生blog改要改太多了,小小弟推薦直接clone官方的例子並修改成自己的網站:)
回到user目錄

$ cd ~

把example clone 到桌面

$ git clone https://github.com/mmistakes/minimal-mistakes.git
$ cd minimal-mistakes

移除不必要的檔案
這些檔案是minimal-mistakes官方開發用的檔案

linux/mac:

$ rm -rf .editorconfig .gitattributes .github ./docs ./test CHANGELOG.md minimal-mistakes-jekyll.gemspec  README.md screenshot-layouts.png  screenshot-layouts.png

windows:

$ rmdir /S .editorconfig .gitattributes .github ./docs ./test CHANGELOG.md minimal-mistakes-jekyll.gemspec  README.md screenshot-layouts.png  screenshot-layouts.png    

取代 Gemfile 裡面的內容
把 Gemfile 改成下列內容

source "https://rubygems.org"
gem "jekyll"
gem "minimal-mistakes-jekyll"

以debug mode啟動blog

bundle exec jekyll serve 在網址列輸入http://localhost:4000/ ,就能看到 以minimal mistakes主題呈現的blog就出來了

但是目前還每有顯示一則文章,接下來我們要新增文章

在minimal mistakes主題下發文

新增_posts資料夾,並到_posts資料夾裡

$ mkdir _posts
$ cd _posts

在_posts資料夾下建立一個檔案
檔名的命名方式:
[年]-[月]-[日]-[標題].md (Ex. 2019-07-03-hello_world.md)
檔案內容格式:

---
title: 標題helloworld
layout: single
category: 分類
tag: 標籤
---
第一篇blog的內文

以debug mode啟動blog

$ cd ..
$ bundle exec jekyll serve

等一下就會看到post成功出現摟:) minimal mistakes的一些參數設定 — _config.yml裡,有很多參數可以設定,從google分析的追蹤碼到網站名稱都是從這裡設定的歐。

  • title: [網站名稱] #名稱會顯示在左上角
  • locale: [地區] #zh-TW後,你的blog會被中文化!
  • url: [網址] #網站的網址

  • author: #以下會顯示在左側的自我介紹欄
    • name:[作者名字]
    • avatar:[大頭貼網址]
    • bio:[自我介紹]
    • location:[你的位置]
    • email:[你的email]

以上是基本要設定的參數

把生成的網站放上github page

以production mode生成blog

$ JEKYLL_ENV=production jekyll build

真正的網站在 _site 料夾裡

$ cd _site

把內容push 到你的github上

完成!!

留言