Creation of website – Generated CS Papers with Hugo

I have been playing recently with Static website generators such as Jekyll and Hugo.

I wanted to do a quick demo mostly for myself to see it’s performance and how it all ties together in a sense of structure and development.

The following page: https://generatedcspapers.codeandunicorns.com/ is made with Hugo.

DOMContentLoad takes approximately 172ms and Load in Chrome inspect around 246ms, with all together 3 requests, the website itself is around 14kb as in just the HTML designy part. That’s pretty impressive, of course the biggest part of the load of the websites in this case will be any JS that you will be adding for the future. Regarding articles themselves, I was checking into usage of SCIgen – An Automatic CS Paper Generator. It is quite an awesome thing, it created automatically generate CS academia like papers, that are pretty much BS more or less, but at the same time the structure, and the feel is that it is correct-ish.

Theme that I used with Hugo is called After Dark and is very heavily performance optimised, but a nice thing is that it provides out of box support with very simple one liners to add Disqus and Google Analytics with just adding the unique identifiers to config.toml file. The theme also features on the overview list an amazing time reader, which I love, but am not sure why exactly.

Regarding the static generators like Hugo:

It is super high performant, but creation of content is not as user/editor friendly as some of other site creation thingies such as WordPress. But, I do think I saw some offline Hugo or Jekyll CMS with which you can create content locally in more user/GUI friendly way. I am totally fine with writing Markdown format, but for some people it may be easier to take a look into that as well. But due to Hugo being what it is, I’d certainly say it is similar to AMP in a sense, that it semi-limits you what you can actually develop with it, since if you want to high super high performance you are inherently limited in what kind of rich content you want to create, or at least you need to take a look at it from a different direction.

Markdown files as content creation are quite simple with for example **TITLE** marking something as a title and you can easily add any custom HTML for things that you aren’t able to do with this kind of templating.

Hopefully someone finds the overview interesting, but if you want some more data on performance load times or DOM’s just ping me and i’ll update it 🙂

By |April 4th, 2017|Categories: ALL|

About the Author:

Senior lead developer currently working in Java, architecture design, mix of tech from Front-end in JS and templating to chef,rundeck etc. For fun and challenge I am writing different blog posts from stories to poems, programming tutorials and many more. Currently working on my Masters degree on a part-time basis.