Skip to content
  • About Us
  • Contact Us
  • Privacy Policy
  • Disclaimer
  • Corona Virus Stats (Covid-19)
  • Work with us
  • FB
  • LinkedIn
  • Twitter
  • Instagram.com
Tekraze

Tekraze

Dive Into Technology

  • Guides
    • Developer Guide
    • PC Guide
    • Web Guide
    • Android Guide
    • Music
    • Tutorials
  • Feed
    • Tech News
    • Shared Tech
    • Gaming Videos
    • Unboxing videos
  • Forums
    • Android Apps
    • Angular Npm Packages
    • Useful Site Links
    • Tech Queries
    • Windows OS Help
    • Web Guide and Help
    • Android Os And Rooting
    • Jhipster Discussion
    • Git & GitHub forum
    • Open Source Forum
  • Work with us
  • Toggle search form
Jekyll - A Beginners Guide to static website 2

Jekyll – A Beginners Guide to static website

Posted on November 23, 2018June 21, 2019 By Bhavesh Gupta 2 Comments on Jekyll – A Beginners Guide to static website

When it comes to web development all the beginner geeks relate it to the HTML, CSS, JavaScript for the static web pages. As far as static pages are concerned, that time was no more when you need to manually create HTML code and design and develop static web pages with the help of HTML, CSS, JavasScript. 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 pages development, Modern developers use Static generators (No I am not talking about that electrical generator, Joke apart), to develop, and deploy the modern static Application. There are lots of generators there in the market like Hugo, 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 Read | WordPress – Build Personal Blog site in minutes

Table of Contents

  • What is Jekyll?
  • Why Jekyll?
  • Where to get it?
  • How to start it?
  • How Jekyll works?
  • What is config.yml  and how to edit Jekyll?
  • Where is Jekyll being used presently?
  • Get Jekyll themes and plugins
  • What are some Jekyll like stuff, like any other options?

What is Jekyll?

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.”jekyll-image

Let’s break that definition into beginner friendly pieces.

  • Static Site Generator: By static site, one means, a website that has same content to offer to every visitor. For example, all-most all blogs and resume/portfolio websites are static in nature. While a website like Youtube or Linkedin changes their content every millisecond for each of their visitors differently.
    Point to be noted is, if some content has to be changed in the static site it is possible but it will be for everyone, not personalized.
  • Blog-aware: It stands for functionalities and requirements of a blog. Like a group of paragraphs to be called as a Blog post, it must be in proper format, has author name, date published on, proper topic highlighting, syntax highlighting etc.
  • Ruby: Guys, I had never written a single line of code in Ruby (it is a programming language), Jekyll is written in ruby but to use Jekyll, one doesn’t need to know ruby. I will show this to you later in the post.
  • Github: It is a code sharing and collaboration platform but again it is not necessary for Jekyll.
| Also Read | A Roadway to learn web designing

Why Jekyll?

I strongly want to answer this question every time I start something new.

  • It is free.
  • It is secure and light-weight
  • If you don’t know how to program, you don’t want to learn it for now but want to have own website with some content to showcase your skills.
  • It is completely editable by users and poses zero restrictions on design.
  • It uses Markdown (see it later in the post), which is beginners friendly.
  • Unlimited features and future scopes.
  • You want to write and want it on the web.(something like a blog)
  • You don’t need a lot of styles and those first time has seen formatting options, on already set up and famous blogging websites.

Then Jekyll is the right choice for you.

| Also Read | Front End Technologies 2018

Where to get it?

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 below steps we will install Jekyll as a gem of Ruby in our installation, then use Jekyll only for our static site.

How to start it?

Open Terminal and write,

gem install jekyll bundler
jekyll new (Name of project, without spaces and brackets)

Your directory structure now might look like this

Jekyll - A Beginners Guide to static website 3
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 terminal (http://localhost:4000) and paste it in your web browser. This is the default site that comes up with Jekyll.

How Jekyll works?

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 rest of the formatting and styles on 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

What is config.yml  and how to edit Jekyll?

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 that are 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 Project title, your contact information that includes 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 of free theme available online, that can be used by just installing and using its name in the config.yml file.  Every theme comes with a number of layouts that can be used for styling different purpose pages in 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.

| Also Read | Top Programming languages in the world companies are hiring for

Where is Jekyll being used presently?

I would love to list them all here but they are just too much, some of them are:

  • Netflix Devices https://devices.netflix.com/en/ 
  • Bitcoin https://bitcoin.org/en/
  • UN World Statistics https://worldstatisticsday.org/
  • Spotify for Developers https://developer.spotify.com/
  • Digital Democracy http://www.digital-democracy.org/
  • The Markdown Guide https://www.markdownguide.org/
  • Check here for the rest https://jekyllrb.com/showcase/

Get Jekyll themes and plugins

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

| Also Read | Markup editor – New Editor in Town

What are some Jekyll like stuff, like any other options?

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.

Content Protection by DMCA.com
Tutorials, Developer Guide, Web Guide Tags:Gem, Jekyll, Ruby, static web pages, static website

Post navigation

Previous Post: Choose a right blog topic to drive a ton of traffic to your blog
Next Post: How to Keep Your Mac Safe from Hackers

Related Posts

  • 10 BUSINESS-CRITICAL DIGITAL MARKETING TRENDS FOR 2019
    10 BUSINESS-CRITICAL DIGITAL MARKETING TRENDS FOR 2019 Guest posts
  • Google Map JSON Parser 5
    Google Map JSON Parser Developer Guide
  • 4 Ways Performance Testing Can Streamline Digital Transformation tekraze
    4 Ways Performance Testing Can Streamline Digital Transformation Guest posts
  • What does it really owes to be a better Python Developer 6
    What does it really owes to be a better Python Developer Developer Guide
  • How to grow Your E-commerce Business Using YouTube? Tekraze
    How to grow Your E-commerce Business Using YouTube? Web Guide
  • How you can discover essential corporate life skills via an escape game
    How you can discover essential, real, and corporate life skills via an escape game Tutorials

Comments (2) on “Jekyll – A Beginners Guide to static website”

  1. Debroah Pince says:
    April 28, 2020 at 12:35 pm

    Saved as a favorite!, I like your web site!

    Reply
    1. Balvinder Singh says:
      April 28, 2020 at 4:35 pm

      Thanks

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Advertisements

Subscribe to updates

Enter your email below to subscribe





Posts by Categories

Advertisements
  • Windows 10 New Features 7
    Windows 10 New Features PC Guide
  • Types of Programming - Difference you need to know 8
    Types of Programming – Difference you need to know Developer Guide
  • Using apt tool infographics Linux basic tool series part 1 Banner
    Using apt tool infographics Linux basic tool series part 1 Developer Guide
  • A New Book in the Hood Javascript Grammar by JS Tut Banner
    A New Book in the Hood Javascript Grammar by JS Tut Developer Guide
  • Common Docker Commands you must know Tekraze
    Common Docker Commands you must know Developer Guide
  • Backend Vs Front End - difference you need to Know 9
    Backend Vs Front End – difference you need to Know Developer Guide
  • Linux Terminology basics you need to know
    Git Terminologies Post 3 Developer Guide
  • Top 10 Emerging Technologies in Computer Science You Must Know
    Top 10 Emerging Technologies in Computer Science You Must Know Tech News

Affliate Links

Sell with Payhip

Earn with Magenet

Sell and Buy with Adsy

GainRock affiliate Program

Automatic Backlinks

Advertise with Anonymous Ads

accessily tekraze verificationIndian Blog Directory

Copyright © 2023 Tekraze.

Powered by PressBook News WordPress theme