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

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

If you are using jekyll-paginate in your blog post index page you must change the paginate_path in your _config.yml to include the sub-url prefix too. This also applies to jekyll-archives as they will also need to have their permalinks section in _config.yml prepended with the sub-url prefix.

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:

permalink: /:year/:month/:day/:title/

It becomes this:

permalink: /blog/:year/:month/:day/:title/

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 /blog/:categories/:year/:month/:day/:title:output_ext

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 _data folder.

If a _data folder doesn't exist on your site create one in your project's root folder. This is the folder where you can store metadata for your site and access it at runtime

The contents of my nav.yml file:

 name: Blog
 url: '/blog/'

Then, on your site’s navigation links you iterate through the nav.yml entries (just one in this instance):

{% for link in %}
  <!-- add a link template as you would do for your normal pages  -->
{% endfor %}

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.