Jekyll Tutorial: To create a static website - (r)

Share on

Nowadays web-based sites are crucial for creating an online presence, advertising your business, and reaching out to potential customers. Yet, creating a website can be a daunting task.

In this article, you will be introduced to one of the popular SSGs -- Jekyll, learn the basics of how it functions, and then how you can build static websites using it.

Here's an live demonstration of a blog you'll be building using Jekyll.

It is possible to access the project's GitHub repository in case you'd like to take a closer look.

What exactly is Jekyll?

What Jekyll is that makes Jekyll stand out among SSGs:

1. Fast and secure: Jekyll does not deal with any server-side database or scripting, meaning you are less susceptible to security vulnerabilities or attacks. It creates static HTML files, which makes your website very quick and safe.
2. Customizable: Jekyll is highly customizable, allowing you to use layouts and templates and even build plugins to expand functionality.
3. Simple to install: Jekyll generates static HTML files that are able to be deployed to a website server or host without the need for a dynamic content management system.
4. Supported by a huge community: Jekyll boasts a huge group of developers and users This means that plenty of support is available should you require assistance or wish to enhance the capabilities of your site.

How Do I Install Jekyll

You first need to start installing Ruby on your computer before you can proceed to installing Jekyll as stated in the Jekyll document.

How to Setup Jekyll on macOS

By by default Ruby arrives preinstalled in macOS However, it's not advised to make use of this edition of Ruby to install Jekyll due to its age. As an example, on Ventura which is Apple's most recent operating system it's the version of Ruby installed is 2.6.10 The most recent version is 3.1.3 (as at the time this article is written).

For this to be fixed, you'd have to install Ruby properly using a version manager like Chruby. It is necessary in order to set up Homebrew on your Mac first using the command that follows in your terminal.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

If the installation was successful, quit and start Terminal, then check if Homebrew is now ready using this command:

the brew doctor

If you see " Your system is in the process of brewing", you can now move on to the installation of chruby and ruby-install by using the commands below:

Brew install chruby ruby-install

You can now install ruby's current version, 3.1.3 with ruby-install. ruby-install application you've just installed:

ruby-install 3.1.3

It will take about a couple of minutes. After it's done, you can set your shell to automatically use chruby using the following command:

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
 echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
 echo "chruby ruby-3.1.3" >> ~/.zshrc

You can now quit and relaunch your terminal. Make sure everything works by running this command:

ruby V

It should say it should read 3.1.3.

Now you have Ruby's most recent version running on your computer. It is now time to download the most current version of Jekyll and bundler gem:

gem install jekyll bundler

How to Install Jekyll on Windows

To install Ruby and Jekyll on a Windows machine, it is recommended to use RubyInstaller. RubyInstaller. You can do this by downloading and installing a Ruby+Devkit version by visiting the RubyInstaller Downloads as well as using the default options for installation.

In the final stage of the installation wizard, execute the ridk installation procedure -- this is used to install gems. Read more via the RubyInstaller documentation.

Choose from the available options MSYS2 as well as MINGW Development Toolchain. Open a new command prompt window, and then install Jekyll as well as Bundler using the command below:

gem install jekyll bundler

What Can You Do To Ensure That Jekyll has been installed correctly

To confirm the accuracy of Jekyll is properly installed on your system, start your terminal and execute this command:

jekyll -v

If you see the version number, that means you have Jekyll is running properly on your computer. You're now ready to use Jekyll!

Jekyll Commands as well as Configuration

Before we start making and personalizing an unstructured website using Jekyll It's helpful to be familiar with its different CLI commands and the parameters of a configuration file.

Commands for Jekyll CLI

Here are some of the well-known Jekyll CLI commands. You don't need to memorize these commands, just be aware that they exist, and you are welcome to return to see what each one does when you notice their usage later in this article.

