Hello Jekyll!

Simple demonstration of Jekyll and how I setup my blog.

This blog post (unlike the rest) is a living document that I use to write examples and templates for myself.

Why Jekyll

This is my blog. It uses Jekyll and almost entirely copies the setup of Andrej Karpathy’s blog, which it self is very close to the vanilla Jekyll setup. I.e. don’t expect anything fancy.

I chose Jekyll because it is light weight (to use and load), I can reasonably understand what is going on, and once setup it is very quick to write posts using markdown and basic HTML.

Todos

• Update header and footer.

Folder and file structure

Posts are in files on the format: /_posts/YYYY-MM-DD-NAME-OF-POST.md. This date is the date that work on the post began. Assests should be in a folder: /assets/NAME-OF-POST/

Attributes

• permalink should be set to NAME-OF-POST, same as in the file name.
• date variable should be set to the (first) publish date.

Local compiling and serving

cd to the appropriate folder.

Build the site and make it available on a local server.

bundle exec jekyll serve

Then browse to:

http://localhost:4000/

Writing and formatting posts

Text Formatting

Jekyll supports basic formatting such as italic and bold. And remember the world is flat. Subscript not supported: H~2~O, and superscript not supported: X^2^. Emoji’s also not supported :joy:

Images

Image caption. In here you use HTML, not mark down for formatting, e.g. to make bold, and hyperlinks are made like this

Two images can also be set side-by-side, but you might have to play with the height manually...

Embed Youtube videos

YouTube videos, like this one explaining Jekyll, can be embedded with a little HTML like this one:

Comments

You can make comments in the markdown file that aren’t complied, and there are several options

• [//]: # COMMENT should be the most portable comment. It must be on a separate line following a blank line.
• <!-- COMMENT --> allows for multi-line and inline comments.

Footnotes

Footnotes are made with [^XXX] in the text and [^XXX]: on a separate line with the note. XXX can be any key that you want ¹. This is a text with a footnote², that also has a second footnote ³. Numbering the footnotes is automatic and incrementing. You can reffer to the same footnote more than once ².

Horizontal lines are made with ---

Code Formating

This is inline code and this is a sample code block (supports syntax highlighting):

import numpy as np
def foo(x):
    # this is not code, this is a comment
    for i in range(x):
        print(i)
foo(5)

I like to put the output of code in a separate code block inside a block quote, like so:

0
1
2
3
4

You can also make codeblocks by indenting with 4 spaces, but then you don’t get syntax highlighing.

Math Formatting

Inline math is not made wiht $, it is made with \\( \\) like this: \(\nabla_{W} \log p(y=UP \mid x) \frac{1}{2} \) its strange.

Fancy math is made with $$ and supports align environments like this: \(\begin{align} \nabla_{\theta} E_x[f(x)] &= \nabla_{\theta} \sum_x p(x) f(x) & \text{definition of expectation} \\ & = \sum_x \nabla_{\theta} p(x) f(x) & \text{swap sum and gradient} \\ & = \sum_x p(x) \frac{\nabla_{\theta} p(x)}{p(x)} f(x) & \text{both multiply and divide by } p(x) \\ & = \sum_x p(x) \nabla_{\theta} \log p(x) f(x) & \text{use the fact that } \nabla_{\theta} \log(z) = \frac{1}{z} \nabla_{\theta} z \\ & = E_x[f(x) \nabla_{\theta} \log p(x) ] & \text{definition of expectation} \end{align}\)

Lists

Bulleted lists

• Top level
  • second
  • level
    • third
    • level
• Top level

Numbered lists

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

Task lists

• Write the press release
• Update the website
• Contact the media

Blockquotes

A sample blockquote.

Nested blockquotes are also possible.

Headers work too

This is the outer quote again.