Jekyll

Setup

  • Install ruby and gem

      sudo apt install ruby gem

  • install jekyll and bundler for to create site

      gem install jekyll bundler

  • create new site

      jekyll new {website_name}

  • run site locally

      bundle exec jekyll serve {--livereload}

  • if webrick error add

      gem "webrick"

    to the Gemfile and run

      bundle install

_posts

contains all the blog posts written in md.

_site

folder structure to host site independently(on a server)

_drafts

contains drafts of blog posts

jekyll serve --draft

Doesn’t have to name a draft in a special convention with date. will be assigned the last edited.

Blog post

---
layout: post
title:  "HELLO to Jekyll!"
date:   2022-06-27 18:41:19 +0530
categories: jekyll delete
author: "Akilax0"

---

You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.

Jekyll requires blog post files to be named according to the following format:

`YEAR-MONTH-DAY-title.MARKUP`

Where `YEAR` is a four-digit number, `MONTH` and `DAY` are both two-digit numbers, and `MARKUP` is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:


<figure class="highlight"><pre><code class="language-ruby" data-lang="ruby"><span class="k">def</span> <span class="nf">print_hi</span><span class="p">(</span><span class="nb">name</span><span class="p">)</span>
  <span class="nb">puts</span> <span class="s2">"Hi, </span><span class="si">#{</span><span class="nb">name</span><span class="si">}</span><span class="s2">"</span>
<span class="k">end</span>
<span class="n">print_hi</span><span class="p">(</span><span class="s1">'Tom'</span><span class="p">)</span>
<span class="c1">#=&gt; prints 'Hi, Tom' to STDOUT.</span></code></pre></figure>


Check out the [Jekyll docs][jekyll-docs] for more info on how to get the most out of Jekyll. File all bugs/feature requests at [Jekyll’s GitHub repo][jekyll-gh]. If you have questions, you can ask them on [Jekyll Talk][jekyll-talk].

[jekyll-docs]: https://jekyllrb.com/docs/home
[jekyll-gh]:   https://github.com/jekyll/jekyll
[jekyll-talk]: https://talk.jekyllrb.com/\

The first lines contains the parameters for the post which will be used by the page generator. The pages are named in given format so they can be built with given permalink and design.

Creating Page

Pages on website not a blog.

Ex : about.md

created at root or at given dir. Same as conventional sites.

Can see the folder structure at _site

categories depend on front matter. can define a permalink to regardless.

permalink: "/new-url/test"

uses this instead of date. Can also use variables from the front matter.

permalink: "/:categories/:year/:month/:day/:title"

recommend to use for each page.

Default Front matter

The default yaml even without typing them in individually.

Edit the _config.yml file with

#Defaults 
defaults:
  - 
    scope:
      path: ""
      type: "posts"
    values: 
        #values
        layout: "post"

Here we define a scope for the defaults.

path : defines which files under path defined would get effected. based on the site structue.

type : based on the type defined in the front matter.

values : defines the attributes to be added.

→ Restart server after editting _config.yaml

Themes

Install themes from

https://rubygems.org/

add theme to Gemfille and run

bundle install

Change the theme in _config.yaml

→ might want to edit the layouts to according to the _layouts available in the theme

Layouts

can define layouts under the directory

_layouts

this will override or create new layouts to be used by the pages.

---
layout: "page"
--- 

<h1>This is a post</h1>
<hr>

This will put the .md content to the page. Also note that using the layout: page becomes a higher level layout for this layout.

Variables

can be used in the html layout pages

//page level
Akilax0

//layout level


//site level defined in the config.yaml
Akilax0's Blog

For adding a title on site

<html>
<head>
    <meta charset="UTF-8">
    <title>Akilax0's Blog</title>
</head>
<body>
    
</body>
</html>

https://jekyllrb.com/docs/variables/

Includes

Includes to be used on sites. Create a folder at root as _includes.

For example if defining a header to be included in the layouts create a file as header.html

<h1 style="color: ">Akilax0's Blog</h1>
<hr><br>

Then we can access them in the layouts as

