Jekyll (JAM) site development

Getting started with Jekyll

NOTICE: Kubernetes.io moved their docs to Hugo in 2018.

This article contains notes on getting started with Jekyll and other static websites.

This is one in a series:

1. Static website development
2. Jekyll site development
3. Jekyll templates and themes
4. Email from Jekyll sites
5. Add search to Jekyll sites
6. Authenticate on static sites
7. Clickable maps in Jekyll sites

NOTE: Content here are my personal opinions, and not intended to represent any employer (past or present). “PROTIP:” here highlight information I haven’t seen elsewhere on the internet because it is hard-won, little-know but significant facts based on my personal research and experience.

There is also Gatsby and others.

But Jekyll is still currently the most popular among static site builder options.

The objective

What we would like to do after going thrugh the below is to type this on a Terminal and a browser would open to show your Jekyll site locally.

1. In the macOS ~/.bash_profile add a shortcut, but substitute “wilsonmar” with your own GitHub account name:

   alias js='cd ~/gits/wilsonmar/wilsonmar.github.io; \
   bundle exec jekyll serve --config _config.yml'
   

2. Create the folder.

Ruby build

Upgrade Apple XCode

1. Install the latest XCode from Apple. See my tutorial at https://wilsonmar.github.io/xcode

2. Per https://github.com/rbenv/ruby-build/wiki#suggested-build-environment

   brew install openssl libyaml libffi

Install rbenv

brew install rbenv ruby-build

Jana Bergant’s Udemy course uses a mac install Jekyll 3.3.0 at last viewing:

gem update --system -n /usr/local/bin --no-document

-n /usr/local/bin ensures avoids “You don’t have write permissions for the /usr/bin directory.”

--no-document to avoid installing documentation (which can be accessed online anyway)

The response, at time of writing was:

Updating rubygems-update
Fetching rubygems-update-3.0.3.gem
Successfully installed rubygems-update-3.0.3
Parsing documentation for rubygems-update-3.0.3
Installing ri documentation for rubygems-update-3.0.3
Installing darkfish documentation for rubygems-update-3.0.3
Done installing documentation for rubygems-update after 36 seconds
Parsing documentation for rubygems-update-3.0.3
Done installing documentation for rubygems-update after 0 seconds
Installing RubyGems 3.0.3
Bundler 1.17.3 installed
RubyGems 3.0.3 installed
Regenerating binstubs
Parsing documentation for rubygems-3.0.3
Installing ri documentation for rubygems-3.0.3
 
=== 3.0.2 / 2019-01-01
 
Minor enhancements:
 
* Use Bundler-1.17.3. Pull request #2556 by SHIBATA Hiroshi.
* Fix document flag description. Pull request #2555 by Luis Sagastume.
 
Bug fixes:
 
* Fix tests when ruby --program-suffix is used without rubygems
  --format-executable. Pull request #2549 by Jeremy Evans.
* Fix Gem::Requirement equality comparison when ~> operator is used. Pull
  request #2554 by Grey Baker.
* Unset SOURCE_DATE_EPOCH in the test cases. Pull request #2558 by Sorah
  Fukumori.
* Restore SOURCE_DATE_EPOCH. Pull request #2560 by SHIBATA Hiroshi.
 
=== 3.0.1 / 2018-12-23
 
Bug fixes:
 
* Ensure globbed files paths are expanded. Pull request #2536 by Tony Ta.
* Dup the Dir.home string before passing it on. Pull request #2545 by
  Charles Oliver Nutter.
* Added permissions to installed files for non-owners. Pull request #2546
  by SHIBATA Hiroshi.
* Restore release task without hoe. Pull request #2547 by SHIBATA Hiroshi.
 
 
------------------------------------------------------------------------------
 
RubyGems installed the following executables:
	/Users/wilsonmar/.rbenv/versions/2.6.1/bin/gem
	/Users/wilsonmar/.rbenv/versions/2.6.1/bin/bundle
 
Ruby Interactive (ri) documentation was installed. ri is kind of like man 
pages for Ruby libraries. You may access it like this:
  ri Classname
  ri Classname.class_method
  ri Classname#instance_method
