Skip to content

Commit c8b54ab

Browse files
lauramoorelauramoore
committed
restructure the first couple of lessons
1 parent 9c3dc6f commit c8b54ab

File tree

4 files changed

+150
-36
lines changed

4 files changed

+150
-36
lines changed

‎_includes/jekyll4fun/config-yml-and-local.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<details>
2+
<summary>Thing to know when working local</summary>
3+
4+
_config.yml is the one file that the the jekyll server
5+
doesn't pick up changes to. You will need to restart it every time you
6+
change the _config.yml file.
7+
</details>

‎_jekyll4fun/1-get-started.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,9 @@ Tutorial Quick-Start, No Installs Required:
2525
<img src="/images/step1.gif" alt="how-to-fork-and-rename"/>
2626

2727
</figure>
28+
29+
# Clone your new Project
30+
31+
```
32+
> git clone [email protected]:<your-id>/<your-id>.github.io.git
33+
```

‎_jekyll4fun/2-site-level-config.md

Lines changed: 70 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,79 @@
22
title: Site Level Config
33
slug: site-level-config
44
chapter: 2
5+
links:
6+
- https://github.com/barryclark/jekyll-now
7+
- https://jekyllrb.com/docs/configuration/
8+
aside: config-yml-and-local.html
59
---
6-
Now that you have a site installed, your first task is to update the _config.yml
7-
properties that cover your Jekyll "site".
10+
Now that you have a site, your first task is to personalize it.
11+
We do that by editing the "_config.yml" file.
812

9-
The _config.yml file serves a couple of purposes:
10-
* Tell Jekyll how to build the site
11-
* Holds global properties (more on accessing these later)
13+
Jekyll's _config.yml file serves a couple of purposes:
1214

13-
A note if you're not familiar with *.yml
14-
> Do not use tabs in configuration files
15-
> This will either lead to parsing errors, or Jekyll will revert to the default settings. Use spaces instead.
15+
* Sets build options
16+
* Defines "site" level properties
1617

