khalido.org
I love me some subheader text.
Table of contents.

how the blog was built

Hereby I talk through writing my own blog engine. There are many excellent ones out there, but to customize any of them takes so much understanding of how they work, the template and theme engines they use, that its easier to just use them exactly as is with an existing theme. I wanted my own custom static blog, and a reason to do some python coding, so here goes yet another python blogging script.

This post documents the process of building this blog. The main goal is to put markdown and jupyter notebooks in a folder, and build a static site which gets autoupdated on github pages or [netlify]https://www.netlify.com/). Just like hugo, jekyll, gatsby and so many others!

the basic blog

Its straightforward to read a set of markdown posts and convert to python. I am using python to read the posts with python-markdown to parse them into html, complete with inline syntax highlighting.

Key tools used:

parsing markdown

Python markdown

Start a server

python -m http.server

code highlight

python markdown has pygments built in, which has a bunch of styles. To generate the css:

pygmentize -S default -f html -a .codehilite > codestyles.css

The

html

css

Frameworks I looked at:

This was the important one. First up, I added a simple list of posts and a javascript filter:

 <h3>Simple list of posts</h3>
    <p>All the Blog posts using mako templates. The filter here is a simple javascript one just filtering on the content inside the list.</p>

    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Filter.." title="Type">

    <ul id="myUL">
        % for post in posts:
            <li><a href="${post.slug}.html">${post.title}</a></li>
        % endfor
    </ul>

<script>
    function myFunction() {
        var input, filter, ul, li, a, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        ul = document.getElementById("myUL");
        li = ul.getElementsByTagName("li");
        for (i = 0; i < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
</script>

This turned out to be pretty useless, so enter fusejs.

Github actions

Github actions add superpowers to a repo - they can be set to be trigured at a time interval or on every code push to a branch. To make a github action: Save a github approved formatted yaml file to .github/workflows folder and it should run on every push. For this blog my actions:

Misc stuff

emoji

Some unicode fonts have emojis built in, so ways to enable emoji is:

Emoji test:

twitter embed

This should show a twitter tweet embedded inside the page:

Sunsets don't get much better than this one over @GrandTetonNPS. #nature #sunset pic.twitter.com/YuKy2rcjyU

— US Department of the Interior (@Interior) May 5, 2014

testing syntax highlight

from mako.template import Template
from mako.lookup import TemplateLookup
lookup = TemplateLookup(directories=["templates"])

# make the big picture templates
for tmpl in ["index.html"]:
    template = lookup.get_template(tmpl)
    html = template.render(posts=posts).strip()
    path = path_publish / tmpl
    path.write_text(html)
    print(f"wrote {tmpl} to {path}")

# write all the posts
template = lookup.get_template("post.html")
for post in posts:
    html = template.render(post=post).strip()
    path = path_publish / f"{post.slug}.html"
    path.write_text(html)
    print(f"wrote {post.slug} to {path}")
posted , updated
tagged: python