Welcome To Jekyll

時間 2019-11-08

標籤 welcome jekyll 简体版

原文原文鏈接

博客原文：http://huangyanxiang.com/2017/09/20/welcome-to-jekyll.htmlcss

歡迎來到Jekyll, 本文將帶你初步領略Jekyll的風采。html

Jekyll 到底是什麼？

Transform your plain text into static websites and blogs.java

Jekyll 是一個簡單的靜態站點生產器。根據它的規範，咱們能夠將咱們書寫的 Markdown （或者 Textile）以及 Liquid 轉化成一個完整的可發佈的靜態網站，你能夠發佈在任何你喜好的服務器上。Jekyll 也能夠運行在 GitHub Page 上，也就是說，你可使用 GitHub 的服務來搭建你的項目頁面、博客或者網站，並且是徹底免費的。git

官方網站：github

快速指南

安裝 Jekyll 至關簡單，可是你得先作好一些準備工做，開始前你須要確保你在系統裏已經有以下配置。web

Ruby: Jekyll須要Ruby環境
RubyGems: 這貨是Ruby的包管理工具，相似brew, yum之類的，咱們能夠經過它去安裝Jekyll

安裝好Ruby 和 RubyGems後，你只須要打開終端輸入如下命令就能夠了：shell

# Install Jekyll and Bundler through RubyGems
~ $ gem install jekyll bundler

# Create a new Jekyll site at ./myblog
~ $ jekyll new myblog

# Change into your new directory
~ $ cd myblog

# Build the site on the preview server
~/myblog $ bundle exec jekyll serve

# Now browse to http://localhost:4000

Bundler是Ruby的其餘gems的管理者。json

jekyll new 命令會使用Jekyll minima主題構建一個Jekyll項目，若是你想要構建一個空白的項目，可使用：數組

# Create a new blank Jekyll site at ./myblog
~ $ jekyll new myblog --blank

一個Jekyll站點通常會添加一些有用的插件或依賴，這些插件或依賴配置在站點下的Gemfile文件中。sass

bundle exec 處理Gemfile並管理相關依賴的，若是你的站點是空白的項目，沒有什麼依賴，能夠只執行 jekyll serve 便可。

jekyll serve 會自動執行 jekyll build 命令，若是你不須要啓動本地預覽，你能夠只執行 jekyll build 構建站點靜態資源。

幫助文檔

Jekyll的官網文檔：官方文檔 , 你也能夠將此幫助文檔構建到本地。

~ $ gem install jekyll-docs
~ $ jekyll docs
Configuration file: none
    Server address: http://127.0.0.1:4000
  Server running... press ctrl-c to stop.

若是你想查看jekyll相關命令的用法，你能夠執行：

~ $ jekyll help new
~ $ jekyll help build

目錄結構

.
├── _config.yml
├── _data
|   └── members.yml
├── _drafts
|   ├── begin-with-the-crazy-ideas.md
|   └── on-simplicity-in-technology.md
├── _includes
|   ├── footer.html
|   └── header.html
├── _layouts
|   ├── default.html
|   └── post.html
├── _posts
|   ├── 2007-10-29-why-every-programmer-should-play-nethack.md
|   └── 2009-04-26-barcamp-boston-4-roundup.md
├── _sass
|   ├── _base.scss
|   └── _layout.scss
├── _site
├── .jekyll-metadata
└── index.html # can also be an 'index.md' with valid YAML Frontmatter

上面的目錄結構是jekyll項目定義的目錄結構，固然不是必須都存在，好比咱們建立的blank項目就只有以下目錄結構：

.
├── _drafts
├── _layouts
├── _posts
└── index.html

當咱們使用 jekyll new myblog 建立項目時，Jekyll 會使用默認的主題幫助咱們構建一個項目，目錄結構以下：

.
├── _config.yml
├── _posts
|   └── 20017-09-24-welcome-to-jekyll.markdown
├── .gitignore
├── 404.html
├── about.md
├── Gemfile
├── Gemfile.lock
└── index.md

