Jekyll⨯Github - Static site generation tutorial

Page1.md

Jekyll⨯Github

<PREV|NEXT>

What the static site generator?

A static site is a collection of pages containing just basic HTML, CSS and JS files.

A static site generator generates a static site from other (usually easier to work with) files.

Example

RESULT

<PREV|NEXT>

---

Join Developer Student Club - Rutgers Camden on Discord:

Page2.md

Jekyll⨯Github

<PREV|NEXT>

What the jekyll?

Jekyll is a static site generator that uses markdown, html, css, and js in conjunction with Liquid, a mini-language to make it easier to make websites.

What the GitHub?

<PREV|NEXT>

Page3.md

Jekyll⨯Github

<PREV|NEXT>

Getting Started

Install ruby

Windows, Linux, or Mac:

# Linux
sudo apt install ruby-full

# Mac
brew install ruby

# Check installation with:
ruby -v

Install jekyll

gem install jekyll bundler

Set up jekyll wesite

mkdir mywebsite
cd mywebsite
jekyll new . --skip-bundle

<PREV|NEXT>

Page4.md

Jekyll⨯Github

<PREV|NEXT>

Getting Started

Setup repository

1. Initialize a git repository

git init

2. Create a .gitignore file with the following contents:

_site
.sass-cache
.jekyll-cache
.jekyll-metadata
vendor

Gemfile.lock

3. Make a commit and push to GitHub

git add .
git commit -m "Initial commit"

# Tell git about the repository on GitHub
git remote add origin <remote_url>
# Push changes to GitHub
git push origin master

<PREV|NEXT>

Page5.md

Jekyll⨯Github

<PREV|NEXT>

Configuring jekyll

Your Gemfile should look something like the following:

source "https://rubygems.org"
# Minima is the default theme for new Jekyll sites. You may change this to anything you like.
gem "minima", "~> 2.0"
# If you have any plugins, put them here!
gem "github-pages", group: :jekyll_plugins

group :jekyll_plugins do
  gem "jekyll-feed", "~> 0.12"
end

# Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem
# and associated library.
install_if -> { RUBY_PLATFORM =~ %r!mingw|mswin|java! } do
  gem "tzinfo", "~> 1.2"
  gem "tzinfo-data"
end

# Performance-booster for watching directories on Windows
gem "wdm", "~> 0.1.1", :install_if => Gem.win_platform?

Your config.yml file should look something like the following

title: Your awesome title
email: your-email@example.com
description: >- # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
baseurl: "/<reponame>" # the subpath of your site, e.g. /blog
url: "https://<username>.github.io/" # the base hostname & protocol for your site, e.g. http://example.com
twitter_username: jekyllrb
github_username:  <username>

# Build settings
theme: minima
plugins:
  - jekyll-feed

After making changes to _config.yml and Gemfile to select theme and plugins you can now install the website and then start jekyll.

You can do this by:

bundle install
jekyll serve -i

<PREV|NEXT>

Page6.md

Jekyll⨯Github

<PREV|NEXT>

Figuring jekyll

.
├── 404.html        <-- 404 Not-Found page
├── about.markdown  <-- About page
├── _config.yml     <-- jekyll configuration
├── Gemfile         <-- Project dependency
├── Gemfile.lock
├── index.markdown  <-- Index/homepage
└── _posts          <-- built-in dir for other pages
    └── 2019-09-09-welcome-to-jekyll.markdown
└── _site           <-- Generated site
    ├── ...
    └── ...

<PREV|NEXT>

Page7.md

Jekyll⨯Github

<PREV|NEXT>

Making a post

Create a new file in the _posts directory name it in the following fashion: YYYY-MM-DD-title.md, ideally without any spaces in the title. for example:

2020-02-25-dsc_workshop.md

Open the file to edit and add the following the the file:

---
layout: post
title:  "DSC workshop"
date:   2020-02-25 11:30:00 -0500
categories: update
---

# Jekyll⨯Github

Today we are learing to makea website using Jekyll and hosting it on github.

**This** markdown file causes Jekyll to automatically generate a well formatted `HTML`.

You can learn more about using markdown 
[here](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet).

<PREV|NEXT>

Page8.md

Jekyll⨯Github

<PREV|NEXT>

Customising your site layout

Firs we want to find where the layouts for our theme are stored so run:

# minima is our theme as set in Gemfile and _config.yml
bundle info minima

Go to the folder where minima is installed and copy the _layouts folder to your website's folder.

./layout
.
├── default.html
├── home.html
├── page.html
└── post.html

Say we want to feature the latest article on the home page. We can do so by modifying the home layout.

{%- if site.posts.size > 0 -%}
	<!-- Featured post aka. latest -->
	{% assign featured = site.posts.first %}
	<h2 class="featured-heading">Latest: {{ featured.title }}</h2>
	<hr>
	{{ featured.content }}
{%- endif -%}

(Theming)

<PREV|NEXT>