This site is using a single Jekyll installation for a static portfolio website and a blog. I wanted the blog in a /blog subdirectory with its own HTML layout & stylesheet, so I added the following files to my Jekyll installation:
Here's the breakdown:
- _layouts/blog.html: contains the markup for the blog's homepage.
- _layouts/blog-archive.html: contains the markup for the blog's archive page
- blog/index.html: contains the jekyll loop for the main blog page. It should include YAML metadata at the top that specifies
layout: blog. When you run
jekyll buildfrom the terminal, Jekyll will import the contents of this blog folder into the generated site, so the folder needs to be titled "blog" and this file needs to be named "index.html"
- blog/archive.html: same as above, but this is the archive loop. It gets a
layout: blog-archiveYAML entry, which will wrap it in the contents of "_layouts/blog-archive.html".
- css/blog.css: The blog has its own CSS file so I can easily tinker with the design. (This is called in the /_layouts files.) I could've instead added the blog's styles to the site's main .sass file, but I found it easier to just work with standalone css.
Finally, you'll need a couple of YAML values in _config.yml for permalinks and pagination. Here's what I'm using:
I pulled all this from several different blog tutorials (thank you, generous Jekyll bloggers!) and the Jekyll docs. This setup makes much more sense in context, so if you're trying to do the same, you might find it helpful to look at the this site's source code on Github.