<body>
    <header class="site-header">

  <center><h1><a href="/">Akilax0's Blog</a></h1></center>

  <center><i><h3>Greetings and all the works</h3></i></center>

  <center>
  <p>
  |  
  <a href="/projects">Projects</a>
  |
  <a href="/notes">Notes</a>
  |
  <a href="/articles">Articles</a>
  |
  <a href="/books">Books</a>
  |
  <a href="/about">About</a>
  |
  </p>
  </center>

</header>
  
    
</body>

Here the variable color is passed back to the header file.

Looping through posts

Lets say want to loop through posts and display on a home.html


    <li><a href="/projects/2022/08/26/Autonomous-Landmine-Detector-copy.html">Autonomous Landmine Detector</a></li>

    <li><a href="/projects/2022/08/26/Vehicle-Number-Plate-Analyzer.html">Vehicle Number Plate Analyzer</a></li>

    <li><a href="/projects/2022/08/26/Compiler-for-Cool-Language.html">Compiler for Cool Language</a></li>

    <li><a href="/projects/2022/08/26/Analysis-Tool-for-Industrial-Images.html">Analysis Tool for Industrial Images</a></li>

    <li><a href="/projects/2022/08/26/Multi-Processor-System-on-Cip(MPSoC).html">Multi-Processor System-on-Chip (MPSoC)</a></li>

    <li><a href="/projects/2022/08/26/CRC-using-custom-NiosII-processor-copy.html">CRC using custom NiosII processor</a></li>

    <li><a href="/projects/2022/08/26/8-bit-processor.html">8 bit Processor</a></li>

    <li><a href="/projects/2022/08/26/Fractal-Generator.html">Fractal Generator</a></li>

    <li><a href="/projects/2022/08/26/Image-Processing-techniques-to-detect-damaged-fruit.html">Image Processing techniques to detect damaged fruit</a></li>

    <li><a href="/projects/2022/08/26/Hospital-Management-System.html">Hospital Management System</a></li>

    <li><a href="/programming/2022/08/20/Time-Complexity.html">Time Complexity</a></li>

    <li><a href="/programming/2022/08/20/Sorting.html">Sorting</a></li>

    <li><a href="/programming/2022/08/20/Searching.html">Searching</a></li>

    <li><a href="/programming/2022/08/20/Graph-Theory.html">Graph Theory</a></li>

    <li><a href="/programming/2022/08/20/Dynamic-Programming.html">Dynamic Programming</a></li>

    <li><a href="/programming/2022/08/20/Data-Structures.html">Data Structures</a></li>

    <li><a href="/notes/2022/08/20/Programming.html">Programming</a></li>

    <li><a href="/notes/2022/08/20/Arch.html">Arch Install</a></li>

    <li><a href="/os/2022/08/20/OS.html">Operating Systems</a></li>

    <li><a href="/notes/2022/06/27/docker.html">Docker</a></li>

    <li><a href="/notes/2022/06/27/c-notes.html">C Notes</a></li>

    <li><a href="/notes/2022/06/27/welcome-to-jekyll.html">Jekyll Setup</a></li>

loops through the posts and lists the links of each post. Also can be done for other categories/layouts as well.

Conditionals

Checking for conditions in each page.

Color the current post red

Data Files

Can create in

  • YAML
  • JSON
  • CSV

These files are stored under _data folder.

Can be accessed as

You’ll find this post in your _posts directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run jekyll serve, which launches a web server and auto-regenerates your site when a file is updated.

Jekyll requires blog post files to be named according to the following format:

YEAR-MONTH-DAY-title.MARKUP

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers, and MARKUP is the file extension representing the format used in the file. After that, include the necessary front matter. Take a look at the source for this post to get an idea about how it works.

Jekyll also offers powerful support for code snippets:

def print_hi(name)
  puts "Hi, #{name}"
end
print_hi('Tom')
#=> prints 'Hi, Tom' to STDOUT.

Check out the Jekyll docs for more info on how to get the most out of Jekyll. File all bugs/feature requests at Jekyll’s GitHub repo. If you have questions, you can ask them on Jekyll Talk.