When it comes to web development all the beginner geeks relate it to HTML, CSS, JavaScript for the static web pages. As far as static pages are concerned, that time was no more when you needed to manually create HTML code and design and develop static web pages with the help of HTML, CSS, and JavaScript. If you need dynamically or need to interact with the database through your web then you need some sort of backend support language PHP, Python, or Ruby.
For now, I will just focus on Static web page development, Modern developers use Static generators (No I am not talking about that electrical generator, Joke apart), to develop, and deploy modern static Applications. There are lots of generators in the market like Hugo and Next. If you want to look at some of them you can visit Static Generators.
In this post, I will be answering some FAQs about Jekyll.
Also check, WordPress Build Personal Blog Site in Minutes
The wiki says: “Jekyll is a simple, blog-aware, static site generator for personal, project, or organization sites. Written in Ruby by Tom Preston-Werner, GitHub’s co-founder, it is distributed under an open source license.”
Let’s break that definition into beginner-friendly pieces.
Also check Roadway to Learn Website Design and web development
I strongly want to answer this question every time I start something new.
Then Jekyll is the right choice for you.
Get it installed on your machine and set up the project directories from the official installation guide
I hope you have installed correctly, and now you are ready to go. See from this installation, you will be getting Ruby running on your machine.
Then from the below steps, we will install Jekyll as a gem of Ruby in our installation, then use Jekyll only for our static site.
Open Terminal and write the following commands,
gem install jekyll bundler
jekyll new (Name of project, without spaces and brackets)
Your directory structure now might look like this
Congrats, you have successfully set up your first static site. Now test it and see how it looks.
Write in the terminal, first navigating to the same directory as of project:
jekyll build
jeykll serve
It will set up a development web server on your localhost, copy the URL shown in the terminal (http://localhost:4000) and paste it on your web browser. This is the default site that comes up with Jekyll.
It is based on Gems (another tech word, don’t worry, I will explain it too), in fact, it is a Gem itself.
Gem: It allows you to package up functionality and share it across other projects or with other people. Take this as a library or module or a header file if you know a bit of programming. In short, it is a Package Manager.
Easiest definition: Jekyll is something that turns your text files written in a specified format, into a cool looking webpage with proper linking and structured content with a unified style over every page.
It takes your Markdown/Yaml written content and with the help of its templating engine, Liquid, converts them to .html files with predefined layouts written in config.yml.
It only requires you to focus on content and rely upon the rest of the formatting and styles on the templating engine.
The Liquid, Markdown, and YAML deserve and require a separate post to describe them all. But for this time you could have a look at it: What is Liquid? , What is Markdown? , What is YAML?
Also Read Pro Developer – I Hope you might know these things
Notice the directory structure properly, there is a file named,<em>config.yml</em>
the gist of all of this project lies around it. It is very important to know what it does. See, when you set up a new project, some folders get created, namely:
_posts
_layouts
_site and some others too.
Read about the Directory Structure
config.yml– this file contains all the dependencies required for a particular project, that is global variables, theme-used, gem required etc. Make sure to restart the server if you made any changes in the config.yml file, to occur.
Global variables– by this I meant something that remains constant all over the website, like the Project title, Contact information including email, phone, and social usernames.
Theme-used– A theme is just pre-written CSS and formatting that one can use. Minima is the default theme that comes with Jekyll, but there are more than 100 free themes available online, that can be used by just installing and using its name in the config.yml file. Every theme comes with multiple layouts that can be used for styling different purpose pages on the same site. For example, the minima theme comes with post, page, and home layouts. Just use post layout for post purposes and home for the homepage, no need to write dedicated CSS.
I would love to list them all here but they are just too much, some of them are:
Well Jekyll themes are so popular that a single Google Search will land you up to right places like http://jekyllthemes.org/ and https://jekyllthemes.io/
Plugins: these add special functionality to your sites like SEO optimization and Google AdWords integration, Check this for more https://github.com/planetjekyll/awesome-jekyll-plugins
Sure in today’s world you are not bound to use one thing only. In fact, every language has some static site generating engines to be used like,
Python: Pelican, Nikola, Tinker
Javascript: 11ty, Hexo
Ruby: another one is Octopress.
and many more.
Github-pages integrate best with Jekyll themes and support them. This made Jekyll first choice when hosting your blog site over gh-pages.
If you are convinced enough to use Jekyll and want to continue with it comment down your email address and I will send you some online resources to go forward with it.
This post was last modified on March 7, 2024 9:35 pm
Struggling with a locked Samsung Galaxy or Note smartphone? Remove KG Lock, a U.S.-based company,…
When you open Adobe Photoshop for the first time, it's easy to click around in…
Social Media Influencer apps for mobile With the increasing number of social media platforms and…
Microsoft Dynamics 365 is a suite of Business Applications from Microsoft that covers the traditional…
While torrents and peer-to-peer (P2P) file sharing have long been popular for data transfer, concerns…
In today's increasingly interconnected world, reliable communication is paramount. But what happens when emergencies strike…
This website uses cookies.
View Comments
Saved as a favorite!, I like your web site!
Thanks