How to build website with jekyll

Start with jekyll starter to learn how work with jekyll

Jekyll Source Code Project Free Download →

Prerequisites

Before you begin, ensure you have the following prerequisites installed on your system:

• Ruby version 2.5.0 or higher
• RubyGems
• GCC and Make.

Installing Jekyll

To install Jekyll, follow these steps:

1. Open your terminal and run the following command to install Jekyll and Bundler:

   gem install jekyll bundler

2. Create a new Jekyll site by running:

   jekyll new myblog

   Replace myblog with your desired site name.

3. Change into your new directory:

   cd myblog

4. Build the site and start the local server:

   bundle exec jekyll serve

   If you are using Ruby version 3.0.0 or higher, you might need to add webrick to your dependencies:

   bundle add webrick

   You can also use the --livereload option to automatically refresh the page with each change:

   bundle exec jekyll serve --livereload

5. Browse to your local site at http://localhost:4000.

Understanding the Directory Structure

When you create a new Jekyll site, you will see the following directory structure:

├── _config.yml
├── _posts
├── Gemfile
├── Gemfile.lock
├── index.md
└── README.md

• _config.yml: This file contains site-wide configuration settings.
• _posts: This directory holds your blog entries.
• Gemfile and Gemfile.lock: These files manage the dependencies for your site.
• index.md: This is the content for your home page.
• README.md: A README file for your project.

Creating Pages and Posts

Creating Pages

To create a new page, add a file in the root directory of your project. For example, to create an "About" page, you would create a file named about.md or about.html. The file extension determines the markup language used for the page content.

1. Create the file:

   touch about.md

2. Add front matter and content:

   ---
   title: About
   permalink: /about/
   ---
   # About Page
   This is the about page.

3. Save the file and refresh your Jekyll site in the browser. The new page should now be accessible at the URL corresponding to the filename.

Creating Posts

Posts are stored in the _posts directory. Each post file should be named in the format YYYY-MM-DD-title.md.

1. Create a new post file:

   touch _posts/2024-12-29-my-first-post.md

2. Add front matter and content:

   ---
   title: My First Post
   date: 2024-12-29
   ---
   # My First Post
   This is my first blog post.

3. Save the file and refresh your Jekyll site in the browser. The new post should now be listed on your blog.

Customizing Your Website

Configuring _config.yml

The _config.yml file allows you to customize various aspects of your site, such as the title, description, URL, and more.

1. Open the _config.yml file in a text editor.

2. Make changes to the configuration settings. For example:

   title: My Jekyll Blog
   description: A blog about my experiences with Jekyll.
   url: https://example.com
   baseurl: /myblog

3. Save the file. Changes will take effect the next time you run jekyll build or jekyll serve.

Creating Layouts

Layouts define the structure and design of your site’s pages and posts.

1. Create a _layouts folder in your project’s root directory.
2. Create layout files within this folder. For example, page.html for pages and post.html for posts.
3. Define the layout structure using HTML or another markup language. Include placeholders for content using Liquid tags, such as ``.

Building and Deploying Your Website

Building Locally

To build your website locally, use the following command:

bundle exec jekyll build

This command compiles your site into the _site directory, which you can then deploy to any web server or hosting provider.

Deploying to GitHub Pages

GitHub Pages provides an easy way to host your Jekyll site.

1. Create a GitHub repository for your site.
2. Push your site files to the repository.
3. Enable GitHub Pages in your repository settings.
4. Customize your site by editing the _config.yml file and committing changes. GitHub Pages will rebuild your site automatically.

Additional Tips

• Use Themes: Jekyll comes with a default theme called minima. You can change this theme or create your own by modifying the theme setting in _config.yml.
• Use Plugins: You can extend Jekyll’s functionality by adding plugins listed in the _config.yml file under the plugins section.
• Front Matter: Use front matter to specify options such as layout, permalink, and published status for your pages and posts.

By following these steps, you can create a fully functional and customizable website using Jekyll. This guide provides a solid foundation for getting started, and you can further customize and extend your site as needed.

Jekyll Source Code Project Free Download →