If you do not wish to install this documentation in the future, use the
--no-document flag, or set it as the default in your ~/.gemrc file. See
'gem help env' for details.
 
RubyGems system software updated
   

Create a folder

CAUTION: In 2019, GitHub changed their pricing policies to begin charging for hosting websites (at $7/month). That $84 per year is less than what many hosting companies charge to provide a single machine. But GitHub also provides free scaling and a fast world-wide CDN for no additional cost.

In GitHub create a youraccount.github.io repo.

Delete file .bundle from my Home folder (rm -rf ~/.bundle). You can check out your configuration running bundle env

https://jekyllrb.com/docs/

In Terminal, from any folder,

sudo gem uninstall bundler
   gem update --system
   

If the latest version is not installed, you get a message like this:

ERROR:  While executing gem ... (Errno::EPERM)
    Operation not permitted @ rb_sysopen - /System/Library/Frameworks/Ruby.framework/Versions/2.3/usr/bin/gem
   

   rbenv rehash
   sudo gem install bundler
   

A valid response I got:

Successfully installed bundler-2.0.1
Parsing documentation for bundler-2.0.1
Done installing documentation for bundler after 4 seconds
1 gem installed
   

### Install Jekyll (instead of Homebrew):

gem install jekyll --no-document

The response:

Successfully installed jekyll-3.8.5
Parsing documentation for jekyll-3.8.5
Done installing documentation for jekyll after 1 seconds
1 gem installed
   

http://ryan.mcgeary.org/2011/02/09/vendor-everything-still-applies/

In _config.yml

exclude: [“vendor”, “lib”,

### Demo Site

1. Use or create an enclosing folder, such as “projects”.

   jekyll new demosite

   The response should be “New jekyll site installed …”.

   BLAH: I’m getting this message:

   Your user account isn't allowed to install to the system RubyGems.
     You can cancel this installation and run:
    
      bundle install --path vendor/bundle
    
     to install the gems into ./vendor/bundle/, or you can enter your password
     and install the bundled gems to RubyGems using sudo.
    
     Password: 
   

Bundle install

After downloading, have Maven pull in dependencies based on the Gemfile:

bundle install

NOTE: Technically, “install” is not needed since it’s the default command for bundle.

Bundling makes the list of dependencies in the Gemfile to be downloaded.

Your user account isn't allowed to install to the system RubyGems.
  You can cancel this installation and run:
 
      bundle install --path vendor/bundle
   

Grunt tasks

Behind the scenes is a running of the Gruntfie.js that comes with the theme. It defines the parameters of various tasks that are downloaded:

• clean clears files and folders.
• jshint validates files with JSHint, based on the .jshintrc configuration file at the root folder.
• uglify minfies files with UglifyJS.
• watch runs tasks whenever watched files change.
• imagemin minifies PNG graphics files.
• grunt-svgmin minifies SVG graphics files.

NOTE: File names beginning with a dot are hidden.

Serve Jekyll landing page

Theme programming goes to work generating HTML files in folder _site when this command is issued when the present working directory is the site’s folder:

To see the site the way GitHub would generate it (without additional plug-ins some templates provide):

   bundle exec jekyll serve --safe

The precise version of plug-ins used by GitHub on-line is listed here.

Otherwise:

   bundle exec jekyll serve --baseurl ''

Alternately, override local URLs:

   bundle exec jekyll serve --config _config.yml,_config_dev.yml

PROTIP: Define an alias, such as “bs” in ~/.bash_profile file:

alias bs='bundle exec jekyll serve --config _config.yml,_config_dev.yml'

PROTIP: Leave this terminal instance running and open another Terminal instance to work on the content of the site.

The generated HTML files can then be accessed from an internet browser at this URL:

http://localhost:4000

The landing page of the site is defined in the index.md file at the root folder.

The theme by itself does not show much. The template’s author assumes that technical people will be using his creation.

When the web server starts, it is industry standard for the index.html file to be rendered.

1. Edit file index.html file. By default it contains this:

---
layout: archive
author_profile: true
---
Ù% include base_path %}

<h3 class="archive__subtitle">Recent Posts</h3>

