This chapter is from the book
This chapter is from the book
This chapter is from the book
9.4 The Layout File
Let’s start playing around with a Jekyll layout by adapting our site into the framework. The end result of this section will be a page that looks exactly like the current index.html, but which is created in a way that will give us greater power and flexibility down the road. This includes getting a first taste of templates and frontmatter (which we’ll cover in greater depth in Chapter 10).
This isn’t how you would normally go about creating a site if you were starting from scratch. Layout files are usually pretty bare-bones (as we’ll see in Section 10.1), and a more common development process is to create a spartan layout using the command jekyll new and then start doing the real work in the pages and includes. In our case, though, we’ve already done a lot of work in our single index.html file; using it as our initial layout means that, as we learn about different aspects of Jekyll, we can pull the parts we need out of the layout, thereby showing how a whole site can be sliced up and reassembled.
As we explained in Section 9.3, the Jekyll convention for layouts is to place these files in a directory called _layouts (with a leading underscore), which you should create in the root directory of your application (repos/<username>.github.io):
$ mkdir _layouts
Any HTML file in the _layouts directory can serve as a layout, so to get started we’ll copy the existing index.html into the layouts directory to create a default layout:
$ cp index.html _layouts/default.html
At this point, your project files should look something like Figure 9.6.
)
Figure 9.6: Your files and directories should look like this.
To get our site back up and visible, replace the entire contents of index.html with the code shown in Listing 9.2.
Listing 9.2: The site index with Jekyll frontmatter.
index.html
--- layout: default ---
As mentioned in Section 9.3, the content in Listing 9.2 is known as the Jekyll front-matter, and by adding it to the index.html file we’ve turned a static page into a Jekyll page template.
The frontmatter is the secret sauce that lets Jekyll know that it needs to read through an HTML page to see if it should process any of the content. By specifying layout: default, we’ve arranged for Jekyll to use default.html as the page layout. Because default.html is currently a fully self-contained page, the result of visiting http://localhost:4000 is to render our entire test page (Figure 9.3). In other words, Jekyll just takes the contents of default.html and inserts it into index.html.
){kind=link}
As mentioned in Section 5.4, this sort of transformation, where we change the underlying code without changing the result, is known as refactoring. It may seem like we’ve done nothing, but we’ll see in Section 9.6 how this new structure lets us slice and dice our website into reusable pieces.
9.4.1 Exercises
To see the way frontmatter affects how pages are built, delete the frontmatter in index.html, and write “Hello world.” Save the file and refresh the page.
Revert your changes from Exercise 1, and change the layout to one called test. Then create a new file in the _layouts directory called test.html, and add in some text like “Hello again, world.”
In the root directory of your project, create a new file called tested.html and add in some text in it like “For the third time, hello world!” Now, in your browser go to http://localhost:4000/tested.html to see what happens.