By default in many Jekyll themes (including the one I use) the homepage is where your blog posts are. I like having the homepage and the blog separate. My homepage informs users about the website’s function and provides links to different parts, including the blog.
Because Jekyll sets everything up for you, setting a custom homepage is not that easy, nor could I find it in the Jekyll documentation. After some experimentation and research this is the process that I used:
By default, the index.html in the root directory contains code for pagination. pagination makes it so that after a certain number of posts the rest get moved onto the next page. We need this code for our blog posts. The first step in making a new homepage is to move this pagination code into its folder. I moved ./index.html -> ./blog/index.html. Why I did this will become clear later.
I just moved my index page into a different folder, however, Jekyll needs an index page to build without failing. With Jekyll, the index page can be either Markdown or HTML. I wanted a stripped-down blog post as a homepage so I changed the name of the post I wanted to use to index.md.
This presents further challenges as each post uses a post layout which dictates things to include by default. For blog posts, this includes how long it takes to read that post and the date. To remove this, I created a new layout inside ./_layouts and removed the date and time to read. The layout can be found here.
The folder structure for my website looks like this now:
website
├── _config.yml
├── index.md (welcome post)
├── blog
├── index.html (paginate code)
│
├── _posts
├── post1.md
├── post2.md
├── post3.md
├── post4.md
├── post5.md
I then need to tell the Jekyll pagination plugin where to look for my index.html containing pagination code (./blog/index.html). This is done through my _config.yml, adding this line of code:
paginate_path: "/blog/page:num"
This not only tells pagination to look in /blog/ for index.html but also provides the format of bgigurtsis.com/blog/page2, page3, page4 etc.
So, pagination now has its path set to bgigurtsis.com/blog/page. However, it will still go back to bgigurtsis.com when clicking Newer to navigate back to the first page of blog posts. To correct this I had to change this line of code:
<a class="pagination-item" href="/">Newer</a>#
to this
<a class="pagination-item" href="/blog">Newer</a>
And that’s it! It was quite involved getting this changed when there’s not much documentation on it but it was very satisfying making it work in the end.