Creating a Multi-page Jekyll Site with Navigation Links

Creating a multi-page website with Jekyll is a popular choice for developers who want a static site generator that is easy to customize and maintain. One of the key features of a well-designed Jekyll site is effective navigation, allowing visitors to move seamlessly between pages.

Setting Up Your Jekyll Site

First, ensure you have Ruby and Jekyll installed on your computer. You can create a new Jekyll site by running:

jekyll new my-site

Navigate into your site directory with:

cd my-site

This sets up the basic structure of your site, including folders for pages, posts, and assets.

Creating Multiple Pages

To add pages, create new Markdown files in the root directory. For example, to add an About page, create about.md with the following content:

---
layout: page
title: About
permalink: /about/
---

This is the About page content.

Similarly, you can create other pages like Contact, Services, etc., each with its own Markdown file.

Adding Navigation Links

Navigation links are typically added in the _layouts/default.html or _includes/header.html files. To include navigation, add an unordered list with links to your pages:

• Home
• About
• Contact
• Services

This creates a simple navigation menu that appears on all pages, making it easy for visitors to explore your site.

Customizing Your Navigation

You can style your navigation links with CSS or use Jekyll plugins for more advanced menus. For example, adding classes to your <ul> or <li> elements allows for better styling.

Here's an example of a styled navigation bar:

<nav class="main-nav">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about/">About</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>

Building and Serving Your Site

Once your pages and navigation are set up, build your site by running:

bundle exec jekyll serve

This command starts a local server at http://localhost:4000, where you can preview your site with all navigation links working.

Conclusion

Creating a multi-page Jekyll site with navigation links is straightforward once you understand how to add pages and link them together. Proper navigation enhances user experience and helps visitors find information quickly. Experiment with styles and layouts to customize your site further.