Join James Williamson for an in-depth discussion in this video Starting with page mockups, part of Jekyll for Web Designers.
- Typically, the first step in building a Jekyll site is to build the templates that are going to be used to generate the site's pages. I find that the easiest way to do this is to start with a few mockups of typical pages within your site. This allows you to focus on page structure and semantics, author styling, and plan basic site structure before you have to focus on template logic. It also gives you a solid code foundation to use for building your templates. So, I want to take a look at the page mockups that I use as the basis for the templates for our finished blog.
So, I've got both of them opened up in a browser and you can find them in the exercise files folder. There's two of them, there's the index page and the post.html page. Now these are both fairly finished mockups of the blog itself. You can see since we've already looked at the finished site, this should look fairly familiar to you. The styling isn't totally the same, but it's pretty close. So, in terms of how refined this mockup is, I spent a good bit of time on it.
I went ahead and built in the responsiveness of the blog itself, I took the styling almost to a finished state, and I really thought my way through how I wanted to organize the site and how I wanted it to look. So, this would be the index page and this would be the post page. Now if I open up both of those pages in a code editor, another thing that it shows you is it allows me to really think about the semantics of my page and how I want to structure it. That again is one of the things I love about Jekyll.
We can build our pages any way that we want. We're not constrained to any type of structure or logic. See I'm using all semantic tags, I'm using ARIA roles, I'm adding a little bit of structural markup to help identify content. I'm thinking about how my date and time are going to be displayed and formatted. This is me not really being worried at all about how Jekyll's going to format it, but how I want it formatted. And you can kind of go ahead and explore through both of those pages. Take a look at the semantics of how I'm building the content, and you'll get a feel for exactly sort of what I was thinking about and how I want my blog to be structured.
Now another thing it allows us to do is really think at this point about what our templates are going to look like, and what content is going to be dynamic versus what content is going to be static. When I'm looking at, for example, the index page and the post page in tandem, I notice, for example, the header on both of them is basically the same. I've got the same navigation, the same blog title, the same tagline. I notice the sidebar doesn't really change. It has a list of archives, so that's going to have to be dynamically generated. It has a link to an RSS feed, and it has links to social media.
But essentially, other than the dynamic content that needs to be generated within the sidebar, the sidebar remains the same. And the footer is basically the same on both of them. Now I may decide a little bit later on to change that. For example, in the post it'd be really nice if someone was reading a long post if they had a way to sort of browse back up to the top. And you can do that, you know, in the footer as well. That's something to think about. But if I look at the actual content of both of these pages, I can also get a feel for what needs to happen within the templates.
So, obviously, the content itself is going to be dynamically generated. On the index page, we have a list basically of blog posts. And the way that I'm displaying them is I'm showing the title of the blog post, which is going to have a link to it, the date, and then an excerpt from the blog post. And then a link to read more. After that I have some categories that it was posted in. That structure repeats itself for as many times as I really feel like it should repeat. Maybe I'm going to show all the blog posts. Maybe I'm only going to show four or five.
That's really up to me and that's something that I'll need to think about when I start building the templates. When I go to the post itself, I notice that I'm displaying the title of the post and the date. And then the post content follows. At the end of it I've got all those categories that it belongs to. And, although I didn't do it here, maybe I might want to add a link to the next post or the previous post, something like that. That might be nice. And if I decide to limit the number of posts that are shown on the index page, I'm definitely going to have to have some type of mechanism that allows people to browse all the way through them.
So, that's sort of the basic structure of our pages and it gives us a feel for how our template is going to be constructed. Now how detailed you make your mockups is really up to you. I like to make them almost finished representations of the final pages. That way I can work out styling and structuring well before starting on what my template logic needs to be. And now that we know what our site goals are, we can start building our templates, which we'll do next.
- 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