Ù% for post in paginator.posts %}
Ù% include archive-single.html %}
Ù% endfor %}

Ù% include paginator.html %}

Between the two triple-dash characters is the “front matter” for Jekyll to interpret.

Jekyll uses the layout tag’s value archive to build out the page according to the archive.html file within the _layouts folder.

Another layout type, splash, arranges the page with thumbnail pictures.

The other layout types are default, single, and compress.

Jekyll converts index.md files to index.html files.

Edit index.html author_profile

Having author_profile: true tells Jekyll to add the profile on the left side.

1. If you would rather have text greet your visitors, add it.

---
layout: home
excerpt: "By Wilson Mar"
tags: [Jekyll, theme, responsive, blog, template]
image:
feature: sunrise-1900x500.png
credit:
creditlink:
---

1. If you would rather have text greet your visitors, add it.

<meta name="keywords" content="Jekyll, theme, responsive, blog, template">

TODO: Substitute the image file name in the feature: variable with an alternative file you placed in the images folder.

Return to this page from any other by clicking on the site’s title presented at the upper left corner.

Change README.md content

1. Use a text editor program to open the README.md file at the root.

   This file is not shown on the website.

   It was written for those who work with the site’s code, not readers of the resulting website.

   So the content of this page should be changed from being about the theme to about the website derived from the theme template, such as:

   “I hope you’ll file an issue or send a Pull Request. I need the help.”

2. File mm-theme-post-600.jpg within the images folder can be deleted.

Edit _config.yml and reset server

1. Use a text editor to edit _config.yml.

   # Site Settings
   locale                   : "en-US"
   title                    : "Home"
   title_separator          : "-"
   name                     : "Wilson Mar"
   description              : "Hello. Hire me."
   

2. Change the title text from “USER_” to "Home" or whatever you want.

3. Change the name value to your screen name.

4. Save and exit the file.
5. Stop the server so the changes take.

6. Start the server again.

7. When you view the page again, notice the heading has changed to your title value.

Edit _config.yml author info

1. Again use a text editor to edit the _config.yml file to change other values.

2. Scroll down the file to:

   # Site Author
   author:
   name             : "Wilson Mar"
   avatar           : "bio-photo.jpg"
   bio              : "Hello."
   location         : "Everywhere"
   

3. Change the default author name, bio text, and location.

   <a href=”#avatar>Change the avatar</a>. PROTIP: Don’t change more than one or two values before you reset and view again so you know what change break the system.

Tabs, folders, and index.md files (for SEO)

Links at the top of the page (“QUICK-START GUIDE”, “ABOUT”, etc.) are specfied by the navigation.html file within the _data folder.

1. Edit that file.

   The title: key specifies the text of each tab, such as “About”.

   NOTE: CSS in the theme automatically turns all letters into capital.

2. Change url values such as this:

- title: About
url: /about/

- title: Sample Posts
url: /posts/
   

1. Save and restart the server.

index.md under About folders

Next let’s use a text editor to look into that about folder specified in the .yml file.

github: repo: https://github.com/user/Proj # “GitHub project” link on sidebar

index.md under folders

Jekyll converts the contents of each index.md file (containing markdown text) into index.html files containing HTML.

Open the index.md file in the about folder.

HOORAY: The use of folders above an index.html file enables calls using SEO-friendly links. For example, to reference the about link:

http://localhost:4000/about

HOORAY: This technique does not require use of mechanisms in the underlying web server container (such as IIS).

The text is added to page titles that appear in browser tabs through this HTML:

<title>All Posts &#8211; WilsonMar.GitHub.io</title>

Parsing of post file names

The posts tab link to files within the _posts folder. In the case of the sample file named “2011-03-10-sample-post.md”, Jekyll programming parses the “sample-post” out of the file name and uses that as if it’s named “sample-post.html”.

UI Text Translation

An addition

Metadata within .md files

At the top of each markdown file, between a set of 3 dashes, are key-value pairs providing metadata about the page, such as this example from the index.md file within folder about:

---
layout: page
title: About
tags: [about, Jekyll, theme, responsive]
modified: 2014-08-08T20:53:07.573882-04:00
comments: true
image:
   feature: pic pic blue black stars spin 1900x500.jpg
   credit: Jeremy Thomas
   creditlink: https://www.flickr.com/photos/132218932@N03/page2
