About

This repository is the starter blog project to be turned into a full-fledged blog using Jekyll.

By following the below instructions, you should produce a product very similar to my finished product found here:

https://github.com/JacobHelton57/Jekyll-Blog-Undiscovered

Before following these instructions, you will need to install the Jekyll Gem. This process should be pretty straight forward.

We'll be following along with the instructions below during the actual Undiscovered Session.

To-Do:

Create _config.yml in root directory:

markdown: kramdown
baseurl: /zen-habits
permalink: pretty
exclude: ['README.md']

Set up additional directories

1. Create _includes folder in root
2. Create _layouts folder in root

Create default layout

1. Add default.html layout to _layouts
2. Copy entire index.html into default.html
3. Cut .home-page fromdefault.html and paste in index.html in place of everything else
4. Replace gap in default.html with {{content}} tag
5. Add layout:default to index.html's front matter

Make navbar an included file

1. Create nav.html file in _includes directory

2. Move the navbar section to nav.html

3. Insert {% include nav.html %} in default template where nav code was

4. Use {{site.baseurl}}/ in hrefs

5. Logic for active url

   {% if page.url == '/' %}active{%endif%}

6. Do the same thing for the about link using {{site.baseurl}}/about/

Make pagination functioning

1. Download paginator code
2. Move paginator.html into _includes
3. Include paginator in index.html
4. Update YAML with paginate: 3
5. Add the paginator gem to the root of the project folder

Get index.html to grab data from posts

1. Change posts directory name to _posts
2. Delete all but one of the cards: we'll only need one
3. Wrap card with {% for post in paginator.posts%} and {% endfor %}
4. In default.html, fix stylesheet and favicon links using {{site.baseurl}}
5. Add {{post.title}} and {{post.excerpt}} to .title and .text fields
6. Replace img url with {{site.baseurl}}/img/{{post.thumbnail}}
7. Replace post date with {{post.date | date: "%b %d, %Y"}}
8. Replace author name with {{post.author}}
9. Replace href to read more button with {{site.baseurl}}{{ post.url }}

Create posts layout

1. Add post.html layout to _layouts

2. Instead of creating a new layout, we are extending the default layout

3. Copy .post div from HTML sample post into post.html

4. Replace fields with {{page.title}}, {{page.author}}, and {{page.date | date: "%b %d, %Y"}} tags

5. Replace img url with {{site.baseurl}}/img/{{page.banner_image}}

6. Add {{content}}

7. Make all posts use post layout by default

    defaults:
      -
        scope:
          path: ""
          type: "pages"
        values:
          layout: "default"
      -
        scope:
          path: ""
          type: "posts"
        values:
          layout: "post"
          category: "blog"
          author: "Jacob Helton"
          banner_image: "900x300.png"
          thumbnail: "750x300.png"
   

Make sidebar dynamic

1. Create sidebar.html include file and add {% include sidebar.html %} to default
2. Loop through 5 most recent posts using {% for post in site.posts limit:5 %} & {% endfor %}
3. Substitute href for {{site.baseurl}}/{{post.url}}, title for {{post.title}} and date for {{post.date | date: "%b %d, %Y"}}

Make about page use post layout

1. Add layout: post to about.html

2. Create about.md file

3. In front matter, add

    ---
    layout: post
    title: About Me
    author: Mr. Miyagi
    banner_image: miyagi.jpg
    thumbnail: miyagi.jpg
    ---
    
   

4. Copy text over below front matter

5. Delete about.html

6. Refresh page