• jekyll build: Generates the static web page inside the _site directory.
• jekyll serve: Builds the site and starts a web server on your local machine, allowing you to preview the site in your browser at http://localhost:4000.
• jekyll new (site name] creates a new Jekyll website in a brand new directory that has the website name.
• Jekyll Doctor: Outputs any configuration or dependency issues that might be causing problems.
• Jekyll Clean: Deletes the _site directory, which is where site files are stored.
• Jekyll Help provides the documents for Jekyll.
• jekyll service --draft Serves and generates your Jekyll site, which also includes articles that belong located in the _drafts directory.

It is also possible to add alternatives in these commands. Check out the complete list of Jekyll commands and choices in the Jekyll document.

Jekyll Configuration File

This Jekyll settings file a YAML file called _config.yml that contains settings and options for your Jekyll site. It can be used to alter different aspects of your site, including the site title and description, the URL and many other settings.

Below are a few of the most commonly used settings:

• Title: The title of your site.
• Description: An introductory description for your web site.
• basisurl The subdirectory of your site, if it's located in a subdirectory of a domain.
• URL: The URL structure of your pages and posts.
• include: A list of directories or files that are excluded from the generation of websites.
• includes: A list of directories or files that should be included when creating the website.
• paginate: A number of articles that will be displayed per page, when pagination is used.
• plugins: A list of Jekyll's plugins available to load.
• themes: By default, it is set to minima. The user can choose any other theme by setting its name and implementing other settings we will learn about later in this article.

Additionally, you can make custom variables within your configuration file and use these variables to create templates for your site's, layouts, and includes. You could, for instance, create a variable called author_name and use it in your templates in the form of site.author_name |and|•}.

To modify your Jekyll setting file open the _config.yml file in the directory of your Jekyll project directory using an editor for text and then make changes.

Note: Any changes you make to the configuration file will be reflected the next time you generate your website using jekyll build or jekyll serve..

How Do You Create A Static Website with Jekyll?

Now that you have Jekyll installed on your system, it's now possible to create an Jekyll static site with just only a couple of minutes. Open your terminal and run this command:

jekyll's blog new-joels

Be sure to replace "joels-blog" with your preferred site name.

Next, navigate to the website folder. It will show a typical Jekyll site structure that includes directories as well as files such as these:

+- _config.yml
+-Posts +the Gemfile
+--- Gemfile.lock
+--- index.md
+the README.md

Let's see what each one directories and file is for:

• _config.yml: The Jekyll configuration file containing the site's settings as well as alternatives.
• posts: A directory that includes your website's content (can be blog posts). These can be Markdown or HTML files with a specific file naming convention: YEAR-MONTH-DAY-title.MARKUP.
• Gemfile and Gemfile.lock: Bundler uses these files to manage the Ruby gems upon which your site relies.
• index.md: The default homepage of your website is generated by markdown Markdown or HTML file.

There are many more folders and files that you can use to personalize your Jekyll web page. They include:

• _includes: A directory that includes reusable HTML fragments that could be included into your layouts and pages. For example, navbars, footers, e.t.c.
• layouts: A directory that contains HTML layout templates, which define the structure of your pages.
• assets The directory includes any file that is utilized by your website, such as images and CSS files.
• SASS: A directory that includes Sass files that can be used to generate CSS for your website.

This structure of files provides an excellent foundation for your Jekyll project. However, you are able to modify it according to the particular requirements of your project.

Quick Start Option: Use Our GitHub Template

As an alternative to starting your own project with the Jekyll CLI, you can create a Git repository by using the "Hello World" Jekyll templateon GitHub. Choose This template and then Create a repository to copy the starter code into an entirely new repository inside the confines of your GitHub account.

How to Preview a Jekyll Website

Now you have you have a Jekyll website however, how do you preview the website to see what it looks like before you maybe start making it your own to meet your needs? Start your terminal, and then move into your project's directory and then execute the below procedure:

jekyll serve

