jekyll-skeleton

Jekyll scaffolding to start new websites. https://marcanuy.github.io/jekyll-skeleton/

Table of Contents

jekyll-skeleton
Overview
Features
Design Philosophy
Commands
- Install
- Serve
Usage
- Adding a new language
- Adding posts
Plugins
Final structure
Questions
Screenshots

Overview

This is a basic Jekyll site created with jekyll new --blank (without themes, or example posts) to serve as a starting point for any website.

Its purpose is to quickly start new websites cloning this repo and customizing to your needs, having already all the features I was adding and configuring every time I created a new Jekyll instance.

Live demo looks so "minimalistic" because it does not use any theme and its only goal is to show the design of the website navigation and how to add posts/categories.

Its structure uses the design described in How To Add Bootstrap 4 To Jekyll The Right Way, Multilingual Jekyll Without Plugins and How To Implement Breadcrumbs On A Jekyll Site With Nested Categories articles applied on a blank Jekyll instance with the suggestions provided by the plugins below.

Just clone this repo and start building yours.

git clone [email protected]:marcanuy/jekyll-skeleton.git

Features

Automatically generates at each jekyll build:
- http://sitemaps.org compliant sitemap at /sitemap.xml
- Atom feed at
  /feed.xml.
SASS and easy customization of Bootstrap 4 variables in /assets/main.scss and /_sass/_variables.scss.

Automatically adds metadata tags for Search Engines and Social Networks

Page title, with site title or description appended
```
<head>
   <title>...</title>
</head>
```

Page description

<head>
	<meta name="description" content="..."/>
</head>

Canonical URL
```
<link rel="canonical" href="..."/>
```
Next and previous URLs on paginated pages

JSON-LD Site and post metadata for richer indexing

<meta property="fb:app_id" content="1822851531277021"/>
<script type="application/ld+json">
{"@context": "http://schema.org",
"@type": "WebPage",
"headline": "...",
"description": "...",
"url": "..."}</script>

Open Graph title, description, site title, and URL (for Facebook, LinkedIn, etc.)

<meta property="og:title" content="..."/>
<meta name="description" content="..."/>
<meta property="og:description" content="..."/>
<meta property="og:url" content="..."/>
<meta property="og:site_name" content="..."/>
<meta property="og:type" content="..."/>
<meta property="article:published_time" content="..."/>
<meta property="fb:app_id" content="..."/>

Twitter Summary Card metadata

<meta name="twitter:card" content="summary"/>
<meta name="twitter:site" content="..."/>
<meta name="twitter:creator" content="..."/>

Multilanguage

Language navigation menu for each page to all the other translation versions

  <a hreflang="es" href="http://example.com/es/foobar" />
  <a hreflang="de" href="http://example.com/de/foobar" />
  <a hreflang="en" href="http://example.com/en/foobar" />

Alternate link elements in the head section of HTML

  <link rel="alternate" hreflang="es" href="http://example.com/es" />
  <link rel="alternate" hreflang="de" href="http://example.com/de" />
  <link rel="alternate" hreflang="en" href="http://example.com/en" />

Redirects from default language subfolder to site homepage (/en -> /)

Breadcrumbs for pages and posts

      <!-- url: /jekyll-skeleton/en/example-post -->
      <ol class="breadcrumb">
  		<li class="breadcrumb-item"><a href="/jekyll-skeleton/"><i class="fa fa-home" aria-hidden="true"></i></a></li>
  		<li class="breadcrumb-item ">
  		<a href="/jekyll-skeleton/en">en</a> 
  		</li>
  		<li class="breadcrumb-item active">
  		Example Post
  		</li>
  	</ol>

Design Philosophy

jekyll-skeleton has been built with the following principles in mind:

Uses Yarn to manage libraries, assets, and utilities.
- Bootstrap 4.
- Font Awesome.
Gem theme independent.
Optimized for multilanguage.
Follows jekyll-seo-tag usage suggestions.

Commands

Install

git clone https://github.com/marcanuy/jekyll-skeleton
cd jekyll-seleton
make install

Serve

make serve

Usage

Adding a new language

Add the language to _config.yml:

defaults:
  #languages
  -
	scope:
	  path: ""
	values:
	  lang: "en"
	  layout: default
  -
	scope:
	  path: "es"
	values:
	  lang: "es"

Its name to _data/locales.yml and an equivalent to each page in the language in /_data/map.yml:

-
  en: index.html
  es: es/index.html
-
  en: about.html
  es: es/acerca.html

Adding posts

Add a post in each language located in the language subdirectory: /en, es, etc.

The following properties in posts front-matter are used:

---
title:       # jekyll-seo-tag - The title of the post, page, or document
description: # jekyll-seo-tag - A short description of the page's content
image:       # jekyll-seo-tag - URL to an image associated with the post, page, or document (e.g., /assets/page-pic.jpg)
author:      # jekyll-seo-tag - Page-, post-, or document-specific author information (see below)
lang:        # jekyll-seo-tag - Page-, post-, or document-specific language information
---

Plugins

Jekyll-skeleton uses the following plugins:

https://github.com/toshimaru/jekyll-toc A liquid filter plugin
for Jekyll which generates a table of contents.
https://github.com/jekyll/jekyll-sitemap Jekyll plugin to silently
generate a sitemaps.org compliant sitemap for your Jekyll site.
https://github.com/gjtorikian/html-proofer Test your rendered HTML
files to make sure they're accurate.
https://github.com/jekyll/jekyll-feed A Jekyll plugin to generate
an Atom (RSS-like) feed of your Jekyll posts
https://github.com/jekyll/jekyll-redirect-from Specify multiple
redirections URLs for pages and posts.