---

EXTRA: Detailed YAML specifications are at: http://www.yaml.org/spec/1.2/spec.html

HOORAY: Such metadata takes the place of a database referenced to dynamically generate pages (as WordPress does). Jekyll’s lack of a database vastly simplies matters and speeds up processing. This enables static page HTML to be distributed in CDNs (Content Distribution Networks) around the world. That maximizes download speed for visitors.

Layout types

The various layout types are defined in files (with no extension) within the _templates folder:

• archive
• page
• post

HOORAY: This approach enables additional types to be defined.

---
layout: {}
title: 
modified:
categories: 
excerpt:
tags: []
image:
feature:
---

Text within square braces define an array of several values.

Liquid engine

Tags within { curly braces } are processed by the Liquid templating engine.

Liquid can perform if/then/else decisions and loops.

EXTRA: More detail about Liquid is at: https://docs.shopify.com/themes/liquid/basics#If_.2F_Else_.2F_Unless

• List of Liquid commands

Collections

One of the most powerful features provided by Liquid is Collections.

Collections is explained at:

• jekyllrb.com/docs/collections
• 2015/02/20/jekyll-collections by Ben Balter (product manager at GitHub).

Collections refer to a custom folder containing many markdown files, each having front-matter than can be parsed by Liquid code.

Ben has a great decision diagram:

NOTE: site.categories and site.tags only works on _posts.

Link icon YAML

In the list of posts, post titles with a link icon get that way because in its YAML is a line link post line such as this:

link: http://www.wilsonmar.com
---

.yml metada

Default values are specified in a _config.yml file at the root of the site folder.

EXTRA: All keys are detailed at http://jekyllrb.com/docs/configuration/

Here are the first few lines of a sample file:

# Site wide configuration

title:            WilsonMar.GitHub.io
locale:           en_US
url:

# Jekyll configuration

permalink:   /:categories/:title/
markdown:    kramdown
highlighter: rouge
sass:
sass_dir: _sass
style: compressed
gems:
- jekyll-sitemap
- jekyll-gist

PROTIP: Changes in the _config.yml file are applied only when the Jekyll service is recycled. At the command terminal window where Jekyll was launched, press control+C, then invoke the command to start the server again.

Another theme (Poole Hyde) adds:

---
github:
repo:  https://github.com/user/Proj # "GitHub project" link on sidebar
---

sitemap.xml in _site

Theme programming also generates the _site folder and in it generates feed.xml and sitemap.xml files for web crawlers to read.

Bing it on

TODO: Get a value for the bing-verify: variable in your _config.yml.

1. Open a Webmaster Tools account at bing.com/toolbox/webmaster/

2. Sign In with a Windows Live ID. If you don’t have a Microsoft account already, get one.

3. Type in your Site Name (mine’s wilsonmar.github.io) and click Add a site.

