Join James Williamson for an in-depth discussion in this video Exploring functionality, part of Jekyll for Web Designers.
- The best way to learn Jekyll is to just jump in and start working with it. In this exercise we're going to start exploring Jekyll's functionality by modifying the default site and then examining the results. I want to start by taking a little bit of a closer look at all the components that make up our Jekyll site. To do that, I've opened up the code editor. And I've pointed my working directory at the Blog directory that we created in the last exercise. So depending upon which code editor you're using, you may have to establish a new project, establish a new working directory.
You just want to make sure that you can see the contents of that Blog directory that we created out on the desktop. So you'll notice we have a configuration file, we'll take a closer look at this in just a little bit. But I noticed I have four folders here, and the _includes folder if I open that up, I have a footer.html, a head.html and a header.html. And if I take a close look at these I can see that each of them are just code snippets that are designed to be repeated on various pages. So for example, the head.html contains all my meta tag information, page title or site title, link to external resources.
You know typically what you would find in the head of an HTML document. If I open the _layouts directory, this contains all of the templates that are used to build up our site. The default template you'll notice simply has an html document type. And then a liquid templating tags are used to include those code snippets. So there's the head.html, header and footer. We also have a content where the page or post content would go. In addition to the default template, we have page templates and post templates that apply to individual pages or the individual posts of the blog.
Now if I click on one of these, you'll notice that they have what's known as this YAML front matter up top. So the post template is actually using the default template. And this content right here, would go in the default template where the content tag is. So that's how these two templates are working together. Now in the post template, you'll notice we have a little bit of a structure here for the post content. We have an h1 where the page-title is going to go. We have underneath that a display for the date and the author's name if that's included, page.meta if that's included.
And then we have just the post content itself. Now if we drill down into the _posts directory, we see that we have one individual post, when I click on that, this is just a text document formatted and marked down. And then at the very top, again we have that front matter where all of our page variables, like which template should we use, what's the page title, here's the date, categories that it belongs to, things like that. So these are all individual page components that when Jekyll parses this, will be used to generate our site.
So the next thing I want to do is to open up my terminal window. Because I want to go ahead and serve this site so that I can see the finished site that Jekyll's going to generate based on these components. The first thing I need to do is navigate to my Blog directory. So I'm going to type in cd blog. I was on the desktop before so that allows me to go change my current directory into the blog. Now this is important because any Jekyll commands that we run will apply to the current directory we're inside of. So it's really important that we navigate to the blog directory prior to running these commands.
Next thing that I'm going to do is I'm just going to type in jekyll serve. And what that's going to do is it's going to build the site, but it's also going to launch a local web server and serve the page for me so that I can preview it locally. To do that I'm going to open up a browser, and I want to navigate to localhost port 4000, so localhost:4000. When I refresh the page, now because Jekyll's serving the site, here is our generated Jekyll site. And in fact, if I open up that blog directory, inside Finder, I'll notice that there is a folder that wasn't there before, this _site directory.
Jekyll created that when I served it, 'cos it build the site, and then it generated the static site that we're looking at now inside that, based on the components that we were looking at earlier. So this is a pretty simple blog. I can see it has Your awesome title that we haven't set yet. And then here is Welcome to Jekyll, this is the individual post we were looking at earlier. If I click on that, it takes me to this individual post page. And I could see the date, and I could see all that marked down, formatted content converted to HTML. Now I notice, for example, that in the post template, there was an option there for author.
But no author was given in the post, so it doesn't show up. So what I'm going to do is I'm going to back into my code editor, and then I'm going to open up that individual post. Now all these variables are set up in the front matter. So what I'm going to do is I'm going to go up to this front matter section, I'm going to create a brand new line, and then I'm just going to say author: and then in quotation marks, my name, James Williamson, and then I'm going to save that. Next thing I'm going to do is I'm going to actually go to the post template, and underneath the h1 that we have there, I'm going to create an h2.
And inside that h2, I'm just going to type in Generating static sites, and I'll save that. Now if I get to my terminal window, you'll notice something pretty neat in here. Jekyll's local server is watching this blog directory. And if we change or modify these files in any way and save them, it's going to recognize that change, and then it's going to regenerate the site for us automatically. So long as I'll have to keep continually serving the site, it just watches it and serves it for us. So now if I go back to my browser and refresh this post page, I noticed that there is the h2 Generating static sites that we placed in.
And there is the author name that was picked up from the variable that we added to the front matter of the post. So in a very short amount of time, we went ahead and generated the site based off of all the individual components of our Jekyll's boilerplate site. Examined them, modified them, and had Jekyll watch the site and generate the change into a static site directory. Hopefully, this helps to illustrate the relationship between layouts and posts, and how Jekyll uses them to generate pages. Now that we have a basic understanding of how Jekyll works, we can begin building our own custom blog.
- Installing Jekyll
- Setting configuration options
- Building page templates and navigation
- Adding metadata and content with Jekyll
- Creating a blog index with dates, post excerpts, and pagination
- Writing posts and pages using Markdown
- Creating a blog archive with tags
- Deploying Jekyll websites
- Uploading to GitHub