Jekyll Tutorial: How to create an unidirectional website (r)

Share this on

These days, web-based websites are vital for creating an online presence, advertising your business, and reaching out to potential clients. But, designing a website could be an overwhelming job.

In this piece we will introduce you to one of the most popular SSGs -Jekyll. You will learn about Jekyll Learn the fundamentals of how it works and finally, how to build static sites using it.

This is a live demonstration of the blog which you'll create by using Jekyll.

It is possible to access it on the repository of the project's GitHub repository in case you'd like to have a look.

What exactly does it mean to be Jekyll?

What is it about Jekyll is that is what makes Jekyll distinguish herself from other SSGs:

1. Secure and fast: Jekyll does not deal with any server-side database or scripting, meaning it is not as susceptible to security vulnerabilities or attacks. It creates static HTML files. This makes your website extremely quick and safe.
2. customizable: Jekyll is highly customizable, allowing you to utilize templates and layouts as well as create plugins that can expand functionality.
3. Easy for installation: Jekyll generates static HTML files that are able to be uploaded to a website server or host without the requirement of an automated content management system.
4. Supported by a huge community Jekyll boasts a huge number of both developers and users. That means plenty of support is available should you require assistance or wish to enhance the capabilities of your site.

How Do I Install Jekyll

It is necessary to begin the installation of Ruby on your system before proceeding to installing Jekyll as stated in the Jekyll document.

How to Setup Jekyll on macOS

By by default Ruby arrives preinstalled in macOS But, it's not recommended to use this edition of Ruby to install Jekyll due to its age. For instance for Ventura, Apple's latest operating system 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).

In order to fix this for this issue, you'll need to install Ruby correctly by using a version control program such as Chruby. This is required to set up the Homebrew application 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 installation succeeded Start and quit Terminal Then, check to see if Homebrew is now ready with this command:

the Brew Doctor

If you notice " Your system is in the process of brewing", you can proceed to installing chruby as well as ruby-install with the help of the commands in the following order:

Brew install chruby ruby and install

It is now possible to install the current version, 3.1.3 by using ruby-install. ruby-install software you've recently installed:

ruby-install 3.1.3

It should take around just a few minutes. Once it's finished you'll be able to configure your shell up to run automatically chruby with this 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 stop and then relaunch the terminal. Make sure everything works using this command:

ruby V

It must say it's 3.1.3.

You now have Ruby's most recent version running on your PC. You are now ready to download the most current version of Jekyll and the bundler gem

gem install jekyll bundler

How to Install Jekyll on Windows

For installing Ruby and Jekyll on a Windows system, it's suggested to use RubyInstaller. RubyInstaller. This can be done via downloading and installing the Ruby+Devkit version by visiting the RubyInstaller Downloads as well as selecting the standard options for installation.

The final step of the wizard installation process run the installing the ridk procedure. This allows you to install gems. Read more via the RubyInstaller manual.

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

gem install jekyll bundler

What Can You Do To Ensure That Jekyll was installed correctly

To verify that Jekyll is installed correctly on your system, start your terminal, and then execute this command:

jekyll-v

If you can see the version numbers, this indicates that Jekyll functioning 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 understand the different CLI commands and the settings of a configuration file.

Commands available for Jekyll CLI

Below are a few of the well-known Jekyll CLI commands. You don't need to memorize these commands. Just know that they exist, and you are welcome to revisit to find out the actions each command performs as you observe their use later in this article.

• jekyll build creates a 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] is a brand new Jekyll website within a new directory that has the name of the website.
• Jekyll Doctor: Provides information on any issues with configuration or dependencies that could cause problems.
• Jekyll Clear Removes the site directory. It is the location where website documents are saved.
• Jekyll Help provides the documents for Jekyll.
• Jekyll Service -- Draft serves and creates your Jekyll site, which also includes content that belongs within the drafts directory.

It is also possible to make these commands more flexible by adding alternatives. Take a look at the full list of Jekyll commands and choices in the Jekyll document.

Jekyll Configuration File

The Jekyll settings file is YAML file called _config.yml that contains the settings and choices for your Jekyll website. It can be used to change various aspects of your site, including the title and description of your site, the URL and many other options.

Below are a few of the most popular configurations:

• Title: Your title for your web page.
• Description: An introductory description of your site.
• basisurl Your subdirectory for your site, if found in a subdirectory the domain.
• URL the URL format of your pages and posts.
• includes: A list of directories and files that aren't included in the development of websites.
• includes: A list of directories or files that must be used when creating a web site.
• paginate The number of articles that will be displayed per page, when pagination is employed.
• plugins: A list of Jekyll's HTML0 plugins, which are loaded.
• themes: By default, it is set to minimum. Users can select any different theme by setting the name for it and then implementing additional settings we will learn about later in this article.

Additionally, you can make custom variables within the configuration file. You can use them to build templates for your website'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 alter your Jekyll setting file, you need to open it up in the _config.yml file in the directory that is part of your Jekyll project directory using an editor to edit text, before making modifications.

NOTE: Any changes you modify the configuration file will reflect the next time you generate your website using jekyll build and jekyll serve..

What is the best way to create a Static Website using Jekyll?

If you've now got Jekyll in your system you can now make a Jekyll static website in only a couple of minutes. Start your terminal, and then run this command:

the blog of jekyll's new-joels

You should substitute "joels-blog" with the favorite site's name.

Next, navigate to the web folder. The folder will display an example of a Jekyll site structure that includes directories as well as files including:

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

Let's look at what each directories and files is used for:

• _config.yml: The Jekyll configuration file that contains the site's settings as well as alternatives.
• posts: A directory that includes your website's content (can include 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 for managing the Ruby gems upon which your site is based.
• index.md: The default homepage on your website is produced by Markdown HTML or markdown files.

There are many more options for folders and files you can use to personalize your Jekyll web page. These include:

• is A directory that includes reusable HTML fragments which can be incorporated into designs and pages. For example, navbars, footers, e.t.c.
• templates: An index that includes HTML layout templates, which establish the basic structure of your web pages.
• assets The directory includes any file that is utilized by your website like images or CSS files.
• SASS: The directory contains Sass files that could be utilized to create CSS to your website.

The structure of the files is an excellent foundation for your Jekyll project. You are however able alter it to meet the particular requirements of your particular project.

Quick Start Option: Use Our GitHub Template

If you prefer to start your own business using Jekyll CLI, you can create an Git repository by using this "Hello World" Jekyll templateon GitHub. Select this template and create an account to copy the starter code into an entirely new repository within the boundaries within the confines of the confines of your GitHub account.

How can I Preview an Jekyll website

You now have a Jekyll website however, what do you do when you want to look at the site to check out what it looks like before making it your own to meet the needs of your customers? Open your terminal and then move into your project's directory and then execute this procedure as follows:

Jekyll Serve

The program will make an web site folder, which contains the static files created by your website project. It will also start the Jekyll server, and you can preview your site via http://localhost:4000.

If you go to the URL using your web browser, you will see your Jekyll website with the minimal design.

How to Customize the appearance of a Jekyll Site

When you make a website using Jekyll and make use of themes, it is possible to alter the site in order to satisfy your requirements. Particularly, you may have to design new pages, modify the layout of a webpage and also alter the way objects look. All of these are possible with Jekyll.

How Front Matter Works in Jekyll

As you browse through each blog post or webpage within your folder for projects, you'll see an information block that is composed of the form of three circles (--) on the top on each page. This is called front issue.

It's a type of metadata employed in Jekyll for the storage of information on posts or webpages. The format is either YAML or JSON.

The code >--- descriptionreads "Welcome to Jekyll!" Description: "Introduction to what Jekyll is and how it functions" Time: 023-03-07, 16:54:37 +0100. code> code>

In the case above the front matter includes a number of elements like the title of the blog post, its description and dates. These variables can be used to alter the appearance of a page layout as well as the post's content.

Jekyll analyzes front matter data and utilizes it to generate the HTML which you wish to show on your site. Front matter can be the way of defining various options, such as the layout, permalink as well as publication status and more.

How do you configure the default Front Matter

You may also set up your default front matter to ensure that there is no necessity to design the same front matter for different documents. In this instance, for instance, each blog post will have the same author's name, as well as the same layout. It is possible to define a custom front matter in your _config.yml file to provide all blog posts.

The design of the file is a little complicated, but this is how it should look when it is in. Copy the code above the previous option in the _config.yml file:

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

After you have executed this jekyll command, you'll be able to observe that even if you don't specify the style and name of each blog entry it is possible to access them in your files.

Note: When you don't create a path for your files that is not set, all files will be based on the predefined front matter's values.

Creation of pages within Jekyll