4. Type in the URL to your Site Map. (mine’s http://wilsonmar.github.io/sitemap.xml).

   The sitemap.xml file is generated in the _site folder, but will be the root folder when deployed on a web server.

5. Fill out the other fields (contact info and preferences), then click Save.

6. In the Verify ownership page, copy the string from:

   <meta name="msvalidate.01" content="73A60A207FC7D42B6F428E462079B001" />
   

1. Paste that string to the right of the bing-verify: variable.

2. Click the BingSiteAuth.xml link to save the file.

3. Move the file into the root folder where the _config.yml file is (NOT in the _site folder, which gets deleted and repopulated automatically).

4. Recycle the Jekyll server to see the BingSiteAuth.xml in the _site folder.

Google Ownership

This is explained in https://support.google.com/webmasters/answer/35179?hl=en

1. Access Webmasters Tools using your Google account.

2. Add a Property (such as http://wilsonmar.github.io).

3. Download the html file (such as google923b0745fb3293c1.html) to the Downloads folder.

4. Move the file into the root folder where the _config.yml file is (NOT in the _site folder, which gets deleted and repopulated automatically).

5. Download the file.

Disqus comments

1. Use an internet browser to get to: Disqus.com.

This is about creating a publisher account such as “wilsonmarcom”.

1. PROTIP: Create a separate personal commenter account (such as “wilsonmar”) to track your responses on other websites.

2. Click the cog next to your picture to select Add Disqus To Site, or https://publishers.disqus.com/engage?utm_source=Home-Nav

3. Click Install on your site.

4. Specify a site name such as “wilsonmar-github-io”.

5. Click Next and answer the demographic questions (how many visits, etc.).

6. You don’t need to select installation for Universal code and copy paste JavaScript because the theme has already done that in file _disqus_comments.html within folder _includes.

7. Copy the site.owner.disqus-shortname, such as “wilsonmargithubio” from:

<script id="dsq-count-scr" src="//wilsonmargithubio.disqus.com/count.js" async></script>

1. Open for edit file _config.yml in the root folder.

2. Paste the Disqus short name as the value to key disqus-shortname:.

3. Read more about configuration of Disqus at: https://help.disqus.com/customer/en/portal/articles/2158629

Disqus Setup Disqus on a New Site.

Multiple authors

Lower in the file is information about the default author displayed on all pages. This can be overridden in a particular index.md or post file by a line such as:

author: billy_rick

“billy_rick” is a key to more information in the authors.yml file within the _data folder:

billy_rick:
  twitter: @billyrick

HOORAY: This mechanism presents the photo and links to multiple alternative authors to appear on the website.

Social links +

If you’d like more links, add them in folder _includes file _author-bio.html:

Social sharing

On the bottom of every page of the minimal-mistakes theme are large buttons for sharing tweets, Facebook, and Google.

Unlike links on the left pane of every page, clicking on these links pops up a new browser window.

You can change that pre-populated text (the URL) by changing the _social-share.html file withing folder _includes. The default pulls in the value of variables:

https://wilsonmar.github.io and /jekyll-site-development/

The pop-up relies on cookies previously created when the visitor signed into Twitter, Facebook, and Google on the same browser used to access this site.

Images

Images can be defined in GFM or standard HTML.

In-line GFM images

Positioning of GFM-specified images can be specified using a special tag.

![Smithsonian Image](https://wilsonmar.github.io/images/3953273590_704e3899d5_m.jpg)
{: .image-pull-right}

renders as:

NOTE: Most images are stored in the site’s images folder.

Clickable images

GFM is not yet able to handle code to specific clickable images, either as HTML image maps nor as CSS.

One Up

<figure>
<a href="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_b.jpg"><img src="http://farm9.staticflickr.com/8426/7758832526_cc8f681e48_c.jpg"></a>
<figcaption><a href="http://www.flickr.com/photos/80901381@N04/7758832526/" title="Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr">Figure: Morning Fog Emerging From Trees by A Guy Taking Pictures, on Flickr</a>.</figcaption>
</figure>

renders to:

Half/Three Up

The theme has a half class to split the available horizonatl space in half to display two images side by side (and share the same caption).

<figure class="half">
<a href="/images/image-filename-1-large.jpg"><img src="/images/image-filename-1.jpg"></a>
<a href="/images/image-filename-2-large.jpg"><img src="/images/image-filename-2.jpg"></a>
<figcaption>Figure: Two images.</figcaption>
</figure>

renders to:

Three Up

The theme has a third class to split the available horizontal space in thirds to display three images side by side (and share the same caption):

<figure class="third">
<img src="/images/image-filename-1.jpg">
<img src="/images/image-filename-2.jpg">
<img src="/images/image-filename-3.jpg">
<figcaption>Figure: Three images.</figcaption>
</figure>

is rendered as:

Layout responsive to screen size

The MadeMistakes themes make use of the Semantic Grid System to define fluid grids for each major page layouts with a few lines of CSS code referencing @media queries. This makes the theme responsive – adapting to various size screens:

• Desktop default (up to the largest HD & 4XHD screen)

  Min-width: 780px

• Tablet Portrait (to landscape and desktop)

  Min-width: 768px / Max-width: 979px

• Smartphone (and all smaller screens)

  Max-width: 480px

Image sized to screen?

The size of screens.

The image for Twitter Cards is a square image around 120 x 120 pixels.

Markdown coding

The next few sections are based on

https://mmistakes.github.io/minimal-mistakes/sample-post/

Notice boxes

To put text in a box, add {: .notice} under the text to be boxed:

**CAUTION:** Invalid markup can crash the server.
{: .notice}

renders to:

CAUTION: Invalid markup can crash the server.

PROTIP: Make a small change (one phrase) then verify rendering. Commit to git at every verified set.

Blockquotes

A leading > marks a line as a blockquote:

> Lorem ipsum

renders as:

Lorem ipsum

Footnotes

A paragraph ending with the &Vcirc; “circumflex” character (upper case of the number 6 key) between square brackets defines the footnote number:

Footnotes are Syntax Highighting¹.

A repeat of the sequence at the beginning of a paragraph defines the definition:

[^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>

Button colors in HTML

Use pre-defined classes:

<div markdown="0"><a href="#" class="btn">Primary Button</a></div>
<div markdown="0"><a href="#" class="btn btn-success">Success Button</a></div>
<div markdown="0"><a href="#" class="btn btn-warning">Warning Button</a></div>
<div markdown="0"><a href="#" class="btn btn-danger">Danger Button</a></div>
<div markdown="0"><a href="#" class="btn btn-info">Info Button</a></div>

renders to:

If you are viewing this on a desktop, mouse-over each button to see the color change.

SASS

To change the colors, edit in folder _sass file variables.scss, then compile the file to .css.

    sass variables.scss  variables.css
   

Sass, or Syntactically Awesome StyleSheets, is an extension language for CSS.

Nests

Variables:

   $background-transparent :
   

Mixins

Paragraph Indents

By default, the theme assumes formatting is for books by removing extra lines and adds indents to second and subsequent paragraphs. Well, we’re in the internet age where long paragraphs are the exception.

To disable the indents and add spacing between paragraphs, edit in folder _sass file variables.scss to change:

$paragraph-indent: true !default;

To:

$paragraph-indent: false;

PROTIP: This change in the theme enables use of indented items using GFM.

Numbered lists

As with GFM, numbers in front of ordered list items can be preceded by zeros since they are automatically numbered:

0. Item one
0. sub item one
0. sub item two
0. Item two

some text after 3 spaces.

0. Item three

renders to:

1. Item one
2. sub item one
3. sub item two
4. Item two

some text after 3 spaces.

1. Item three

Code Snippets

Instead of a set of three back quotes, blocks of programming code are enclosed with special tags like this:

{% highlight css %}
#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}
{% endhighlight %}

renders as:

#container {
float: left;
margin: 0 -240px 0 0;
width: 100%;
}

Gists

Snippets of code on Gist.com can be displayed on the web page with a simple line containing the gist.com userid and snippet number:

{% gist userid/6589546 %}

Standard GFM mark-up

Several coding techniques ar the same as in GitHub Flavored Markdown.

• Asterisks precede text in unordered lists preceded with bullets.
• The number of # characters preceding heading text specifies the level.
• One asterisk enclosing text makes it italics.
• Two asterisk enclosing text makes it bold.

Just as with GFM, regular HTML is recognized and processed as such.

<strong>bolded text</strong>

Custom Includes

Jekyll can process several special tags beyond what GFM can do. An entire HTML file can be inserted:

{% include _toc.html %}

The tag is processed by Kramdown which generates the Table of Contents displayed on the right side of the screen.

A custom include can be coded within markdown like this:

{% include evangelist_links.html %}

Doing this takes some mental contortion because of the automatic processing.

The evangelist_links.html file referenced needs to be in the _includes folder.

 During processing, the folder "_includes" is automatically added to the link.
 Therefore you can't put the include file anywhere else, or you'll get a message such as:

 Error: Included file '_includes/includes/1loadrun_map.html' not found

However, there can be markdown in the evangelist_links.html file, such as:

In this series:

* [Budget](Budget)

<!--
* [Future1](Future1)
-->

NOTE: HTML code above to ignore can be included in the file.

Tables

A rule can be specified for formatting tables coded in GFM:

| Header1 | Header2 | Header3 |
|:--------|:-------:|--------:|
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|----
| cell1   | cell2   | cell3   |
| cell4   | cell5   | cell6   |
|=====
| Foot1   | Foot2   | Foot3
{: rules="groups"}

renders to:

Affiliate Ads

Amazon Affiliate Ads

1. https://affiliate-program.amazon.com/gp/associates/network/main.html

2. Search for a product to get its URL, such as: http://www.amazon.com/gp/product/B00IR2VEUS/ So Amazon’s product code is “B00IR2VEUS”.

3. Specify the product code to get the HTML containing your affiliate tracking code, such as:

<a target="_blank" href="http://www.amazon.com/gp/product/B00IR2VEUS/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B00IR2VEUS&linkCode=as2&tag=wilsonslifenotes&linkId=LGM2HVV7JYHE5QRS">Cabin Max Metz Backpack Flight Approved Carry on Bag 44 Litre Travel Hand Luggage - 55x40x20 (Black)</a><img src="http://ir-na.amazon-adsystem.com/e/ir?t=wilsonslifenotes&l=as2&o=1&a=B00IR2VEUS" width="1" height="1" border="0" alt="" />

Note the link has a one-pixel image link Amazon uses to track the number of impressions.

If you would like to list products you make on Amazon, get an account Seller Account at sellercentral.amazon.com/gp/homepage.html.

Google Affiliate Ads

Ideally, I would put a vertical ad under the table of contents.

Site Search

A Node.js library to add search functionality to any Jekyll blog Demo here is available from this repo.

Theme http://mmistakes.github.io/so-simple-theme/theme-setup/#jekyll-search activates each page using it with the search_omit: true front matter.

.gitignore

This list of folders and files is about what processing occurs locally.

{$ endhighlight text %} _site .sass-cache .DS_Store *.sublime-project *.sublime-workspace codekit-config.json node_modules _asset_bundler_cache .jekyll-metadata {$ endhighlight %}

Additional features

Make Jekyll multi-lingual

Deploy to server

• http://help.github.com/articles/using-jekyll-with-pages/

• http://goo.gl/hE3Zj2 to http://nicolasgallager.com/simple-git-deployment-strategy-for-static sites/

• jekyllrb.com/docs/deployment-methods/

Questions

QUESTION: How to add regular .html files to the site.

TODO: Inspired by Shamime’s photomap building, I added a Photomap tab and folder on my site.

http://loyc.net/2014/javascript-toc.html

QUESTION: Spell checking in GitHub?

Footnotes

There is no need to repeat excellent tutorials:

• Thomas Bradley’s videos on YouTube

• Tutorial: http://jekyll.tips/jekyll-casts/

• https://geekflare.com/cloud-storage-static-website/

• https://snipcart.com/blog/static-site-e-commerce-part-2-integrating-snipcart-with-jekyll

Jekyll MinimalMistake users in the wild

• http://udaypal.com/jenkins-workflow-getting-started/
• http://udaypal.com/2015-04-08-continuous-delivery-using-jenkins-workflow/

• http://michaelcrump.net/running-jekyll-locally/

• http://blog.christianposta.com/microservices/netflix-oss-or-kubernetes-how-about-both/

• JAMstack Conf 2018 - San Francisco 19 videos

• https://www.tomordonez.com/jekyll-text-expand-collapsible-markdown/ to hide text unless clicked
• https://karttur.github.io/setup-theme-blog/blog/blog-hide-show-div/

More on front-end styling

This is one of several topics:

1. UI Design Systems
2. Text Editors
3. Markdown text for GitHub from HTML

4. 508 Accessibility

5. gRPC (g___ Remote Procedure Call)

6. HTTP/2 Transition Project Plan

7. Front-end UI creation options
8. Docusaurus static website generator
9. Static websites
10. JAM Stack Website Project Plan
11. Jekyll Site Development

12. Gatsby app generator

13. Website styles
14. Website Styling

15. VueJs front-end framework

16. Protractor to automate testing of Angular and other web pages

17. Email from website
18. Search within Hyde format Jekyll websites

19. Windows Tile Pin Picture to Website Feed

20. Data Visualization using Tableau