構建的項目繼承了默認主題的一些目錄及文件，因此咱們不須要建立任何文件就能夠建立具備必定簡陋樣式的博客系統了。固然，咱們是能夠覆蓋（重寫）主題默認的配置，徹底隨你本身控制的。
關於默認主題，你能夠到github上查看： Minima
那麼Jekyll定義的目錄都是用來幹嗎的呢？

_config.yml

存儲配置信息，能夠經過site.XX很方便的讀取到配置信息。

_drafts

草稿箱，未發佈或未寫完的文章能夠先放置到這裏。

_includes

一些共用的模板，如HTML的head部分，能夠很方便的被其餘文件引用。 {% include head.html %}

_layouts

能夠定義一些模板框架，如post.html, 發佈的文章內容會放置到 post.html 中的 {{ content }}.

_posts

文章都放置到這裏，這裏不要再建立目錄，儘管放文件便可，文章的命名遵循以下規則： YEAR-MONTH-DAY-title.MARKUP.

_data

這裏你能夠放置一些格式化的數據(using either the .yml, .yaml, .json or .csv formats and extensions). If there's a file members.yml under the directory, then you can access contents of the file through site.data.members.

_sass

These are sass partials that can be imported into your main.scss which will then be processed into a single stylesheet main.css that defines the styles to be used by your site.

_site

生成的靜態資源文件都放置在這裏. It’s probably a good idea to add this to your .gitignore file.

.jekyll-metadata

This helps Jekyll keep track of which files have not been modified since the site was last built, and which files will need to be regenerated on the next build. This file will not be included in the generated site. It’s probably a good idea to add this to your .gitignore file.

index.html or index.md and other HTML, Markdown, Textile files

給這些文件提供YAML Front Matter配置, 它將會自動被Jekyll處理，並加載到_site目錄下。

Other Files/Folders

除了上述列舉的目錄，文件外，若是你有其餘文件或目錄，Jekyll會自動將他們加載到_site目錄下，如css and images 目錄, favicon.ico 文件。

配置

Jekyll的配置有不少，但咱們用到的很少，默認的基本就夠咱們使用的了，若是想了解，能夠查閱文檔。

Configuration

也能夠參照個人博客項目瞭解_config.yml配置。

# Welcome to Chinaxiang' personal page!
lang: zh_CN
title: 黃彥祥的我的網站
author: Chinaxiang
email: forkmail@qq.com
description: > 
  黃彥祥，90後程序猿一枚，熱愛分享，喜歡折騰，樂於探索，敢於挑戰自我，對新事物充滿熱情，廣交天下有志之士，共謀IT發展大計。
baseurl: ""
url: "http://huangyanxiang.com"
github_username:  Chinaxiang
twitter_username: ""

minima:
  date_format: "%b %-d, %Y"

timezone: Asia/Shanghai

markdown: kramdown
theme: minima
plugins:
  - jekyll-feed
  - jekyll-seo-tag
  - jekyll-paginate

paginate: 15
paginate_path: "/blog/p:num"

文件頭配置

文件頭配置是Jekyll很炫酷和方便的一個功能，能夠給頁面或文章指定文件頭配置。你能夠給首頁指定 _layout/home.html 模板，你能夠給我的簡介頁面指定固定的地址 permalink: /about.html.

頭文件配置就是在頁面，文章的頭部添加相似這樣的內容：

---
layout: post
title: Blogging Like a Hacker
---

Global Variables

下面的配置能夠添加到普通頁面或者文章頁面。

layout: 指定_layout中的一個模板，固然也能夠不使用模板layout: null.
permalink: 給頁面或文章設置固定的地址。
published: 若是不想發佈某一篇文章，你能夠設置此項爲false.

Variables for Posts

date: 設置文章的發佈時間，格式：YYYY-MM-DD HH:MM:SS +/-TTTT, hours, minutes, seconds, and timezone offset are optional.
category: 設置文章的分類，單數
categories: 設置文章的分類，能夠用空格分隔表示多個
tags: 設置文章的標籤，能夠用空格分隔表示多個