Adding Pages to Jekyll site

This is tutorial can be used to add pages to any Jekyll site. I am assuming that you have setup your Ruby Development Environment. If not, then refer to this document here to get started easily.

Below are few easy steps that you can follow to add pages to your Jekyll site. I have also attached images to explain the process better.

Note: I have taken the example of GTK Website, which I’m working on. You can find its Gitlab instance here.

Step 1.

In collections/_docs directory, create a new file with name: hello-world.md.

Creating a new Markdown file.

Step 2.

I want this page to be available at the following link: http://localhost:4000/docs/tutorials/hello-world/

Add the following front matter to the hello-world.md.

---
permalink: /docs/tutorials/:name/
---

Adding the front matter to the Markdown file.

Step 3.

Add your content in the Markdown format to the `hello-world.md.

This is the demo file to show the process of adding new pages to a Jekyll site.

Adding the new content to the Markdown file.

Step 4.

In _data directory, open the navigation.yml file and update the sidebar_links array by adding the following content:

- title: Hello World
  name: hello-world
  section: Tutorials

here,

title is display text on sidebar on docs page
name is the name of the file which should be pointed to when the link is accessed
section is category this page should fall under

Updating YML file in the Jekyll Project.

Step 5.

In case the new file is the main section page, then update the sidebar_sections array by adding the following content:

- title: Tutorials
  name: tutorials

here,

title is display text on sidebar on docs page
name is the name of the file which should be pointed to when the link is accessed

Updating YML file in the Jekyll Project.

Step 6.

Save all the files and serve the website on the local server by running the following command.

bundle exec jekyll serve

Compiling the Jekyll website.

Step 7.

Go to http://localhost:4000/docs/tutorials/hello-world/ and the page is up and running.

Fetching the Jekyll website on the localhost.

Thanks for reading 💜

If you enjoyed my blog, follow me for more informative content like this.

I publish a monthly newsletter in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev related posts which I across while surfing on the web.

Connect with me through Twitter • LinkedIn • Github or send me an Email.

— Ravgeet, Full Stack Developer and Technical Content Writer

Adding Pages to Jekyll site

Comments

More from this blog

Building a Real-Time Power Outage Monitor with ESP32 and Slack

Debugging and Stopping Infinite Render Loops in React

Rebuilding My Static Blog with Build-Time Data and Instant Search

My 7 Aspirations as a Software Engineer in 2026

Realtime Deploy Notifications in Next.js with Toasts

Step 1.

Step 2.

Step 3.

Step 4.

Step 5.

Step 6.

Step 7.

Command Palette

Comments

More from this blog

Step 1.

Step 2.

Step 3.

Step 4.

Step 5.

Step 6.

Step 7.