It will create a website folder that includes all static files generated from your project. It will also start the Jekyll server, and you can preview your site via http://localhost:4000.

If you go to the URL from your internet browser, you should see your Jekyll website with the minimal theme.

How To Customize a Jekyll Site

When you make a website using Jekyll and make use of themes, you are able to modify the website to meet your needs. In particular, you might need to create new pages, alter a page's layout, or adjust how the items appear. These are all possible using Jekyll.

How Front Matter Works in Jekyll

When you open each page or blog post within your folder for projects, you'll see an information block that is contained in three dots (--) at the top of each page. This is called front issue.

It's a format for metadata employed in Jekyll for storing details about a webpage or post. It is written either YAML or JSON.

The code >---
description: "Welcome to Jekyll!" Description: "Introduction to what Jekyll is and how it works"
 Date: 2023-03-07, 16:54:37, +0100.
code> code>

In the case above the front matter contains various variables like the title of the post, its description as well as the dates. These variables can be used to alter the layout of a page layout as well as the post's content.

Jekyll analyzes front matter and uses it to produce the HTML that you want to display on your website. The front matter is a way to specify various options, such as layout, permalink, publication status, and so on.

How to Configure the Default Front Matter

You can also configure your default front matter to ensure that there is no need to create the identical front matter for different files. In this case, for example, every blog post has the same author's name, and layout. You can define a custom front matter within the _config.yml file to serve all your blog post.

The structure of it is somewhat complicated, however here's how it will look in. Copy this code below the previous setting in the _config.yml file:

defaults to-
- scope:path "posts" The empty string is the same as all files
value:layout: "post"
 author: "John Doe"

When you now execute this jekyll service command, you will be able to see that even if you don't specify the style and name of each blog post, you are able to access them in your files.

Note: When you don't create a path for your files that is not defined, all files will utilize the defined front matter values.

Page creation in Jekyll

When you build a file in the root directory of your project, it is considered to be a page. The name you give to the file will be used in the URL. So, it is important to give each page with a name that is memorable.

For example, if you want to create a page with the URL https://example.com/about, create a file named about.html or about.md. The extension of the file determines which markup language that will be used for the content of the page (HTML as well as Markdown).

When you've made a document, make sure you add the proper the front matter and contents. Save the file and then refresh your Jekyll page in the browser. The updated page will be accessible via the URL that corresponds to the filename.

Designing Layouts using Jekyll

Layouts are a way to specify the design and structure of your site's pages and blog posts. It is typically done using HTML code. You can include a header, footer, meta details in the metadata of your website.

The first step would be to create an _layouts folder within your directories root of your project. You should then create a new document for each layoutThe file must have an appropriate name that is suited to the purpose of the layout. As an example, you could create a file named page.html to define the page layouts for every page on your website.

It is best to establish the overall structure of your layouts with HTML or other markup languages.

You can include placeholders to accommodate any dynamic information that is included in the layout, such as the page title, content, and metadata. For example, you might design a simple layout, which includes the header, footer and content area like this:

"DOCTYPE HTML"  HTML1 page.title |Title of page|title}
 
Title of page 
 Title of page 

 

At build time, Jekyll will replace the tag's content with that of navbar.html.

The _includes folder may contain the files of any kind, such as HTML, Markdown, or Liquid files. It is important to ensure that your code is DRY (Don't repeat yourself) in order to allow you to reuse the same code on multiple sites.

Looping through Posts within Jekyll

You might want to create your own blog site to contain all blog entries That means you'll want to fetch all the content on your website and loop through them. In Jekyll it's easy to achieve by using the % for % tag.

Each post published on a Jekyll website are stored in the site.posts variable. It is possible to loop through the posts using the post.title |title|post.title} Liquid variable to display the post's title in this manner:

% for post in site.posts %
 post.title % the post.titlepost.title |title|•} 
Endfor%

