As those of us who use Jekyll know, by default it creates a folder and URL structure for all blogs and pages on the site to exit alongside each other in a flat structure. So, the URL structure for this would be as follows:
. ├── blog post 1 permalink ├── blog post 2 permalink ├── about ├── projects
If your whole site is built in Jekyll, however, you may want to organise your URL structure a bit differently. Perhaps you’d like to have all of your posts under their own “sub-URL” and the pages on the root above, like below:
. ├── blog ├── post 1 permalink ├── post 2 permalink ├── about ├── projects
That would be something similar to
http://www.example.com/blog/2018/03/20/post-title-1 http://www.example.com/blog/2018/03/21/post-title-2 http://www.example.com/about http://www.example.com/projects
The solution below is for new blogs that are just coming out and haven’t been out for long to have had the chance to have posts bookmarked etc. Existing blogs will have to have their old URLs redirected.
To achieve this you need to do three things:
Folder with index file
To have an page with an index of your latest posts, under the new URL structure, create an index.html page in a new folder with the same name as the start the sub-URL. Jekyll will parse this and include it in the site
Change the permalinks to your blog posts. That should exist in the Front Matter of each post or in your
_config.yml. You add the sub-url to the permalink so that if your permalink template looked like this:
It becomes this:
If you didn’t have a permalink configuration the default of
/:categories/:year/:month/:day/:title:output_ext would have been used so the template in the config file should look like
Add the blog index to the site’s navigation
We will assume your site has links to navigate around it. As the new index.html file is not a Jekyll page, it will not appear in the navigation section. To do this, I’ve created a YAML file called
nav.yml in Jekyll’s
The contents of my
- name: Blog url: '/blog/'
Then, on your site’s navigation links you iterate through the
nav.yml entries (just one in this instance):
This can be places next to the iterator that picks up your normal pages.
Now your blog post URLs will be in a seperate sub-URL from your pages with a link to get to the post index.