When you make a new file within the root directory of the project, you are deemed to be a page. The name you give to the file will be used in the URL. So, it is essential to name each page with a name that's 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. Its extension decides which markup language that will be used for the text of the webpage (HTML in addition to Markdown).

After you've completed documents, be sure that you include the appropriate front matter and contents. Save the file and then refresh your Jekyll page in the browser. The refreshed page will be available via the URL which is the same as the filename.

Designing Layouts Using Jekyll

Layouts can be used to describe the layout and the structure of your site's pages as well as blog posts. This is usually done with HTML code. There is the option of including a header, footer, meta data within the meta data of your site.

First step is to create an layouts folder within your directories directory of your project. You should then create a new document for each layout. The file should have an appropriate name appropriate to the function for the design. For instance, you could create a file called page.html to define the layouts that will be used on each page on your website.

It is recommended to define the overall structure of your layouts by using HTML or another markup language.

There are placeholders that can be used for any type of dynamic data that is included within the layout like the page's title, content, and metadata. In this case, for example, you can make a basic layout which includes the header, footer and content areas like:

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

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

The includes directory may include types of files, such as HTML, Markdown, or Liquid files. You must ensure that your code isn't duplicated (Don't repetitious) so that it is possible for you to reuse your code on multiple sites.

Looping through Posts within Jekyll

You might want to create your own blog website that will contain blog posts in one place. This means that you'll need to pull all of the posts on your website and cycle through them. In Jekyll it's simple to accomplish with the % for % tag.

Each post published on a Jekyll website is saved within the site.posts variable. You can loop through posts with the post.title titlepost.title|title|post.title} Liquid variable to display the title of the post in this manner:

 For post on site.posts % post.title % the post.titlepost.title * Endfor|* Endfor|endfor}* Endfor

Additionally, you can utilize Liquid variables to produce further information on each blog post, like the post's date and author

 Posts within site.posts % post.title  *|} Post published on onpost.date "%B %-d " by post.author }|"%B %-d, %Y "|"%} finish for  the year. %

Note that in the sample below, the date Liquid filter format each post's date into an easier-to-read format for humans.

You've now got an idea of the basic design options that you can use for the appearance of your Jekyll website. There is no need to use all the features to create an initial Jekyll site completely from scratch, as you can search for themes that meet the needs of your website and then add it to your Jekyll site.

What is the best way to add a theme to Jekyll Sites? Jekyll website

There are numerous themes that you could add and the great thing is that for each one that you can find specific instructions for how to install them. You can find this information within the ReadMe file available on GitHub. You can duplicate the theme or if it is one that is gem-based theme the process is simpler.

To go through this article, you would install an appropriate blog theme and then modify it to have the appearance of the blog site deployed to. This is a Gen-based theme and it is possible to access the sources of codes as well as instructions via GitHub.

In order to install a theme built on a gemstone, simply open your website's Gemfile and add the gem which matches the theme you'd like to use. The theme we will use is the jekyll-theme-clean-blog. The default theme can be replaced by the minimalista theme from the Gemfile:

gem "jekyll-theme-clean-blog"

Use to use the bundle installation command within your website's directory in order to download the gem of your theme and the dependents.

If your website's _config.yml file, it is recommended to add the following line to define the themes you'd like 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 directory _layouts directory in order to avoid them overriding the layout of your theme.

You can then locate the layout name of the file within the manual 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 build and manage your website with the new theme.

That's it! It's done! Jekyll site should now be running the most recent gem-based theme that you have installed. It's possible to modify the theme even more by changing the design of your site's layouts directories.

Customize a Jekyll Theme

Now that you have the themes on your website, the next step will be to personalize your site to meet your requirements and function as the intended way. In this case, for instance, pictures in the pages or posts are not displayed rather they are displayed on a gray background.

You can fix this issue by adding a front matter feature to each page and post by indicating the location of images you would like to utilize. It is a fact that Jekyll assets, like photos are stored in the asset folder. Within this folder, you may choose to make sub-folders in order for organizing your images.

You can now incorporate a background choice in the block in front of you and the link to its image. In this case, for example in the About page, this is the front matter block.

Page layout: The codes >--- layout of the page Title: Description of the page: This is the page's title. permalink: /about/ background: '/assets/images/about-page.jpeg' ---

The same applies to each page, and posts your site will look like this:

