Jekyll (first)

You don’t want a site that’s not really you. A site filled with social buttons and widgets and gadgets and analytics and tracking cookies and banner ads and pop-up ads and everything else that makes your visitors scream at you from afar. Generated anew every time someone visits your site. Every. Single. Time. - Building a blog with jekyll - [1]

Basics

introduction
Yes we Jekyll
Mardown
- Jekyll: Markdown Basics
- quick-ref-jekyll-markdown.md
- How to force a linebreak? - two or more space at the end of the line.

Configuring Jekyll

Rouge higlightning

{% highlight cpp %}
code
{% endhighlight %}

Youtube trick

[![caption](https://img.youtube.com/vi/XXXvideo_idXXX/0.jpg)](https://www.youtube.com/watch?v=XXXvideo_idXXX)

embeded video

see Adding a Video to a GitHub

{::nomarkdown}
<div class="myvideo">
   <video  style="display:block; width:100%; height:auto;" autoplay controls loop="loop">
       <source src="XXX_url_XXX.webm"  type="video/webm"  />
       <source src="XXX_url_XXX.mp4"  type="video/mp4"  />
       <source src="XXX_url_XXX.ogg"  type="video/ogg"  />
   </video>
</div>
{:/}

site images

![caption](/images/XXXimage.gifXXX)

external images

CSS properties can be added as html comments

![caption](XXX_url_XXX) <!-- .element height="50%" width="50% ustify-content="left" -->

For SVG:
<img src="XXX_url_XXX">

excerp

Disable (default is first paragraph)

excerpt_separator: ""

Custom

excerpt_separator: <!--more-->

inline SVG

{::nomarkdown}
<svg width="400" height=300>
    <circle cx="150" cy="100" r="10" fill="blue"/>
</svg>
{:/}

Advanced Formating

Sorting Posts by Something Other Than Date

Link to post

[Mean-Max]({% post_url 2017-11-27-CG-meanmax %})
[Mean-Max]({% post_url 2017-11-27-CG-meanmax %}#anchor-id)

Controlling URLs and Links in Jekyll
Jekyll heading links - javascript for generating MFragment URLs
- Linking to an element on the same page

favicon

{::nomarkdown}
<link rel="shortcut icon" href="https://crystal-lang.org/favicon.ico" type="image/x-icon" />
{:/}

Colored text

<span style="color:red">[**Warning**]</span>

Strike throudh

There are several ways to do it:

<strike>strike</strike> → ~~strike~~
<del>strike</del> → ~~strike~~
<s>strike</s>→ ~~strike~~
~~strike~~ → ~~strike~~
~strike~- → ~strike~

Latex Formula

add use_math: true

- $h_\theta(x) = \Large\frac{1}{1 + \mathcal{e}^{(-\theta^\top x)}}$
- $a^2 + b^2 = c^2$
- $\sum_{i=1}^m y^{(i)}$

Example:

$h_\theta(x) = \Large\frac{1}{1 + \mathcal{e}^{(-\theta^\top x)}}$
$a^2 + b^2 = c^2$
$\sum_{i=1}^m y^{(i)}$

Folding content

using HTML only?
- custom expand
- Can I replace the expand icon (▶) of the <details> element?

{::nomarkdown}
<details>
    <summary>Summary</summary>

    <p>Detailed content goes here …</p>
</details>
{:/}

Table

from CSV Data

Theme

Link Color Switcher - give user Theme control - not implemented yet

Other

The easiest way would be to just define a new layout for your help.md

Create a copy of the layout currently used by help.md (say, page.html)
Rename the new layout as help.html (path: _layouts/help.html)
Remove markup that renders the large hero header

Use layout: help in the front matter of help.md:

---
layout: help
---

Diagnosing on Github

Github Jekyll pages

Go to repository and look into Actions

Traffic ?

Rotten Link

Run locally and use Xenu’s Link Sleuth (through Wine).

Running Jekyll locally

install
- Obsolete Not compatible with Ruby 3.0 - use ruby 2.7
Liquid Exception comparison of Array with Array failed #406

jekyll new myblog

And copy Gemfile* into Github blog Now you can run

jekyll serve

Online Editor

Liquid

Jekyll uses the Liquid templating language to process templates. All of the standard Liquid tags and filters are supported.

Escape Liquid tags in Jekyll using {{ “{{“ }} site.title }} trick or use raw.

inlined comment on doc side only

[//]: # ( https://jsfiddle.net/y_duf/6cz94d5e/ )

Alternatives

Zola

#4577