Barnabás Börcsök

Passionate about the intersection of art and technology.


Quick & Dirty Web Development

411 words • 2 minute read
technical

I think that static content on the web should be static.1

I ended up making https://barnabasborcsok.com with Hugo , a static website generator.2 You simply write your content in markdown, and then a simple command (or an instantly refreshing dev server) generates your website. All that’s remaining is to sprinkle in some design via CSS (or whatever modern derivative thereof), and add some basic structure to your site via templating. Developing my first blog and personal website using Hugo remains a blog post for another day though.

Going beyond the simplicity of this, when I simply needed a quick & dirty solution to publish a single site with the convenience of writing it in markdown3, I simply used cmark post.md > post.html to render the HTML file (and added some basic just-enough.css to the folder). Then optionally, a simple scp call took care of deploying.

The fun thing is that markdown enables you to add HTML tags to your heart’s content.

content.md
<link rel="stylesheet" href="just-enough.css">
<meta charset="UTF-8">
# Header 1
Pushing things to the World Wide Web in a fast and efficient manner is fun!

For completeness’ sake, here is the styling I used: just-enough.css ; a slightly tweaked version of the wonderful bootstrap from https://niklasfasching.de/posts/just-enough-css/ .

generate_html.sh
#!/bin/sh
cmark content.md > content.html

Then finally, to make the quick and dirty solution complete, you can deploy to your server with e.g. a simple scp call: push_to_website.sh

#!/bin/sh
scp ./content.html [username]@[domain]:[...]/public_html/[...].html

And yes, at some point I had both of these scripts bound to some shortcut in vim. :)

I’m curious what you think about this setup, and I’m also curious about what your solution is for simply pushing things to the web. Feel free to reach out if you have any thoughts/comments!


  1. When someone mentions “modern web development stack”, this is what usually comes to my mind: https://xkcd.com/2347/.↩︎

  2. Static, as in not dynamic, as in the file you are serving (i.e. your website) is there on the server, without some dynamic program (e.g. written in JavaScript) having to assemble it for you when you’d like to visit the website. (Think: how Facebook assembles your own personal feed for you in the background every time you visit – or refresh – https://facebook.com .) ↩︎

  3. As an example, when I wrote about finding your way in the world of Computer Graphics as a student during my time as a TA for the 3D Graphics course at TU Budapest https://cg.iit.bme.hu/~barney/cg-pathfinding.html . (Content in Hungarian.↩︎