Markdown

Header 1

Header 2

Header 3

public class Hello {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

def hello():
    print("Hello, World!")

Quote:

A quote.

A table:

Column 1 Column 2
Row 1 Row 2

Bullet points:

  • Bullet point 1
  • Bullet point 2

Basics

This blog is a git repo hosted in GitHub. Every push to master triggers a CI build that compiles the site using Jekyll and pushes the results to a Blob Storage account in Azure. The Blob Storage has HTTP access enabled with a custom domain.

Building the jekyll site:

gem install bundler  jekyll  
bundle
bundle exec jekyll build
ls _site

Uploading the files to storage account:

#!/bin/bash
export AZURE_STORAGE_ACCOUNT="alanboyblog"
export container_name=\$web

cd _site

for f in $(find . -type f); do echo "Uploading ${f:2} ..." 
    && az storage blob upload --container-name $container_name --file ${f:2} --name ${f:2} ;
     done

I created a custom Jekyll theme that uses SemanticUI for the HTML elements.

For the search, during build-time we create a js file which contains metadata for all the posts and provide that as an input to the search element.

To include mermaid, do this:

<div class="mermaid">
sequenceDiagram
    Alice ->> Bob: Hello Bob, how are you?
    Bob-->>John: How about you John?
    Bob--x Alice: I am good thanks!
    Bob-x John: I am good thanks!
</div>


<div class="mermaid">
graph TD
  A[Christmas] -->|Get money| B(Go shopping)
  B --> C{Let me think}
  C -->|One| D[Laptop]
  C -->|Two| E[iPhone]
  C -->|Three| F[fa:fa-car Car]
</div>