Making static html sites with markdown and pandoc

The Problem

HTML is fun until is stops to.

Although I have autocompletion and emmet, I still don’t like writing html. I just don’t. Don’t ask why.

The Solution

So now we have the problem lets try and solve it.

After some google-ing I fond a incredible tool called pandoc.

What is pandoc?

According to their website.

If you need to convert files from one markup format into another, pandoc is your swiss-army knife.

Basically it can convert a variety of file types to and fro.

So I had the idea of converting markdown files to html files. The raw html will not be that appealing, hence you can add css to beautify the html.

Talk is cheap show me the code.

Lets make some markdown. Create a markdown file, they end with a .md extension.

Example mardown code:

# Lorem ipsum dolor sit

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
Converting the file.
pandoc --to html5 -s --css "path/to/some/cssfile.css" -o name_of_htmlfile.html the_markdown_file.md

This will generate a html file in the current working directory. You can view that in text editor of your choice.

Thats is. Now you have your html file. Infact this site is made that way.

Some tips:

That being said I still do believe that doing html and css by hand will give greater customization capability and give your site a better look, but if you want some quick html without all the hassle or just a stubborn like me then pandoc might be of great help. Not only html pandoc can convert to other formats like pdf and beamer presentaions.

back to blog