Additionally, you can use Liquid variables to generate additional information about each blog post, for example the post's date or author:

  % for post in site.posts %
  post.title | •|} 
 Published on published onpost.date  "%B %-d %Y"  by post.author }|"%B %-d, %Y"|"%}
endfor % 

Notice that in the example above that the date Liquid filter format each post's date into a more human-readable format.

So, now you've got an idea of the basic layouts that could be added for the appearance of your Jekyll site. You don't necessarily need to utilize all of these features in order to create a Jekyll website from scratch since it is possible to search for a theme that meets the requirements of your site and then add it to your Jekyll website.

How To Add a Theme To Jekyll Sites? Jekyll site

There are many themes to add and the great thing is that with each theme, you will find clear information about how to install them. You can find this information in the ReadMe file on GitHub. The option to duplicate the theme, or even if it is a gem-based theme this process will be easier.

To read this article, you would install an appropriate Blog theme and customize it to have the appearance of a blog site deployed to. It is a gen-based theme and it is possible to access its source code and directions on GitHub.

To install a theme based on a gem, open your site's Gemfile and add the gem that matches the theme you want to use. The theme we will use is the jekyll-theme-clean-blog. The default theme can be replaced with a minimalista theme within the Gemfile:

gem "jekyll-theme-clean-blog"

Use the bundle install command within your website's directory in order to download the gem of your theme and its dependencies.

If you are using your site's _config.yml file, you should add this line to define the theme you'd like to utilize:

theme: jekyll-theme-clean-blog

In this moment the theme is now available for use.

It is best to eliminate all layouts within the _layouts directory in order to prevent them from overriding the layout of your theme.

You can then locate the layout names of your file in the the documentation of your theme. For example, if you're using the jekyll-theme-clean-blog theme, the layout names for the index.html file is home, other pages is page, and all posts is post.

Finally, run jekyll service to develop and manage your site using the new theme.

That's it! The Jekyll site should now be running the latest gem-based theme that you have installed. It is possible to customize the theme further by modifying the layout of your website's _layouts directories.

Customize a Jekyll Theme

Now that you have the themes added to your site The next step would be to customize the site according to your requirements and function as it was intended to work. In this case, for instance, the pictures on each post or page are not displayed rather they are displayed on a gray background.

It is possible to fix this issue by including a front matter feature to each page and post by specifying the path to an image you wish to use. In Jekyll assets, such as photographs are saved inside the assets folder. Within this folder, you may choose to make sub-folders in order for organizing your images.

Now you can include a background option in the front matter block, along with the path for its image. For instance, on the about page, this is the front matter block:

The code >---
page layout Pagetitle: About
 description: This is the page's title. permalink: /about/
 background: '/assets/images/about-page.jpeg'
 ---

This is the same for every page as well as posts, and your page will look like this:

Another thing you can customize is adjust the navbar options. In this case, for instance, you might not be in need of a contact form so you can eliminate its hyperlink from the navigation bar options. You can do this by looking through the the theme's code source by observing the code that is responsible for the navigation links, and replicating the file exactly within your own project and removing any option that which you don't require.

The links for navigation are located in the directory _includes' navbar.html files. You can create this file by copying the code you copied from your source code, then remove the contact option or add any additional option you like.

After saving your project, you will be able to see that the navigation options will be customized to your preferences:

One last modification is to create a post page that will hold all your blog posts -that is, you'll be able to loop through the entire blog posts that are on the page.

Create a post.html file posts.html and paste the following code into it:

A code >---
layout: page
 title Description of the blog Learn more about our blog and keep up-to-date with interesting blog posts. background: '/assets/images/blog-page.jpeg'
 ---
 
 % for post in site.posts %
 
 
 
  post.title 
 % if post.subtitle %
  post.subtitle 
 % else %
 
  post.excerpt 
 
 % endif %
 
 
 Posted by % if post.author %  post.author  % else %  site.author
  % endif % on  date: '%B %d, %Y'  * % include
 read_time.html content=post.content %
 
 
 
 
 
 % endfor %