Another thing you can customize is adjust the navbar options. In this case, for instance, you might not require an email form and you can eliminate its hyperlink in the navigation bar's choices. You can do this by looking over the theme's code source by observing the source code responsible for the navigation buttons, and replicating the file precisely within your project and removing any option that you do not need.

The links for navigation are found within the directory'includes' navbar.html files. It is possible to create the file using the code you copy from your source code. You can then delete the contact option, or include any other option you prefer.

Once you have saved your project you'll see that the navigation options will be customized according to your preference:

One last modification is to create the post page which will contain all blog entries that is, you'll be able loop through the entire blog posts that are on the page.

Make a post.html file posts.html and paste the following code in it:

A code >--- layout: page title Description of our blog. Learn more about the blog and keep up-to-date with interesting blog content. 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 to reflect your saved image. In the code above, you are looping through the entire post to display all articles in this post. This is what the blog page will look when it is saved.

How can I add Content to the Jekyll Website?

It is now time to create an Jekyll website and configure your site according to the demands of. It is the final step adding content, or discover how content can be integrated into the Jekyll website.

Each post is stored in the folder _posts. Every post is saved in an identical file using the 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, ensure that you provide the headline of the post on the top. The layout and title, along with the description, the date and any other specifics.

--- layout title of the post: "How to Read Books Tips and Strategies for Enhancing Learning" title: "Reading books is one of the best methods to take in the latest information, discover new perspectives, and broaden the scope of your education." date: 2023-03-02 23:45:13 -0400 background: '/assets/images/blog/books.jpeg' ---

Then you can add your information below the block at the at the front of your webpage making use of HTML tag or Markdown syntax.

Save the file, and Jekyll creates it, and incorporate it on your site.

How Do You Install Your Jekyll Website on

Prerequisites: Setting Up Your Jekyll Site

Examine your Gemfile.lock file and make sure it has the platform that can be used by all devices. For a check to ensure that every platform is correctly configured you can run this command:

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

Once you've done that, you'll be able in the creation of an Procfile -- this document specifies which commands will be run each time the website is launched. This file is automatically updated with the commands that will be performed on the Process tab in My. This is the command you want to be added to your Procfile.

internet: package exec jekyll build and ruby run -e httpd site

Start your Jekyll website available to GitHub

For this article, let's make use of Git commands to publish our programs on GitHub. The first step is to sign up for an account on GitHub and then grant an access right to the address of the repository.

Now you can create your local Git repository with your terminal. Begin by choosing the directory which is the location of your project then using the following command:

the git process

Then, add the code to the local Git repository using the following command:

Add to Git

Now you can save the changes you made by running this command

commit to git with"-m "my first commit"

Note: You can replace "my first commit" with a brief note describing your modifications.

You can then upload your code to GitHub by following the steps:

Gi remote Add the origin URL and repository URL Gi push -u source master

Note: Ensure you replace "[repository URL"[repository URL[repository URL]" by your personal GitHub Repository URL.

Once you've completed all of the above steps, your code will be uploaded onto GitHub. The code will be available via the URL of your repository. You can now deploy it to !

Implementing Your Jekyll Site

Follow these steps to deploy your Jekyll site:

1. Simply click Applications to the left of the sidebar
2. Click "Add service"
3. Simply click the App from the drop-down

An open window will open in which you have the option of selecting the repository you want to make available. Choose a branch that you would like to put in place if you've got several branches inside your repository.

Your app will be deploying. Within a few hours, a link will be sent out to enable users to access the version that was deployed to your web site. In this case, it is: https://myblog-84b54..app/

Summary

As of now, you've learned how Jekyll functions and all the different options for customizations you can make by using Jekyll. We can now say that Jekyll is a great tool for creating static websites due to its simplicity layout, flexibility and powerful attributes.

Jekyll's intuitive templating system with liquid templates, as well as built-in support for markdown and other markup languages make it simple to create and maintain content-rich websites quickly.

What are your thoughts on Jekyll? Have you used Jekyll for building anything? We invite you to share your experiences and work with us by commenting in the comments section below.

• Simple setup and management on My dashboard My dashboard
• Support is available 24/7.
• The top Google Cloud Platform hardware and network driven by Kubernetes for the highest scalability
• Enterprise-level Cloudflare integration that speeds up speed as well as security
• The reach of the global viewers is enhanced by the possibility of 35 data centers, as well as more than 275 POPs all over the world

Article was first seen on here