17-
[Jekyll Now Reference](https://github.com/barryclark/jekyll-now)
18-
Change the site name, description and your personal information and links.
18+
<details>
19+
<summary><em>Tips if you are new to YAML (*.yml)</em></summary>
20+
<ul>
21+
<li>Do not use tabs to align content, only spaces</li>
22+
<li> If your value causes parsing error, just wrap it with quotes (single or double)</li>
23+
<li>Github sends you an email if it can't read your _config.yml</li>
24+
</ul>
25+
</details>
1926

20-
[Jekyll Docs](https://jekyllrb.com/docs/configuration/) for many more options
21-
than we'll talk about today.
27+
### Personalize Site Header Properties
28+
<figure>
29+
<figcaption> Change the name, description, and avatar for your site </figcaption>
30+
<img src="/images/config.png" />
31+
</figure>
2232

23-
Another note about _config.yml. It is the one file that the the jekyll server
24-
doesn't pick up changes to. You will need to restart a local server to see changes
25-
github pages however, does pick up the changes.
33+
### Personalize Footer Links
34+
35+
```ruby
36+
footer-links:
37+
dribbble:
38+
email: binbrain@rightbox.com
39+
facebook:
40+
flickr:
41+
github: lauramoore
42+
instagram:
43+
linkedin: laurakmoore
44+
pinterest:
45+
rss: # just type anything here for a working RSS icon
46+
twitter: lk_moore
47+
stackoverflow: # your stackoverflow profile, e.g. "users/50476/bart-kiers"
48+
youtube: # channel/<your_long_string> or user/<user-name>
49+
googleplus: # anything in your profile username that comes after plus.google.com/
50+
```
51+
# While We Wait
52+
Jekyll is now re-rendering your site and replacing Barry's information with yours.
53+
While that happens, let's take a quick look at Jekyll's templating system.
54+
There are two main categories of re-usable content.
55+
1. Includes
56+
2. Layouts
57+
58+
## 1. Includes example __includes/svg-icons.html_
59+
60+
"Includes" are templates to define re-usable fragments of markdown or html,
61+
as in this example a list of icons to show in the footer.
62+
63+
<details>
64+
<summary><strong>Quiz:</strong> "site" refers to what jekyll file?</summary>
65+
<strong>__config.yml_</strong>
66+
</details>
67+
68+
## Layouts example __layouts/default.html_
69+
70+
Layouts provide a consistent look and feel for your content by combining
71+
structural elements for a given page.
72+
73+
This default layout, for example, defines everything that goes into a page from
74+
the html tag down.
75+
76+
## Layouts example __layouts/post.html_
77+
78+
Thankfully, we only need one low level html layout as layouts can be nested.
79+
This post layout controls how specific elements of each post will render within
80+
the default layout.

‎_jekyll4fun/3-first-blog-entry.md

Lines changed: 67 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,43 +3,89 @@ title: Your First Blog Post
33
slug: your-first-blog-post
44
chapter: 3
55
---
6-
_posts directory is built-in feature for all Jekyll sites.
7-
Files you add under here are part of the "posts" collection.
8-
The file name convention provides date based sorting
96

10-
Let's create your first post and discuss Jekyll source file structure
117

12-
## Rename the existing post
8+
__posts_ directory is a built-in feature for all Jekyll sites.
9+
Files you add under here are part of the "site.posts" collection.
10+
Jekyll uses a file name convention to provide date metadata and sorting.
11+
12+
# Create your first post, dated for today.
13+
14+
## Open the __posts_ directory, rename the file for today's date
1315

1416
```
1517
> cd _posts
16-
> mv 2014-3-3-Hello-World.md 2018-10-7-Hello-World.md
18+
> mv 2014-3-3-Hello-World.md 2018-10-18-Hello-World.md
1719
```
20+
<details>
21+
<summary>Quiz: What file standardizes the look and feel of this post?</summary>
22+
<strong>_layouts/post.html</strong>
23+
</details>
24+
1825

19-
The date in the file name becomes the date of the post.
2026

21-
## Open the renamed file
22-
Jekyll transforms files that contain the front matter header
27+
## Edit the File
2328

29+
### Change your post's title in the _front matter_
30+
31+
_front matter_ is the top section of the file between the two dash lines.
32+
It defines a section of the file that contains variables and variable overrides
33+
for this piece of content, the "page" scope.
2434
```jekyll
2535
---
2636
layout: post
2737
title: I'm up and running!
2838
---
2939
```
3040

31-
Front matter declares properties for the 'page' scope. Templates and includes
32-
have access to the page scope during processing.
41+
### Create your own post body
42+
Everything under the front matter becomes the _content_ of your blog post.
43+
Since this is an _.md_ file, you can do some simple formatting
44+
with [Markdown](https://guides.github.com/pdfs/markdown-cheatsheet-online.pdf){:target="_blank"}
3345

34-
The content under the front matter becomes the main body of the page.
46+
<details>
47+
<summary>If you are new to markdown</summary>
48+
<ul>
49+
<li># Is a Top, level 1 heading &lt;h1&gt;</li>
50+
<li>## takes the heading down one notch</li>
51+
<li>* indicates a list item</li>
52+
<li>_italics here_</li>
53+
</ul>
54+
</details>
3555

36-
## Quiz: What does Jekyll do with this new _posts file?
56+
```markdown
57+
Blogging like a hacker at Connect Tech 2018!
58+
```
59+
## Save and commit your changes
3760

38-
<details>
39-
<summary>Answer</summary>
40-
<ul>
41-
<li>Rendered files are placed under _site directory</li>
42-
<li>A new file shows up under the site root</li>
43-
<li>It is a complete, static html file</li>
44-
</ul>
45-
</details>
61+
# While We Wait
62+
Jekyll is now re-rendering your site, and will show your new post shortly.
63+
While that happens, let's take another look at templating and rendering.
64+
65+
## File name into Date variables
66+
Jekyll parses the page.date variable from the file name. The post layout
67+
uses a liquid filter to control date format output.
68+
69+
{% raw %}
70+
```
71+
Written on {{ page.date | date: "%B %e, %Y" }}
72+
```
73+
{% endraw %}
74+
75+
[Filters](https://jekyllrb.com/docs/liquid/filters/){:target="_blank"}
76+
are the mechanism to do logic based formatting in Liquid Templates.
77+
78+
_(Don't worry, you'll try some out in the next section.)_
79+
80+
## Rendered content ends up in __site_ directory
81+
If you are working with a local build, Jekyll outputs all rendered pages
82+
to the __site_ directory. Since we're dealing with static pages Jekyll
83+
relies on the *permalink* property for the final output file name. You can
84+
move a source file anywhere, Jekyll writes the output to folders and files based
85+
on permalink pattern defined.
86+
87+
| permalink | output under site | url |
88+
| /:title | _site/page-title | /page-title |
89+
| /:title/ | _site/page-title/index.html | /page-title/ |
90+
| /:collection/:title | _site/folder/page-title | /folder/page-title |
91+
| /:collection/:title/ | _site/folder/page-title/index.html | /folder/page-title/ |

0 commit comments

Comments
 (0)