It is your choice to modify the background image so that it reflects your stored image. In the code above, you are looping through all the posts to show all the articles in this post. This is how the post page should look like when saved.

How Do I Add Content to a Jekyll Site

It is now time to create an Jekyll site and configured your site according to the needs of. The last step would be to either add content or discover how content can be added to the Jekyll site.

Each post is saved in the _posts folder. Every post is saved in a file with a similar naming convention of YYYY-MM-DD-title.md (or .html for HTML files). For example, if you want to create a post called "My First Post", create a 2023-03-08-my-first-post.md in the _posts directory.

For each post/content file, make sure you include front matter about the post on the top. This will include the layout and title, the description, the date and any other specifics.

---
layout: title of post: "How to Read Books: Tips and Strategies for Maximizing Learning"
title: "Reading books is one of the most effective ways to absorb new information, gain new perspectives, and broaden your knowledge." date: 2023-03-02 23:45:13 -0400
 background: '/assets/images/blog/books.jpeg'
 ---

Then you can add your content below in the block that is front of your page using HTML tags or markdown syntax.

Save the file, and Jekyll will create it and integrate it into your website.

How To Deploy Your Jekyll Site on

Prerequisites: Setting Up Your Jekyll Site

Examine your Gemfile.lock file and ensure that it contains the platform that works for all devices. For a check to ensure that all platforms are correctly configured you can run the following command:

bundle lock --add platform arm64-darwin-22 x64-mingw-ucrt-x86_64-linux

After that, you'll be able in creating a Procfile -- this document specifies which commands will be executed whenever your website launches. This file automatically updates the commands to be executed on the Process tab of My. This is the command to be added to your Procfile

web: bundle exec jekyll build and ruby run -e httpd _site

Make Your Jekyll Site to GitHub

For this article, let's utilize Git commands to publish your programs to GitHub. The first step is to create an account at GitHub and this will grant access to the URL of the repository.

It is now possible to create your local Git repository through your terminal. Start by selecting the directory which is home to your project, and using the following command:

the git process

Now add your code to your local Git repository by using the following command:

Add to git

You can now save your changes by executing this command

git commit with a -m "my initial commit"

Note: You can replace "my first commit" with a concise message describing your changes.

Then, you can push your code to GitHub using the following instructions:

Gi remote Add origin URL [repository URL]
Gi push -u source master

Note: Ensure you replace "[repository URL"[repository URL]" with your own GitHub repository URL.

When you've finished the steps above, your code will be uploaded onto GitHub. It will then be accessible via the URL of your repository. Now you can deploy it to !

Implementing Your Jekyll Site To

Then follow these steps to deploy your Jekyll website:

1. Click Applications on the left sidebar
2. Simply click "Add service"
3. Click the Application from the drop-down

A pop-up window will be displayed in which you have the option of selecting the repository that you want to make available. Select a branch you wish to put in place if you've got several branches within your repository.

Your application will start deploying. Within a few hours, a link will be sent to allow access to the version that has been deployed of your web site. In this case, it is: https://myblog-84b54..app/

Summary

As of now, you've discovered how Jekyll works and the various customizations that you can do with Jekyll. It's now safe to agree that Jekyll is a fantastic tool for creating static websites thanks to its simple in its design, versatility, and power features.

Jekyll's intuitive templating system, liquid templates, and built-in support for markdown and other markup languages make it easy to design and manage content-rich sites quickly.

What is your thought on Jekyll? Did you use Jekyll to build anything? We invite you to share your work and experiences with us in the section of comments below.

• Simple setup and management on the My dashboard
• Support is available 24/7.
• The best Google Cloud Platform hardware and network driven by Kubernetes for maximum scalability
• Enterprise-level Cloudflare integration for speed and security
• The reach of the global audience is boosted by the possibility of 35 data centers, and more than 275 PoPs across the globe