jekyll-docs 3.9.0 → 4.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/jekyll-docs.rb +3 -3
- data/site/404.html +10 -7
- data/site/css/screen.css +3 -1
- data/site/css/screen.css.map +28 -0
- data/site/docs/assets/index.html +412 -453
- data/site/docs/code_of_conduct/index.html +447 -501
- data/site/docs/collections/index.html +487 -674
- data/site/docs/community/bug/index.html +603 -0
- data/site/docs/community/index.html +635 -0
- data/site/docs/conduct/index.html +447 -515
- data/site/docs/configuration/default/index.html +682 -0
- data/site/docs/configuration/environments/index.html +641 -0
- data/site/docs/configuration/front-matter-defaults/index.html +738 -0
- data/site/docs/configuration/incremental-regeneration/index.html +631 -0
- data/site/docs/configuration/index.html +405 -1230
- data/site/docs/configuration/liquid/index.html +616 -0
- data/site/docs/configuration/markdown/index.html +766 -0
- data/site/docs/configuration/options/index.html +1011 -0
- data/site/docs/configuration/webrick/index.html +615 -0
- data/site/docs/continuous-integration/buddyworks/index.html +393 -479
- data/site/docs/continuous-integration/circleci/index.html +465 -481
- data/site/docs/continuous-integration/travis-ci/index.html +450 -507
- data/site/docs/contributing/index.html +425 -514
- data/site/docs/datafiles/index.html +411 -453
- data/site/docs/deployment-methods/index.html +9 -871
- data/site/docs/deployment/automated/index.html +663 -0
- data/site/docs/deployment/index.html +607 -0
- data/site/docs/deployment/manual/index.html +631 -0
- data/site/docs/deployment/third-party/index.html +639 -0
- data/site/docs/drafts/index.html +9 -634
- data/site/docs/extras/index.html +9 -687
- data/site/docs/front-matter/index.html +799 -0
- data/site/docs/frontmatter/index.html +9 -819
- data/site/docs/github-pages/index.html +407 -475
- data/site/docs/history/index.html +1370 -1154
- data/site/docs/home/index.html +9 -627
- data/site/docs/includes/index.html +425 -501
- data/site/docs/index.html +630 -9
- data/site/docs/installation/index.html +403 -540
- data/site/docs/installation/macos/index.html +716 -0
- data/site/docs/installation/other-linux/index.html +613 -0
- data/site/docs/installation/ubuntu/index.html +623 -0
- data/site/docs/installation/windows/index.html +733 -0
- data/site/docs/layouts/index.html +726 -0
- data/site/docs/liquid/filters/index.html +1169 -0
- data/site/docs/liquid/index.html +615 -0
- data/site/docs/liquid/tags/index.html +728 -0
- data/site/docs/maintaining/affinity-team-captain/index.html +395 -479
- data/site/docs/maintaining/avoiding-burnout/index.html +391 -475
- data/site/docs/maintaining/becoming-a-maintainer/index.html +391 -475
- data/site/docs/maintaining/index.html +391 -486
- data/site/docs/maintaining/merging-a-pull-request/index.html +406 -490
- data/site/docs/maintaining/releasing-a-new-version/index.html +409 -485
- data/site/docs/maintaining/reviewing-a-pull-request/index.html +392 -476
- data/site/docs/maintaining/special-labels/index.html +397 -481
- data/site/docs/maintaining/triaging-an-issue/index.html +394 -478
- data/site/docs/markdown-101/index.html +601 -0
- data/site/docs/migrations/index.html +396 -440
- data/site/docs/pages/index.html +408 -482
- data/site/docs/pagination/index.html +450 -509
- data/site/docs/permalinks/index.html +552 -587
- data/site/docs/plugins/commands/index.html +656 -0
- data/site/docs/plugins/converters/index.html +685 -0
- data/site/docs/plugins/filters/index.html +624 -0
- data/site/docs/plugins/generators/index.html +697 -0
- data/site/docs/plugins/hooks/index.html +838 -0
- data/site/docs/plugins/index.html +415 -1565
- data/site/docs/plugins/installation/index.html +681 -0
- data/site/docs/plugins/tags/index.html +699 -0
- data/site/docs/plugins/your-first-plugin/index.html +741 -0
- data/site/docs/posts/index.html +491 -627
- data/site/docs/quickstart/index.html +9 -645
- data/site/docs/resources/index.html +9 -761
- data/site/docs/ruby-101/index.html +640 -0
- data/site/docs/sites/index.html +9 -696
- data/site/docs/static-files/index.html +401 -433
- data/site/docs/step-by-step/01-setup/index.html +771 -0
- data/site/docs/step-by-step/02-liquid/index.html +756 -0
- data/site/docs/step-by-step/03-front-matter/index.html +730 -0
- data/site/docs/step-by-step/04-layouts/index.html +770 -0
- data/site/docs/step-by-step/05-includes/index.html +768 -0
- data/site/docs/step-by-step/06-data-files/index.html +738 -0
- data/site/docs/step-by-step/07-assets/index.html +773 -0
- data/site/docs/step-by-step/08-blogging/index.html +835 -0
- data/site/docs/step-by-step/09-collections/index.html +932 -0
- data/site/docs/step-by-step/10-deployment/index.html +842 -0
- data/site/docs/structure/index.html +411 -430
- data/site/docs/support/index.html +392 -476
- data/site/docs/templates/index.html +9 -1232
- data/site/docs/themes/index.html +487 -521
- data/site/docs/troubleshooting/index.html +443 -520
- data/site/docs/upgrading/0-to-2/index.html +437 -523
- data/site/docs/upgrading/2-to-3/index.html +422 -507
- data/site/docs/upgrading/3-to-4/index.html +765 -0
- data/site/docs/upgrading/index.html +395 -478
- data/site/docs/usage/index.html +409 -506
- data/site/docs/variables/index.html +504 -652
- data/site/docs/windows/index.html +9 -784
- data/site/feed.xml +269 -188
- data/site/feed/release.xml +324 -0
- data/site/fonts/lato-v14-latin-300.woff +0 -0
- data/site/fonts/lato-v14-latin-300.woff2 +0 -0
- data/site/fonts/lato-v14-latin-300italic.woff +0 -0
- data/site/fonts/lato-v14-latin-300italic.woff2 +0 -0
- data/site/fonts/lato-v14-latin-700.woff +0 -0
- data/site/fonts/lato-v14-latin-700.woff2 +0 -0
- data/site/fonts/lato-v14-latin-700italic.woff +0 -0
- data/site/fonts/lato-v14-latin-700italic.woff2 +0 -0
- data/site/fonts/lato-v14-latin-900.woff +0 -0
- data/site/fonts/lato-v14-latin-900.woff2 +0 -0
- data/site/fonts/lato-v14-latin-900italic.woff +0 -0
- data/site/fonts/lato-v14-latin-900italic.woff2 +0 -0
- data/site/fonts/lato-v14-latin-italic.woff +0 -0
- data/site/fonts/lato-v14-latin-italic.woff2 +0 -0
- data/site/fonts/lato-v14-latin-regular.woff +0 -0
- data/site/fonts/lato-v14-latin-regular.woff2 +0 -0
- data/site/help/index.html +9 -247
- data/site/img/forestry-logo.svg +19 -0
- data/site/img/jekyll-og.png +0 -0
- data/site/img/spacer.gif +0 -0
- data/site/index.html +56 -29
- data/site/jekyllconf/index.html +62 -35
- data/site/latest_version.txt +1 -1
- data/site/news/2013/05/05/jekyll-1-0-0-released/index.html +180 -115
- data/site/news/2013/05/08/jekyll-1-0-1-released/index.html +182 -117
- data/site/news/2013/05/12/jekyll-1-0-2-released/index.html +183 -118
- data/site/news/2013/06/07/jekyll-1-0-3-released/index.html +184 -119
- data/site/news/2013/07/14/jekyll-1-1-0-released/index.html +183 -118
- data/site/news/2013/07/24/jekyll-1-1-1-released/index.html +180 -115
- data/site/news/2013/07/25/jekyll-1-0-4-released/index.html +182 -117
- data/site/news/2013/07/25/jekyll-1-1-2-released/index.html +182 -117
- data/site/news/2013/09/06/jekyll-1-2-0-released/index.html +185 -120
- data/site/news/2013/09/14/jekyll-1-2-1-released/index.html +183 -118
- data/site/news/2013/10/28/jekyll-1-3-0-rc1-released/index.html +180 -115
- data/site/news/2013/11/04/jekyll-1-3-0-released/index.html +189 -124
- data/site/news/2013/11/26/jekyll-1-3-1-released/index.html +181 -116
- data/site/news/2013/12/07/jekyll-1-4-0-released/index.html +181 -116
- data/site/news/2013/12/09/jekyll-1-4-1-released/index.html +180 -115
- data/site/news/2013/12/16/jekyll-1-4-2-released/index.html +182 -117
- data/site/news/2014/01/13/jekyll-1-4-3-released/index.html +181 -116
- data/site/news/2014/03/24/jekyll-1-5-0-released/index.html +181 -116
- data/site/news/2014/03/27/jekyll-1-5-1-released/index.html +181 -116
- data/site/news/2014/05/06/jekyll-turns-2-0-0/index.html +184 -119
- data/site/news/2014/05/08/jekyll-2-0-3-released/index.html +180 -115
- data/site/news/2014/06/04/jekyll-stickers-1-dollar-stickermule/index.html +181 -116
- data/site/news/2014/06/28/jekyll-turns-21-i-mean-2-1-0/index.html +185 -120
- data/site/news/2014/07/01/jekyll-2-1-1-released/index.html +182 -117
- data/site/news/2014/07/29/jekyll-2-2-0-released/index.html +181 -116
- data/site/news/2014/08/10/jekyll-2-3-0-released/index.html +189 -124
- data/site/news/2014/09/09/jekyll-2-4-0-released/index.html +187 -122
- data/site/news/2014/11/05/jekylls-midlife-crisis-jekyll-turns-2-5-0/index.html +188 -123
- data/site/news/2014/11/09/jekyll-2-5-1-released/index.html +180 -115
- data/site/news/2014/11/12/jekyll-2-5-2-released/index.html +182 -117
- data/site/news/2014/12/17/alfredxing-welcome-to-jekyll-core/index.html +179 -114
- data/site/news/2014/12/22/jekyll-2-5-3-released/index.html +180 -115
- data/site/news/2015/01/20/jekyll-meet-and-greet/index.html +179 -114
- data/site/news/2015/01/24/jekyll-3-0-0-beta1-released/index.html +180 -115
- data/site/news/2015/02/26/introducing-jekyll-talk/index.html +180 -115
- data/site/news/2015/10/26/jekyll-3-0-released/index.html +185 -120
- data/site/news/2015/11/17/jekyll-3-0-1-released/index.html +184 -119
- data/site/news/2016/01/20/jekyll-3-0-2-released/index.html +182 -117
- data/site/news/2016/01/24/jekyll-3-1-0-released/index.html +186 -121
- data/site/news/2016/01/28/jekyll-3-1-1-released/index.html +183 -118
- data/site/news/2016/02/08/jekyll-3-0-3-released/index.html +181 -116
- data/site/news/2016/02/19/jekyll-3-1-2-released/index.html +182 -117
- data/site/news/2016/03/10/making-it-easier-to-contribute-to-jekyll/index.html +179 -114
- data/site/news/2016/04/19/jekyll-3-0-4-released/index.html +181 -116
- data/site/news/2016/04/19/jekyll-3-1-3-released/index.html +181 -116
- data/site/news/2016/04/26/jekyll-3-0-5-released/index.html +180 -115
- data/site/news/2016/05/18/jekyll-3-1-4-released/index.html +186 -121
- data/site/news/2016/05/18/jekyll-3-1-5-released/index.html +181 -116
- data/site/news/2016/05/19/jekyll-3-1-6-released/index.html +181 -116
- data/site/news/2016/06/03/update-on-jekyll-s-google-summer-of-code-projects/index.html +179 -114
- data/site/news/2016/07/26/jekyll-3-2-0-released/index.html +184 -119
- data/site/news/2016/08/02/jekyll-3-2-1-released/index.html +180 -115
- data/site/news/2016/08/24/jekyll-admin-initial-release/index.html +179 -114
- data/site/news/2016/10/06/jekyll-3-3-is-here/index.html +207 -142
- data/site/news/2016/11/14/jekyll-3-3-1-released/index.html +181 -116
- data/site/news/2017/01/18/jekyll-3-4-0-released/index.html +183 -118
- data/site/news/2017/03/02/jekyll-3-4-1-released/index.html +181 -116
- data/site/news/2017/03/09/jekyll-3-4-2-released/index.html +189 -124
- data/site/news/2017/03/21/jekyll-3-4-3-released/index.html +190 -125
- data/site/news/2017/06/15/jekyll-3-5-0-released/index.html +187 -122
- data/site/news/2017/07/17/jekyll-3-5-1-released/index.html +182 -117
- data/site/news/2017/08/12/jekyll-3-5-2-released/index.html +185 -120
- data/site/news/2017/09/21/jekyll-3-6-0-released/index.html +181 -116
- data/site/news/2017/10/19/diversity-open-source/index.html +181 -116
- data/site/news/2017/10/21/jekyll-3-6-2-released/index.html +183 -118
- data/site/news/2018/01/02/jekyll-3-7-0-released/index.html +184 -119
- data/site/news/2018/01/25/jekyll-3-7-2-released/index.html +189 -124
- data/site/news/2018/02/19/meet-jekyll-s-new-lead-developer/index.html +180 -115
- data/site/news/2018/02/24/jekyll-3-7-3-released/index.html +185 -120
- data/site/news/2018/04/19/development-update/index.html +699 -0
- data/site/news/2018/04/19/jekyll-3-8-0-released/index.html +715 -0
- data/site/news/2018/05/01/jekyll-3-8-1-released/index.html +182 -117
- data/site/news/2018/05/19/jekyll-3-8-2-released/index.html +181 -116
- data/site/news/2018/06/05/jekyll-3-8-3-released/index.html +183 -118
- data/site/news/2018/08/01/jekyll-sponsoring/index.html +748 -0
- data/site/news/2018/09/19/security-fixes-for-3-6-3-7-3-8/index.html +692 -0
- data/site/news/2018/11/04/jekyll-3-8-5-released/index.html +682 -0
- data/site/news/2019/03/18/jekyll-4-0-0-pre-alpha1-released/index.html +710 -0
- data/site/news/2019/07/02/jekyll-3-8-6-released/index.html +180 -115
- data/site/news/2019/07/20/jekyll-4-0-0-pre-beta1-released/index.html +11 -0
- data/site/news/2019/08/04/jekyll-4-0-0-pre-beta1-released/index.html +708 -0
- data/site/news/2019/08/20/jekyll-4-0-0-released/index.html +809 -0
- data/site/news/index.html +976 -326
- data/site/news/releases/index.html +820 -321
- data/site/{philosophy.html → philosophy/index.html} +1 -1
- data/site/redirects.json +1 -1
- data/site/resources/index.html +332 -0
- data/site/showcase/index.html +844 -0
- data/site/sitemap.xml +256 -81
- data/site/team/index.html +63 -77
- data/site/tutorials/cache-api/index.html +418 -0
- data/site/tutorials/convert-site-to-jekyll/index.html +155 -124
- data/site/tutorials/custom-404-page/index.html +76 -43
- data/site/tutorials/home/index.html +64 -37
- data/site/tutorials/navigation/index.html +186 -103
- data/site/tutorials/orderofinterpretation/index.html +80 -53
- data/site/tutorials/using-jekyll-with-bundler/index.html +80 -51
- data/site/tutorials/video-walkthroughs/index.html +62 -35
- metadata +102 -13
- data/site/community/index.html +0 -11
- data/site/docs/continuous-integration/index.html +0 -681
|
@@ -3,17 +3,18 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
6
|
-
<meta name="generator" content="Jekyll
|
|
6
|
+
<meta name="generator" content="Jekyll v4.0.0">
|
|
7
7
|
<link type="application/atom+xml" rel="alternate" href="https://jekyllrb.com/feed.xml" title="Jekyll • Simple, blog-aware, static sites" />
|
|
8
|
+
<link type="application/atom+xml" rel="alternate" href="/feed/release.xml" title="Jekyll releases posts" />
|
|
8
9
|
<link rel="alternate" type="application/atom+xml" title="Recent commits to Jekyll’s master branch" href="https://github.com/jekyll/jekyll/commits/master.atom">
|
|
9
|
-
<link rel="
|
|
10
|
-
<link rel="
|
|
11
|
-
<link rel="
|
|
10
|
+
<link rel="preload" href="/fonts/lato-v14-latin-300.woff2" as="font" type="font/woff2" crossorigin />
|
|
11
|
+
<link rel="preload" href="/fonts/lato-v14-latin-700.woff2" as="font" type="font/woff2" crossorigin />
|
|
12
|
+
<link rel="preload" href="/css/screen.css" as="style">
|
|
12
13
|
<link rel="stylesheet" href="/css/screen.css">
|
|
13
14
|
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
|
14
15
|
<!-- Begin Jekyll SEO tag v2.6.1 -->
|
|
15
16
|
<title>Convert an HTML site to Jekyll | Jekyll • Simple, blog-aware, static sites</title>
|
|
16
|
-
<meta name="generator" content="Jekyll
|
|
17
|
+
<meta name="generator" content="Jekyll v4.0.0" />
|
|
17
18
|
<meta property="og:title" content="Convert an HTML site to Jekyll" />
|
|
18
19
|
<meta property="og:locale" content="en_US" />
|
|
19
20
|
<meta name="description" content="If you’re looking for themes for your Jekyll site, you don’t have to restrict yourself to existing Jekyll themes. It’s pretty easy to convert almost any static HTML files into a Jekyll website." />
|
|
@@ -21,14 +22,16 @@
|
|
|
21
22
|
<link rel="canonical" href="https://jekyllrb.com/tutorials/convert-site-to-jekyll/" />
|
|
22
23
|
<meta property="og:url" content="https://jekyllrb.com/tutorials/convert-site-to-jekyll/" />
|
|
23
24
|
<meta property="og:site_name" content="Jekyll • Simple, blog-aware, static sites" />
|
|
25
|
+
<meta property="og:image" content="https://jekyllrb.com/img/jekyll-og.png" />
|
|
24
26
|
<meta property="og:type" content="article" />
|
|
25
|
-
<meta property="article:published_time" content="
|
|
26
|
-
<meta name="twitter:card" content="
|
|
27
|
+
<meta property="article:published_time" content="2019-09-11T07:30:27-07:00" />
|
|
28
|
+
<meta name="twitter:card" content="summary_large_image" />
|
|
29
|
+
<meta property="twitter:image" content="https://jekyllrb.com/img/jekyll-og.png" />
|
|
27
30
|
<meta property="twitter:title" content="Convert an HTML site to Jekyll" />
|
|
28
31
|
<meta name="twitter:site" content="@jekyllrb" />
|
|
29
32
|
<meta name="google-site-verification" content="onQcXpAvtHBrUI5LlroHNE_FP0b2qvFyPq7VZw36iEY" />
|
|
30
33
|
<script type="application/ld+json">
|
|
31
|
-
{"
|
|
34
|
+
{"description":"If you’re looking for themes for your Jekyll site, you don’t have to restrict yourself to existing Jekyll themes. It’s pretty easy to convert almost any static HTML files into a Jekyll website.","@type":"BlogPosting","mainEntityOfPage":{"@type":"WebPage","@id":"https://jekyllrb.com/tutorials/convert-site-to-jekyll/"},"headline":"Convert an HTML site to Jekyll","dateModified":"2019-09-11T07:30:27-07:00","url":"https://jekyllrb.com/tutorials/convert-site-to-jekyll/","datePublished":"2019-09-11T07:30:27-07:00","image":"https://jekyllrb.com/img/jekyll-og.png","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://jekyllrb.com/img/logo-2x.png"}},"@context":"https://schema.org"}</script>
|
|
32
35
|
<!-- End Jekyll SEO tag -->
|
|
33
36
|
|
|
34
37
|
<!--[if lt IE 9]>
|
|
@@ -51,18 +54,27 @@
|
|
|
51
54
|
</div>
|
|
52
55
|
<nav class="main-nav hide-on-mobiles">
|
|
53
56
|
<ul>
|
|
54
|
-
|
|
57
|
+
|
|
58
|
+
<li>
|
|
55
59
|
<a href="/">Home</a>
|
|
56
60
|
</li>
|
|
57
|
-
|
|
58
|
-
|
|
61
|
+
|
|
62
|
+
<li>
|
|
63
|
+
<a href="/docs/">Docs</a>
|
|
59
64
|
</li>
|
|
60
|
-
|
|
61
|
-
|
|
65
|
+
|
|
66
|
+
<li>
|
|
67
|
+
<a href="/resources/">Resources</a>
|
|
62
68
|
</li>
|
|
63
|
-
|
|
64
|
-
|
|
69
|
+
|
|
70
|
+
<li>
|
|
71
|
+
<a href="/showcase/">Showcase</a>
|
|
65
72
|
</li>
|
|
73
|
+
|
|
74
|
+
<li>
|
|
75
|
+
<a href="/news/">News</a>
|
|
76
|
+
</li>
|
|
77
|
+
|
|
66
78
|
</ul>
|
|
67
79
|
|
|
68
80
|
</nav>
|
|
@@ -73,7 +85,7 @@
|
|
|
73
85
|
<div class="meta hide-on-mobiles">
|
|
74
86
|
<ul>
|
|
75
87
|
<li>
|
|
76
|
-
<a href="https://github.com/jekyll/jekyll/releases/tag/
|
|
88
|
+
<a href="https://github.com/jekyll/jekyll/releases/tag/v4.0.0">v4.0.0</a>
|
|
77
89
|
</li>
|
|
78
90
|
<li>
|
|
79
91
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
@@ -83,18 +95,24 @@
|
|
|
83
95
|
</div>
|
|
84
96
|
<nav class="mobile-nav show-on-mobiles">
|
|
85
97
|
<ul>
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
+
|
|
99
|
+
<li>
|
|
100
|
+
<a href="/">Home</a>
|
|
101
|
+
</li>
|
|
102
|
+
|
|
103
|
+
<li>
|
|
104
|
+
<a href="/docs/">Docs</a>
|
|
105
|
+
</li>
|
|
106
|
+
|
|
107
|
+
<li>
|
|
108
|
+
<a href="/resources/">Resources</a>
|
|
109
|
+
</li>
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
<li>
|
|
113
|
+
<a href="/news/">News</a>
|
|
114
|
+
</li>
|
|
115
|
+
|
|
98
116
|
<li>
|
|
99
117
|
<a href="https://github.com/jekyll/jekyll">GitHub</a>
|
|
100
118
|
</li>
|
|
@@ -169,19 +187,19 @@
|
|
|
169
187
|
|
|
170
188
|
<p>We’ll start with a <em>basic Jekyll site</em> consisting of three files:</p>
|
|
171
189
|
|
|
172
|
-
<div class="
|
|
190
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>├── _config.yml
|
|
173
191
|
├── _layouts
|
|
174
192
|
│ └── default.html
|
|
175
193
|
└── index.md
|
|
176
194
|
</code></pre></div></div>
|
|
177
195
|
|
|
178
|
-
<p>Manually create these three files in a folder called <code class="
|
|
196
|
+
<p>Manually create these three files in a folder called <code class="highlighter-rouge">my_jekyll_site</code> or whatever suits you the most, and place <code class="highlighter-rouge">default.html</code> inside a folder named <code class="highlighter-rouge">_layouts</code>.</p>
|
|
179
197
|
|
|
180
198
|
<div class="language-sh highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nv">$ </span><span class="nb">touch </span>_config.yml index.md default.html
|
|
181
199
|
<span class="nv">$ </span><span class="nb">mkdir </span>_layouts <span class="o">&&</span> <span class="nb">mv </span>default.html _layouts
|
|
182
200
|
</code></pre></div></div>
|
|
183
201
|
|
|
184
|
-
<p>Fire up your favorite editor, and populate the contents of the <code class="
|
|
202
|
+
<p>Fire up your favorite editor, and populate the contents of the <code class="highlighter-rouge">default.html</code> and <code class="highlighter-rouge">index.md</code> files as follows:</p>
|
|
185
203
|
|
|
186
204
|
<p><strong>_config.yml</strong></p>
|
|
187
205
|
|
|
@@ -214,23 +232,23 @@
|
|
|
214
232
|
<span class="s">--></span>
|
|
215
233
|
</code></pre></div></div>
|
|
216
234
|
|
|
217
|
-
<p>Now <code class="
|
|
235
|
+
<p>Now <code class="highlighter-rouge">cd</code> to <code class="highlighter-rouge">my_jekyll_site</code> and serve the site with the built-in server:</p>
|
|
218
236
|
|
|
219
|
-
<div class="
|
|
237
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>cd my_jekyll_site
|
|
220
238
|
jekyll serve
|
|
221
239
|
</code></pre></div></div>
|
|
222
240
|
|
|
223
|
-
<p class="note info">If you have a Gemfile, <a href="/docs/
|
|
241
|
+
<p class="note info">If you have a Gemfile, <a href="/docs/ruby-101/#bundler">use Bundler</a> by typing <code class="highlighter-rouge">bundle exec jekyll serve</code> instead.</p>
|
|
224
242
|
|
|
225
|
-
<p>When you serve the site, you get a preview URL such as <code class="
|
|
243
|
+
<p>When you serve the site, you get a preview URL such as <code class="highlighter-rouge">http://127.0.0.1:4000/</code> (which is the same as <code class="highlighter-rouge">http://localhost:4000/</code>). The site’s files are built into the <code class="highlighter-rouge">_site</code> folder by default.</p>
|
|
226
244
|
|
|
227
245
|
<p>This is a Jekyll site at the most basic functional level. Here’s what is happening:</p>
|
|
228
246
|
|
|
229
247
|
<ul>
|
|
230
|
-
<li>The <code class="
|
|
231
|
-
<li>Jekyll looks for files with <a href="/docs/
|
|
232
|
-
<li>Jekyll pushes the content from all pages and posts into the <code class="
|
|
233
|
-
<li>The processed files get written as <code class="
|
|
248
|
+
<li>The <code class="highlighter-rouge">_config.yml</code> file contains settings that Jekyll uses as it processes your site. An empty config file will use default values for building a Jekyll site. For example, to convert <a href="https://learnxinyminutes.com/docs/markdown/">Markdown</a> to HTML, Jekyll will automatically use the <a href="https://rubygems.org/gems/kramdown/">kramdown Markdown filter</a>, without any need to specify it.</li>
|
|
249
|
+
<li>Jekyll looks for files with <a href="/docs/front-matter/">front matter tags</a> (the two sets of dashed lines <code class="highlighter-rouge">---</code> like those in <code class="highlighter-rouge">index.md</code>) and processes the files (populating site variables, rendering any <a href="https://shopify.github.io/liquid/">Liquid</a>, and converting Markdown to HTML).</li>
|
|
250
|
+
<li>Jekyll pushes the content from all pages and posts into the <code class="highlighter-rouge">{{ content }}</code> variable in the layout specified (<code class="highlighter-rouge">default</code>) in the front matter tags.</li>
|
|
251
|
+
<li>The processed files get written as <code class="highlighter-rouge">.html</code> files in the <code class="highlighter-rouge">_site</code> directory.</li>
|
|
234
252
|
</ul>
|
|
235
253
|
|
|
236
254
|
<p>You can read more about how Jekyll processes the files in <a href="/tutorials/orderofinterpretation/">order of Interpretation</a>.</p>
|
|
@@ -239,61 +257,61 @@ jekyll serve
|
|
|
239
257
|
|
|
240
258
|
<h2 id="1-create-a-template-for-your-default-layout">1. Create a template for your default layout</h2>
|
|
241
259
|
|
|
242
|
-
<p>Find your HTML theme and save it as a <code class="
|
|
260
|
+
<p>Find your HTML theme and save it as a <code class="highlighter-rouge">default</code> layout. If you’re converting or cloning an existing site, you can right-click the page and view the source code.</p>
|
|
243
261
|
|
|
244
262
|
<p>For example, suppose you’re cloning your company site to create a documentation site with the same branding. Or suppose you have a personal site that you built with HTML and now want to make it a Jekyll site. Get the HTML source code for your site.</p>
|
|
245
263
|
|
|
246
264
|
<p class="note info">Regardless of the site, do check the license and make sure you have permission to copy and use the code.</p>
|
|
247
265
|
|
|
248
|
-
<p>Copy and paste the source code into a file called <code class="
|
|
266
|
+
<p>Copy and paste the source code into a file called <code class="highlighter-rouge">default.html</code>. Put the <code class="highlighter-rouge">default.html</code> file inside the <code class="highlighter-rouge">_layouts</code> folder. This will be the default layout template for your pages and posts — that is, each page or post will use this layout when Jekyll builds the site.</p>
|
|
249
267
|
|
|
250
|
-
<p>Note that in looking for templates, you want the HTML output of the template. If the template has PHP tags or other dynamic scripts, these dynamic elements will need to be converted to HTML or to <a href="https://shopify.github.io/liquid/">Liquid</a>. Liquid is <a href="/docs/
|
|
268
|
+
<p>Note that in looking for templates, you want the HTML output of the template. If the template has PHP tags or other dynamic scripts, these dynamic elements will need to be converted to HTML or to <a href="https://shopify.github.io/liquid/">Liquid</a>. Liquid is <a href="/docs/liquid/">Jekyll templating system</a> to retrieve dynamic content.</p>
|
|
251
269
|
|
|
252
|
-
<p>Open <code class="
|
|
270
|
+
<p>Open <code class="highlighter-rouge">default.html</code> into your browser locally to ensure the site looks and behaves like it does online. You will likely need to adjust CSS, JS, and image paths so they work.</p>
|
|
253
271
|
|
|
254
|
-
<p>For example, if the paths were relative on the site you copied, you’ll need to either download the same assets into your Jekyll site or use absolute paths to the same assets in the cloud. (Syntax such as <code class="
|
|
272
|
+
<p>For example, if the paths were relative on the site you copied, you’ll need to either download the same assets into your Jekyll site or use absolute paths to the same assets in the cloud. (Syntax such as <code class="highlighter-rouge">src="//</code> requires a prefix such as <code class="highlighter-rouge">src="http://</code> to work in your local browser.)</p>
|
|
255
273
|
|
|
256
|
-
<p>Jekyll provides some <a href="/docs/
|
|
274
|
+
<p>Jekyll provides some <a href="/docs/liquid/filters">filters</a> to prepend a site URL before path. For example, you could preface your stylesheet like this:</p>
|
|
257
275
|
|
|
258
276
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"/assets/style.css"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">relative_url</span><span class="w"> </span><span class="p">}}</span>
|
|
259
277
|
</code></pre></div></div>
|
|
260
278
|
|
|
261
|
-
<p>The <code class="
|
|
279
|
+
<p>The <code class="highlighter-rouge">relative_url</code> filter will prepend the <a href="https://byparker.com/blog/2014/clearing-up-confusion-around-baseurl/"><code class="highlighter-rouge">baseurl</code></a> value from your config file (as<code class="highlighter-rouge">blog</code> for instance) to the input. This is useful if your site is hosted at a subpath rather than at the root of the domain (for example, <code class="highlighter-rouge">http://mysite.com/blog/</code>).</p>
|
|
262
280
|
|
|
263
|
-
<p>You can also use an <code class="
|
|
281
|
+
<p>You can also use an <code class="highlighter-rouge">absolute_url</code> filter. This filter will prepend the <code class="highlighter-rouge">url</code> <em>and</em> <code class="highlighter-rouge">baseurl</code> value to the input:</p>
|
|
264
282
|
|
|
265
283
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{{</span><span class="w"> </span><span class="s2">"/assets/style.css"</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">absolute_url</span><span class="w"> </span><span class="p">}}</span>
|
|
266
284
|
</code></pre></div></div>
|
|
267
285
|
|
|
268
|
-
<p>Again, both <code class="
|
|
286
|
+
<p>Again, both <code class="highlighter-rouge">url</code> and <code class="highlighter-rouge">baseurl</code> can be defined in your site’s config file, like this:</p>
|
|
269
287
|
|
|
270
|
-
<div class="
|
|
288
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>url: http://mysite.com
|
|
271
289
|
baseurl: /blog
|
|
272
290
|
</code></pre></div></div>
|
|
273
291
|
|
|
274
|
-
<p>The result in the output will be <code class="
|
|
292
|
+
<p>The result in the output will be <code class="highlighter-rouge">http://mysite.com/blog/assets/style.css</code>.</p>
|
|
275
293
|
|
|
276
|
-
<p>Note that the <code class="
|
|
294
|
+
<p>Note that the <code class="highlighter-rouge">url</code> property of any page begins with a forward slash (<code class="highlighter-rouge">/</code>), so omit this at the end of your <code class="highlighter-rouge">url</code> or <code class="highlighter-rouge">baseurl</code> property.</p>
|
|
277
295
|
|
|
278
296
|
<p>You don’t have to prepend filters to link paths like this. You could also use relative links across your entire site. However you decide to code the paths to your assets, make sure they render correctly.</p>
|
|
279
297
|
|
|
280
|
-
<p>Does your local <code class="
|
|
298
|
+
<p>Does your local <code class="highlighter-rouge">default.html</code> page look good in your browser? Are all images, styles, and other elements showing up correctly? If so, great. Keep going. You can use this template as the layout for all your pages and posts or create as many templates as you need.</p>
|
|
281
299
|
|
|
282
300
|
<p>In the next section, you’ll blank out the content of the layout and replace it with placeholder tags that get populated dynamically with your Jekyll pages.</p>
|
|
283
301
|
|
|
284
302
|
<h2 id="2-identify-the-content-part-of-the-layout">2. Identify the content part of the layout</h2>
|
|
285
303
|
|
|
286
|
-
<p>In <code class="
|
|
304
|
+
<p>In <code class="highlighter-rouge">default.html</code>, find where the page content begins (usually at <code class="highlighter-rouge">h1</code> or <code class="highlighter-rouge">h2</code> tags). Replace the title that appears inside these tags with <code class="highlighter-rouge">{{ page.title }}</code>.</p>
|
|
287
305
|
|
|
288
|
-
<p>Remove the content part (keep everything else: navigation menu, sidebar, footer, etc.) and replace it with <code class="
|
|
306
|
+
<p>Remove the content part (keep everything else: navigation menu, sidebar, footer, etc.) and replace it with <code class="highlighter-rouge">{{ content }}</code>.</p>
|
|
289
307
|
|
|
290
|
-
<p>Check the layout again in your browser and make sure you didn’t corrupt or alter it up by inadvertently removing a crucial <code class="
|
|
308
|
+
<p>Check the layout again in your browser and make sure you didn’t corrupt or alter it up by inadvertently removing a crucial <code class="highlighter-rouge">div</code> tag or other element. The only change should be to the title and page content, which are now blanked out or showing the placeholder tag.</p>
|
|
291
309
|
|
|
292
310
|
<h2 id="3-create-a-couple-of-files-with-front-matter-tags">3. Create a couple of files with front matter tags</h2>
|
|
293
311
|
|
|
294
|
-
<p>Create a couple of files (<code class="
|
|
312
|
+
<p>Create a couple of files (<code class="highlighter-rouge">index.md</code> and <code class="highlighter-rouge">about.md</code>) in your root directory.</p>
|
|
295
313
|
|
|
296
|
-
<p>In your <code class="
|
|
314
|
+
<p>In your <code class="highlighter-rouge">index.md</code> file, add some front matter tags containing a <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">layout</code> property, like this:</p>
|
|
297
315
|
|
|
298
316
|
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nn">---</span>
|
|
299
317
|
<span class="na">title</span><span class="pi">:</span> <span class="s">Home</span>
|
|
@@ -303,20 +321,20 @@ baseurl: /blog
|
|
|
303
321
|
<span class="s">Some page content here...</span>
|
|
304
322
|
</code></pre></div></div>
|
|
305
323
|
|
|
306
|
-
<p>Create another page for testing called <code class="
|
|
324
|
+
<p>Create another page for testing called <code class="highlighter-rouge">about.md</code> with similar front matter tags.</p>
|
|
307
325
|
|
|
308
326
|
<p class="note info">If you don’t specify a layout in your pages, Jekyll will simply render that page as an unstyled basic HTML page.</p>
|
|
309
327
|
|
|
310
328
|
<h2 id="4-add-a-configuration-file">4. Add a configuration file</h2>
|
|
311
329
|
|
|
312
|
-
<p>Add a <code class="
|
|
330
|
+
<p>Add a <code class="highlighter-rouge">_config.yml</code> file in your root directory. In <code class="highlighter-rouge">_config.yml</code>, you can optionally specify the markdown filter you want. By default, <a href="https://kramdown.gettalong.org/">kramdown</a> is used (without the need to specify it). If no other filter is specified, your config file will automatically apply the following as a default setting:</p>
|
|
313
331
|
|
|
314
|
-
<div class="
|
|
332
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>markdown: kramdown
|
|
315
333
|
</code></pre></div></div>
|
|
316
334
|
|
|
317
335
|
<p>You can also specify <a href="https://kramdown.gettalong.org/converter/html.html">some options</a> for kramdown to make it behave more like <a href="https://github.github.com/gfm/">GitHub Flavored Markdown (GFM)</a>:</p>
|
|
318
336
|
|
|
319
|
-
<div class="
|
|
337
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>kramdown:
|
|
320
338
|
input: GFM
|
|
321
339
|
auto_ids: true
|
|
322
340
|
hard_wrap: false
|
|
@@ -325,44 +343,44 @@ baseurl: /blog
|
|
|
325
343
|
|
|
326
344
|
<h2 id="5-test-your-pages">5. Test your pages</h2>
|
|
327
345
|
|
|
328
|
-
<p>Now run <code class="
|
|
346
|
+
<p>Now run <code class="highlighter-rouge">jekyll serve</code> and toggle between your <code class="highlighter-rouge">index.html</code> and <code class="highlighter-rouge">about.html</code> pages. The default layout should load for both pages.</p>
|
|
329
347
|
|
|
330
348
|
<p>You’ve now extracted your content out into separate files and defined a common layout for pages.</p>
|
|
331
349
|
|
|
332
350
|
<p>You could define any number of layouts you want for pages. Then just identify the layout you want that particular page to use. For example:</p>
|
|
333
351
|
|
|
334
|
-
<div class="
|
|
352
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
|
|
335
353
|
title: Sample page
|
|
336
354
|
layout: homepage
|
|
337
355
|
---
|
|
338
356
|
</code></pre></div></div>
|
|
339
357
|
|
|
340
|
-
<p>This page would then use the <code class="
|
|
358
|
+
<p>This page would then use the <code class="highlighter-rouge">homepage.html</code> template in the <code class="highlighter-rouge">_layouts</code> folder.</p>
|
|
341
359
|
|
|
342
|
-
<p>You can even set <a href="/docs/configuration
|
|
360
|
+
<p>You can even set <a href="/docs/configuration/front-matter-defaults/">default front matter tags</a> for pages, posts, or <a href="/docs/collections/">collections</a> in your <code class="highlighter-rouge">_config.yml</code> file so that you don’t have to specify the layout in the front matter variables. Anyways, setting defaults is beyond the scope of this tutorial, let’s get back to work.</p>
|
|
343
361
|
|
|
344
362
|
<h2 id="6-configure-site-variables">6. Configure site variables</h2>
|
|
345
363
|
|
|
346
|
-
<p>You already configured the page title using <code class="
|
|
364
|
+
<p>You already configured the page title using <code class="highlighter-rouge">{{ page.title }}</code> tags. But there are more <code class="highlighter-rouge">title</code> tags to populate. Pages also have a <a href="https://moz.com/learn/seo/title-tag"><code class="highlighter-rouge">title</code></a> tag that appears in the browser tab or window. Typically you put the page title followed by the site title here.</p>
|
|
347
365
|
|
|
348
|
-
<p>In your <code class="
|
|
366
|
+
<p>In your <code class="highlighter-rouge">default.html</code> layout, look for the <code class="highlighter-rouge">title</code> tags below your <code class="highlighter-rouge">head</code> tags:</p>
|
|
349
367
|
|
|
350
|
-
<div class="
|
|
368
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><title>ACME Website</title>
|
|
351
369
|
</code></pre></div></div>
|
|
352
370
|
|
|
353
371
|
<p>Insert the following site variables:</p>
|
|
354
372
|
|
|
355
|
-
<div class="
|
|
373
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><title>{{ page.title }} | {{ site.title }}</title>
|
|
356
374
|
</code></pre></div></div>
|
|
357
375
|
|
|
358
|
-
<p>Open <code class="
|
|
376
|
+
<p>Open <code class="highlighter-rouge">_config.yml</code> and add a <code class="highlighter-rouge">title</code> property for your site’s name.</p>
|
|
359
377
|
|
|
360
|
-
<div class="
|
|
378
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>title: ACME Website
|
|
361
379
|
</code></pre></div></div>
|
|
362
380
|
|
|
363
|
-
<p>Any properties you add in your <code class="
|
|
381
|
+
<p>Any properties you add in your <code class="highlighter-rouge">_config.yml</code> file are accessible through the <code class="highlighter-rouge">site</code> namespace. Similarly, any properties in your page’s front matter are accessible through the <code class="highlighter-rouge">page</code> namespace. Use dot notation after <code class="highlighter-rouge">site</code> or <code class="highlighter-rouge">page</code> to access the value.</p>
|
|
364
382
|
|
|
365
|
-
<p>Stop your Jekyll server with <kbd>Ctrl</kbd> + <kbd>C</kbd> and restart it. Verify that the <code class="
|
|
383
|
+
<p>Stop your Jekyll server with <kbd>Ctrl</kbd> + <kbd>C</kbd> and restart it. Verify that the <code class="highlighter-rouge">title</code> tags are populating correctly.</p>
|
|
366
384
|
|
|
367
385
|
<p class="note info">Every time you modify your config file, you have to restart Jekyll for the changes to take effect. When you modify other files, Jekyll automatically picks up the changes when it rebuilds.</p>
|
|
368
386
|
|
|
@@ -372,17 +390,17 @@ layout: homepage
|
|
|
372
390
|
|
|
373
391
|
<p>It’s common to show a list of posts on the homepage. First, let’s create some posts so that we have something to showcase.</p>
|
|
374
392
|
|
|
375
|
-
<p>Add some posts in a <code class="
|
|
393
|
+
<p>Add some posts in a <code class="highlighter-rouge">_posts</code> folder following the standard <code class="highlighter-rouge">YYYY-MM-DD-title.md</code> post format:</p>
|
|
376
394
|
|
|
377
395
|
<ul>
|
|
378
|
-
<li><code class="
|
|
379
|
-
<li><code class="
|
|
380
|
-
<li><code class="
|
|
396
|
+
<li><code class="highlighter-rouge">2017-01-02-my-first-post.md</code></li>
|
|
397
|
+
<li><code class="highlighter-rouge">2017-01-15-my-second-post.md</code></li>
|
|
398
|
+
<li><code class="highlighter-rouge">2017-02-08-my-third-post.md</code></li>
|
|
381
399
|
</ul>
|
|
382
400
|
|
|
383
401
|
<p>In each post, add some basic content:</p>
|
|
384
402
|
|
|
385
|
-
<div class="
|
|
403
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
|
|
386
404
|
title: My First Post
|
|
387
405
|
layout: default
|
|
388
406
|
---
|
|
@@ -390,9 +408,9 @@ layout: default
|
|
|
390
408
|
Some sample content...
|
|
391
409
|
</code></pre></div></div>
|
|
392
410
|
|
|
393
|
-
<p>Now let’s create a layout that will display the posts. Create a new file in <code class="
|
|
411
|
+
<p>Now let’s create a layout that will display the posts. Create a new file in <code class="highlighter-rouge">_layouts</code> called <code class="highlighter-rouge">home.html</code> and add the following logic:</p>
|
|
394
412
|
|
|
395
|
-
<div class="
|
|
413
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
|
|
396
414
|
layout: default
|
|
397
415
|
---
|
|
398
416
|
|
|
@@ -406,56 +424,57 @@ layout: default
|
|
|
406
424
|
</ul>
|
|
407
425
|
</code></pre></div></div>
|
|
408
426
|
|
|
409
|
-
<p>Create a file called <code class="
|
|
427
|
+
<p>Create a file called <code class="highlighter-rouge">blog.md</code> in your root directory and specify the <code class="highlighter-rouge">home</code> layout:</p>
|
|
410
428
|
|
|
411
|
-
<div class="
|
|
429
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
|
|
412
430
|
title: Blog
|
|
413
431
|
layout: home
|
|
414
432
|
---
|
|
415
433
|
</code></pre></div></div>
|
|
416
434
|
|
|
417
|
-
<p>In this case, contents of <code class="
|
|
435
|
+
<p>In this case, contents of <code class="highlighter-rouge">blog.md</code> will be pushed into the <code class="highlighter-rouge">{{ content }}</code> tag in the <code class="highlighter-rouge">home</code> layout. Then the <code class="highlighter-rouge">home</code> layout will be pushed into the <code class="highlighter-rouge">{{ content }}</code> tag of the <code class="highlighter-rouge">default</code> layout.</p>
|
|
418
436
|
|
|
419
437
|
<h3 id="how-layouts-work">How layouts work</h3>
|
|
420
438
|
|
|
421
|
-
<p>When a layout specifies another layout, it means the content of the first layout will be stuffed into the <code class="
|
|
439
|
+
<p>When a layout specifies another layout, it means the content of the first layout will be stuffed into the <code class="highlighter-rouge">{{ content }}</code> tag of the second layout. As an analogy, think of Russian dolls that fit into each other. Each layout fits into another layout that it specifies.</p>
|
|
422
440
|
|
|
423
441
|
<p>The following diagram shows how layouts work in Jekyll:</p>
|
|
424
442
|
|
|
425
443
|
<p><img src="../../img/jekylllayoutconcept.png" alt="Concept of Jekyll layouts" /></p>
|
|
426
444
|
|
|
427
|
-
<p class="image-description">In this example, the content from a Markdown document <code class="
|
|
445
|
+
<p class="image-description">In this example, the content from a Markdown document <code class="highlighter-rouge">document.md</code> that specifies <code class="highlighter-rouge">layout: docs</code> gets pushed into the <code class="highlighter-rouge">{{ content }}</code> tag of the layout file <code class="highlighter-rouge">docs.html</code>. Because the <code class="highlighter-rouge">docs</code> layout itself specifies <code class="highlighter-rouge">layout: page</code>, the content from <code class="highlighter-rouge">docs.html</code> gets pushed into the <code class="highlighter-rouge">{{ content }}</code> tag in the layout file <code class="highlighter-rouge">page.html</code>. Finally because the <code class="highlighter-rouge">page</code> layout specifies <code class="highlighter-rouge">layout: default</code>, the content from <code class="highlighter-rouge">page.html</code> gets pushed into the <code class="highlighter-rouge">{{ content }}</code> tag of the layout file <code class="highlighter-rouge">default.html</code>.</p>
|
|
428
446
|
|
|
429
|
-
<p>You don’t need multiple layouts. You could just use one: <code class="
|
|
447
|
+
<p>You don’t need multiple layouts. You could just use one: <code class="highlighter-rouge">default</code>. You have options for how you design your site. In general, it’s common to define one layout for pages and another layout for posts, but for both of these layouts to inherit the <code class="highlighter-rouge">default</code> template (which usually defines the top and bottom parts of the site).</p>
|
|
430
448
|
|
|
431
|
-
<p>In your browser, go to <code class="
|
|
432
|
-
Note that you don’t have to use the method described here. You could have simply added the <code class="
|
|
449
|
+
<p>In your browser, go to <code class="highlighter-rouge">blog.html</code> and see the list of posts.
|
|
450
|
+
Note that you don’t have to use the method described here. You could have simply added the <code class="highlighter-rouge">for</code> loop to any page, such as <code class="highlighter-rouge">index.md</code>, to display these posts. But given that you may have more complex logic for other features, it can be helpful to store your logic in templates separate from the page area where you frequently type your content.</p>
|
|
433
451
|
|
|
434
|
-
<p class="note info">At minimum, a layout should contain <code class="
|
|
452
|
+
<p class="note info">At minimum, a layout should contain <code class="highlighter-rouge">{{ content }}</code>, which acts as a receiver for the <em>content</em> to be rendered.</p>
|
|
435
453
|
|
|
436
454
|
<h3 id="for-loops">For loops</h3>
|
|
437
455
|
|
|
438
|
-
<p>By the way, let’s pause here to look at the <code class="
|
|
456
|
+
<p>By the way, let’s pause here to look at the <code class="highlighter-rouge">for</code> loop logic a little more closely. <a href="https://shopify.github.io/liquid/tags/iteration/">For loops in Liquid</a> are one of the most commonly used Liquid tags. <em>For loops</em> let you iterate through content in your Jekyll site and build out a result. The <code class="highlighter-rouge">for</code> loop also has <a href="https://help.shopify.com/themes/liquid/objects/for-loops">certain properties available</a> (like first or last iteration) based on the loop’s position in the loop as well.</p>
|
|
439
457
|
|
|
440
|
-
<p>We’ve only scratched the surface of what you can do with <code class="
|
|
458
|
+
<p>We’ve only scratched the surface of what you can do with <code class="highlighter-rouge">for</code> loops in retrieving posts. For example, if you wanted to display posts from a specific category, you could do so by adding a <code class="highlighter-rouge">categories</code> property to your post’s front matter and then look in those categories. Further, you could limit the number of results by adding a <code class="highlighter-rouge">limit</code> property. Here’s an example:</p>
|
|
441
459
|
|
|
442
460
|
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><ul class="myposts">
|
|
443
|
-
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">post</span><span class="w"> </span><span class="
|
|
461
|
+
<span class="p">{%</span><span class="w"> </span><span class="nt">for</span><span class="w"> </span><span class="nv">post</span><span class="w"> </span><span class="kr">in</span><span class="w"> </span><span class="nv">site.categories.podcasts</span><span class="w"> </span><span class="na">limit</span><span class="o">:</span><span class="mi">3</span><span class="w"> </span><span class="p">%}</span>
|
|
444
462
|
<li><a href="<span class="p">{{</span><span class="w"> </span><span class="nv">post</span><span class="p">.</span><span class="nv">url</span><span class="w"> </span><span class="p">}}</span>"><span class="p">{{</span><span class="w"> </span><span class="nv">post</span><span class="p">.</span><span class="nv">title</span><span class="p">}}</span></a>
|
|
445
463
|
<span class="postDate"><span class="p">{{</span><span class="w"> </span><span class="nv">post</span><span class="p">.</span><span class="nv">date</span><span class="w"> </span><span class="p">|</span><span class="w"> </span><span class="nf">date</span><span class="p">:</span><span class="w"> </span><span class="s2">"%b %-d, %Y"</span><span class="w"> </span><span class="p">}}</span></span>
|
|
446
464
|
</li>
|
|
447
465
|
<span class="p">{%</span><span class="w"> </span><span class="nt">endfor</span><span class="w"> </span><span class="p">%}</span>
|
|
466
|
+
</ul>
|
|
448
467
|
</code></pre></div></div>
|
|
449
468
|
|
|
450
|
-
<p>This loop would get the latest three posts that have a category called <code class="
|
|
469
|
+
<p>This loop would get the latest three posts that have a category called <code class="highlighter-rouge">podcasts</code> in the front matter.</p>
|
|
451
470
|
|
|
452
471
|
<h2 id="8-configure-navigation">8. Configure navigation</h2>
|
|
453
472
|
|
|
454
473
|
<p>Now that you’ve configured posts, let’s configure page navigation. Most websites have some navigation either in the sidebar or header area.</p>
|
|
455
474
|
|
|
456
|
-
<p>In this tutorial, we’ll assume you’ve got a simple list of pages you want to generate. If you only have a handful of pages, you could list them by using a <code class="
|
|
475
|
+
<p>In this tutorial, we’ll assume you’ve got a simple list of pages you want to generate. If you only have a handful of pages, you could list them by using a <code class="highlighter-rouge">for</code> loop to iterate through the <code class="highlighter-rouge">site.pages</code> object and then order them by a front matter property.</p>
|
|
457
476
|
|
|
458
|
-
<p>Identify the part of your code where the list of pages appears. Usually this is a <code class="
|
|
477
|
+
<p>Identify the part of your code where the list of pages appears. Usually this is a <code class="highlighter-rouge"><ul></code> element with various child <code class="highlighter-rouge"><li></code> elements. Replace the code with the following:</p>
|
|
459
478
|
|
|
460
479
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><ul></span>
|
|
461
480
|
{% assign mypages = site.pages | sort: "order" %}
|
|
@@ -465,19 +484,19 @@ Note that you don’t have to use the method described here. You could have simp
|
|
|
465
484
|
<span class="nt"></ul></span>
|
|
466
485
|
</code></pre></div></div>
|
|
467
486
|
|
|
468
|
-
<p>This example assumes each page would have front matter containing both a <code class="
|
|
487
|
+
<p>This example assumes each page would have front matter containing both a <code class="highlighter-rouge">title</code> and <code class="highlighter-rouge">order</code> property like this:</p>
|
|
469
488
|
|
|
470
|
-
<div class="
|
|
489
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
|
|
471
490
|
title: My page
|
|
472
491
|
order: 2
|
|
473
492
|
---
|
|
474
493
|
</code></pre></div></div>
|
|
475
494
|
|
|
476
|
-
<p>Here the <code class="
|
|
495
|
+
<p>Here the <code class="highlighter-rouge">order</code> property will define how the pages get sorted, with <code class="highlighter-rouge">1</code> appearing first in the list.</p>
|
|
477
496
|
|
|
478
497
|
<p>You could also iterate through a list of pages that you maintain in a separate data file. This might be more appropriate if you have a lot of pages, or you have other properties about the pages you want to store.</p>
|
|
479
498
|
|
|
480
|
-
<p>To manage page links this way, create a folder in your Jekyll project called <code class="
|
|
499
|
+
<p>To manage page links this way, create a folder in your Jekyll project called <code class="highlighter-rouge">_data</code>. In this folder, create a file called e.g. <code class="highlighter-rouge">navigation.yml</code> with this content:</p>
|
|
481
500
|
|
|
482
501
|
<div class="language-yaml highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="pi">-</span> <span class="na">title</span><span class="pi">:</span> <span class="s">Sample page </span><span class="m">1</span>
|
|
483
502
|
<span class="na">url</span><span class="pi">:</span> <span class="s">/page-1-permalink/</span>
|
|
@@ -506,22 +525,22 @@ order: 2
|
|
|
506
525
|
|
|
507
526
|
<h2 id="9-simplify-your-site-with-includes">9. Simplify your site with includes</h2>
|
|
508
527
|
|
|
509
|
-
<p>Let’s suppose your <code class="
|
|
528
|
+
<p>Let’s suppose your <code class="highlighter-rouge">default.html</code> file is massive and hard to work with. You can break up your layout by putting some of the HTML code in <em>include</em> files.</p>
|
|
510
529
|
|
|
511
|
-
<p>Add a folder called <code class="
|
|
530
|
+
<p>Add a folder called <code class="highlighter-rouge">_includes</code> in your root directory. In that folder, add a file there called <code class="highlighter-rouge">sidebar.html</code>.</p>
|
|
512
531
|
|
|
513
|
-
<p>Remove your sidebar code from your <code class="
|
|
532
|
+
<p>Remove your sidebar code from your <code class="highlighter-rouge">default.html</code> layout and insert it into the <code class="highlighter-rouge">sidebar.html</code> file.</p>
|
|
514
533
|
|
|
515
|
-
<p>Where the sidebar code previously existed in <code class="
|
|
534
|
+
<p>Where the sidebar code previously existed in <code class="highlighter-rouge">default.html</code>, pull in your “include” like this:</p>
|
|
516
535
|
|
|
517
|
-
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span>sidebar
|
|
536
|
+
<div class="language-liquid highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">{%</span><span class="w"> </span><span class="nt">include</span><span class="w"> </span><span class="na">sidebar</span><span class="p">.</span><span class="na">html</span><span class="w"> </span><span class="p">%}</span>
|
|
518
537
|
</code></pre></div></div>
|
|
519
538
|
|
|
520
539
|
<p>You can break up other elements of your theme like this, such as your header or footer. Then you can apply these common elements to other layout files. This way you won’t have duplicate code.</p>
|
|
521
540
|
|
|
522
541
|
<h2 id="10-rss-feed">10. RSS feed</h2>
|
|
523
542
|
|
|
524
|
-
<p>Your Jekyll site needs an RSS feed. Here’s the <a href="http://www.w3schools.com/xml/xml_rss.asp">basic RSS feed syntax</a>. To create an RSS file in Jekyll, create a file called <code class="
|
|
543
|
+
<p>Your Jekyll site needs an RSS feed. Here’s the <a href="http://www.w3schools.com/xml/xml_rss.asp">basic RSS feed syntax</a>. To create an RSS file in Jekyll, create a file called <code class="highlighter-rouge">feed.xml</code> in your root directory and add the following:</p>
|
|
525
544
|
|
|
526
545
|
<div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
|
|
527
546
|
layout: null
|
|
@@ -537,6 +556,10 @@ layout: null
|
|
|
537
556
|
<span class="nt"><lastBuildDate></span>{{ site.time | date_to_rfc822 }}<span class="nt"></lastBuildDate></span>
|
|
538
557
|
{% for post in site.posts %}
|
|
539
558
|
<span class="nt"><item></span>
|
|
559
|
+
<span class="nt"><title></span>{{ post.title }}<span class="nt"></title></span>
|
|
560
|
+
<span class="nt"><link></span>
|
|
561
|
+
{{ post.url | prepend: site.url }}
|
|
562
|
+
<span class="nt"></link></span>
|
|
540
563
|
<span class="nt"><description></span>
|
|
541
564
|
{{ post.content | escape | truncate: '400' }}
|
|
542
565
|
<span class="nt"></description></span>
|
|
@@ -550,20 +573,20 @@ layout: null
|
|
|
550
573
|
<span class="nt"></rss></span>
|
|
551
574
|
</code></pre></div></div>
|
|
552
575
|
|
|
553
|
-
<p>Make sure your <code class="
|
|
576
|
+
<p>Make sure your <code class="highlighter-rouge">_config.yml</code> file has properties for <code class="highlighter-rouge">title</code>, <code class="highlighter-rouge">url</code>, and <code class="highlighter-rouge">description</code>.</p>
|
|
554
577
|
|
|
555
|
-
<p>This code uses a <code class="
|
|
578
|
+
<p>This code uses a <code class="highlighter-rouge">for</code> loop to look through your last 20 posts. The content from the posts gets escaped and truncated to the last 400 characters using <a href="https://help.shopify.com/themes/liquid/filters">Liquid filters</a>.</p>
|
|
556
579
|
|
|
557
|
-
<p>In your <code class="
|
|
580
|
+
<p>In your <code class="highlighter-rouge">default.html</code> layout, look for a reference to the RSS or Atom feed in your header, and replace it with a reference to the file you just created. For example:</p>
|
|
558
581
|
|
|
559
582
|
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><link</span> <span class="na">rel=</span><span class="s">"alternate"</span> <span class="na">type=</span><span class="s">"application/rss+xml"</span> <span class="na">href=</span><span class="s">"{{ site.url }}/feed.xml"</span> <span class="na">title=</span><span class="s">"{{ site.title }}"</span><span class="nt">></span>
|
|
560
583
|
</code></pre></div></div>
|
|
561
584
|
|
|
562
|
-
<p>You can also auto-generate your posts feed by adding a gem called <a href="https://help.github.com/articles/atom-rss-feeds-for-github-pages/"><code class="
|
|
585
|
+
<p>You can also auto-generate your posts feed by adding a gem called <a href="https://help.github.com/articles/atom-rss-feeds-for-github-pages/"><code class="highlighter-rouge">jekyll-feed</code></a>. This gem will also work on GitHub Pages.</p>
|
|
563
586
|
|
|
564
587
|
<h2 id="11-add-a-sitemap">11. Add a sitemap</h2>
|
|
565
588
|
|
|
566
|
-
<p>Finally, add a <a href="https://www.sitemaps.org/protocol.html">site map</a>. Create a <code class="
|
|
589
|
+
<p>Finally, add a <a href="https://www.sitemaps.org/protocol.html">site map</a>. Create a <code class="highlighter-rouge">sitemap.xml</code> file in your root directory and add this code:</p>
|
|
567
590
|
|
|
568
591
|
<div class="language-xml highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
|
|
569
592
|
layout: null
|
|
@@ -594,9 +617,9 @@ search: exclude
|
|
|
594
617
|
<span class="nt"></urlset></span>
|
|
595
618
|
</code></pre></div></div>
|
|
596
619
|
|
|
597
|
-
<p>Again, we’re using a <code class="
|
|
620
|
+
<p>Again, we’re using a <code class="highlighter-rouge">for</code> loop here to iterate through all posts and pages to add them to the sitemap.</p>
|
|
598
621
|
|
|
599
|
-
<p>You can also auto-generate your sitemap by adding a gem called <a href="https://help.github.com/articles/sitemaps-for-github-pages/"><code class="
|
|
622
|
+
<p>You can also auto-generate your sitemap by adding a gem called <a href="https://help.github.com/articles/sitemaps-for-github-pages/"><code class="highlighter-rouge">jekyll-sitemap</code></a>. This gem will also work on GitHub Pages.</p>
|
|
600
623
|
|
|
601
624
|
<h2 id="12-add-external-services">12. Add external services</h2>
|
|
602
625
|
|
|
@@ -613,11 +636,11 @@ search: exclude
|
|
|
613
636
|
|
|
614
637
|
<p>Your Jekyll pages consist of HTML, CSS, and JavaScript, so pretty much any code you need to embed will work without a problem.</p>
|
|
615
638
|
|
|
616
|
-
<p>As you integrate code for these services, note that <strong>if a page in your Jekyll site doesn’t have front matter tags, Jekyll won’t process any of the content in that page.</strong> The page will just be passed to the <code class="
|
|
639
|
+
<p>As you integrate code for these services, note that <strong>if a page in your Jekyll site doesn’t have front matter tags, Jekyll won’t process any of the content in that page.</strong> The page will just be passed to the <code class="highlighter-rouge">_site</code> folder when you build your site.</p>
|
|
617
640
|
|
|
618
|
-
<p>If you do want Jekyll to process some page content (for example, to populate a variable that you define in your site’s config file), just add front matter tags to the page. If you don’t want any layout applied to the page, specify <code class="
|
|
641
|
+
<p>If you do want Jekyll to process some page content (for example, to populate a variable that you define in your site’s config file), just add front matter tags to the page. If you don’t want any layout applied to the page, specify <code class="highlighter-rouge">layout: null</code> like this:</p>
|
|
619
642
|
|
|
620
|
-
<div class="
|
|
643
|
+
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>---
|
|
621
644
|
layout: null
|
|
622
645
|
---
|
|
623
646
|
</code></pre></div></div>
|
|
@@ -628,7 +651,7 @@ layout: null
|
|
|
628
651
|
|
|
629
652
|
<p>To deploy your site, consider using <a href="https://pages.github.com/">GitHub Pages</a>, <a href="https://www.netlify.com/">Netlify</a>, <a href="https://aws.amazon.com/s3/">Amazon AWS S3</a> using the <a href="https://github.com/laurilehmijoki/s3_website">s3_website plugin</a>, or just FTP your files to your web server.</p>
|
|
630
653
|
|
|
631
|
-
<p>You can also package your layouts, includes and assets into a Ruby <code class="
|
|
654
|
+
<p>You can also package your layouts, includes and assets into a Ruby <code class="highlighter-rouge">gem</code> and <a href="/docs/themes/">make it a Jekyll theme</a>.</p>
|
|
632
655
|
|
|
633
656
|
<h2 id="additional-resources">Additional resources</h2>
|
|
634
657
|
|
|
@@ -639,7 +662,6 @@ layout: null
|
|
|
639
662
|
<li><a href="https://css-tricks.com/building-a-jekyll-site-part-1-of-3/">Building a Jekyll Site – Part 1 of 3: Converting a Static Website To Jekyll</a></li>
|
|
640
663
|
</ul>
|
|
641
664
|
|
|
642
|
-
|
|
643
665
|
|
|
644
666
|
|
|
645
667
|
|
|
@@ -693,23 +715,23 @@ layout: null
|
|
|
693
715
|
|
|
694
716
|
|
|
695
717
|
|
|
696
|
-
<li
|
|
718
|
+
<li><a href="/tutorials/home/">Tutorials</a></li>
|
|
697
719
|
|
|
698
720
|
|
|
699
721
|
|
|
700
|
-
<li
|
|
722
|
+
<li><a href="/tutorials/video-walkthroughs/">Video Walkthroughs</a></li>
|
|
701
723
|
|
|
702
724
|
|
|
703
725
|
|
|
704
|
-
<li
|
|
726
|
+
<li><a href="/tutorials/navigation/">Navigation</a></li>
|
|
705
727
|
|
|
706
728
|
|
|
707
729
|
|
|
708
|
-
<li
|
|
730
|
+
<li><a href="/tutorials/orderofinterpretation/">Order of interpretation</a></li>
|
|
709
731
|
|
|
710
732
|
|
|
711
733
|
|
|
712
|
-
<li
|
|
734
|
+
<li><a href="/tutorials/custom-404-page/">Custom 404 Page</a></li>
|
|
713
735
|
|
|
714
736
|
|
|
715
737
|
|
|
@@ -717,7 +739,7 @@ layout: null
|
|
|
717
739
|
|
|
718
740
|
|
|
719
741
|
|
|
720
|
-
<li
|
|
742
|
+
<li><a href="/tutorials/using-jekyll-with-bundler/">Using Jekyll with Bundler</a></li>
|
|
721
743
|
|
|
722
744
|
</ul>
|
|
723
745
|
|
|
@@ -736,7 +758,8 @@ layout: null
|
|
|
736
758
|
<footer>
|
|
737
759
|
<div class="grid">
|
|
738
760
|
<div class="unit one-third center-on-mobiles">
|
|
739
|
-
<p>
|
|
761
|
+
<p>Jekyll is lovingly maintained by the <a href="/team/">core team</a> of volunteers. </p>
|
|
762
|
+
<p>The contents of this website are <br />© 2019 under the terms of the <a href="https://github.com/jekyll/jekyll/blob/master/LICENSE">MIT License</a>.</p>
|
|
740
763
|
</div>
|
|
741
764
|
<div class="unit two-thirds align-right center-on-mobiles">
|
|
742
765
|
<p>
|
|
@@ -746,6 +769,14 @@ layout: null
|
|
|
746
769
|
</a>
|
|
747
770
|
</p>
|
|
748
771
|
</div>
|
|
772
|
+
<div class="unit two-thirds align-right center-on-mobiles">
|
|
773
|
+
<p>
|
|
774
|
+
Jekyll is funded thanks to its
|
|
775
|
+
<a href="https://github.com/jekyll/jekyll#sponsors">
|
|
776
|
+
sponsors!
|
|
777
|
+
</a>
|
|
778
|
+
</p>
|
|
779
|
+
</div>
|
|
749
780
|
</div>
|
|
750
781
|
</footer>
|
|
751
782
|
|