How I make these blog posts

Philip Thomas K.

20 December 19

Back

Got to be honest here. I do not have a clue as to how to write in HTML. So I won’t. But I will get my laptop to write it for me. How do I do that? Simple. I use pandoc.

What is pandoc?

pandoc is a program that can basically convert most document formats to most other document formats. It is very useful. It means that by editing a simple markdown file, I am able to produce (from that) almost anything I can conceivably want. A pdf, html document, or even a Microsoft Word document. It is what I used to make this webpage, and the whole website for a matter of fact. Its uses range far beyond what I use it for, so I do encourage you to see what you can use it for.

The workflow

I have a folder in my laptop called quite simply ‘Blog’. In this folder, each blog post gets its own folder (the name of the folder being the title of the post). In each of these folders, I just have three files:

  1. index.md (The markdown file with all the content)
  2. makefile (Allows me to compile using the command make)
  3. style.css (A simple stylesheet that I made for pandoc to use)

All the content is done via markdown syntax, which can basically be learnt in the span of half an hour. Then, once I am done writing in index.md, I execute the make command inside the directory to get pandoc to do its thing.

But what is in each of these files?

I am glad you asked. Each of the index.md files has a sort of header that pandoc reads first. Then I add a link back to the homepage. This is then followed by the content:

---
title: How I make these blog posts
author: Philip Thomas K.
---

[Back](../Home/)

Content

The makefile is very simple itself. It just has one command in it that saves me a whole lot of time:

compile:
    pandoc -sc style.css index.md -o

Now, finally the style.css file. This took some tinkering to get right. It was honestly the only portion of this process that was in any way tedious. Lucky for me there is a lot of documentation online on how to format css.

body {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-family: sans-serif;
}

a:link, a:visited {
    color: black;
    font-weight: bold;
    font-size: 18px;
}

code {
    background: #f4f4f4;
    font-family: monospace;
    font-size: 14px;
} 

pre {
    background: #f4f4f4;
    border: 1px solid #cccccc;
    font-size: 14px;
    font-family: monospace;
    line-height: 19px;
    overflow: auto;
    padding: 6px 10px;
    border-radius: 3px;
}

And that’s it! I literally just write the content into index.md then compile it with make or make compile and out comes my html file.

Best Regards,
Philip

Back