- static site generator 2017-03-19T16:58:15+01:00 https://fadeit.dk/blog/tag/static site generator.html We've gone static (again) 2016-08-09T09:22:30+02:00 https://fadeit.dk/blog /2016/08/09/from-JSON-to-markdown <p>It’s a big day today: we’ve gone Jekyll - the state of the union static site generator.</p> <p>Yes folks, the fadeit blog has been dismembered. It is not more but a puny appendage, isolated from the rest of the fadeit universe. Call it the great fadeit schism if you will. But why did we do it?<br /> More on that in a second.</p> <p>Let me tell you something about JSON first. It was created for humans, you know, like you and me. When specified by <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Mr. Douglas Crockford</a>, it was supposed to be:</p> <ul> <li>easy to read &amp; write</li> <li>easy for machines to parse &amp; generate</li> </ul> <p>All the more so we thought we can write blog posts in it &amp; get on with our lives. Oh how naive we were!<br /> Easy to read &amp; write? - not if you write a complicated blog post with tables, diagrams and code blocks.</p> <p>It wasn’t obvious to us from the start though, so this is why we’ll share this little story with you. Fortunately, you won’t have to go through the same struggle as we did. Sit back, relax and take a deep breath. You’re safe now.</p> <h2 id="our-little-static-site-that-could">Our little static site that could</h2> <p>For various reasons, we had (and still have) an Angular site running on <a href="https://fadeit.dk">fadeit.dk</a>. Without getting into details, our decision was to write a small Angular blog module that we’d feed JSON to. We all do our fair share of console cowboying, so we weren’t afraid of JSON. Doing so we got many advantages out of the box:</p> <ul> <li>design / UX consistency with the rest of the site</li> <li>complete control over rendering / plugins (i.e. code highlighting)</li> <li>decent performance</li> <li>some SEO</li> <li>a JSON linter!</li> <li>i18n (which we didn’t really use)</li> </ul> <blockquote> <p>Most of all, we saved time. Design aside, the actual implementation took a couple of days.</p> </blockquote> <p>We were happy, so we wrote a few blog posts. After a while, the writing frequency went down. Then, we started to forget how the JSON should be structured. We had to refresh our memory with each blogpost. When we did want to go all in &amp; create some crazy custom layout we’d add piles of code that we’d forget how to use later. Let’s face it, they weren’t properly documented either. Why would they be? We just wanted to write a blog post, not document how elements are rendered.</p> <p>To avoid going full mental jacket here, let’s just say it became a burden to write each blog post. None of us were motivated enough to start on a new post, a mental block was in place and we slowly stopped writing anything.</p> <blockquote> <p>It wasn’t strict enough in the right places, but too strict in the wrong places. We couldn’t just write a blog post anymore.</p> </blockquote> <h2 id="why-use-a-static-site-generator-anyway">Why use a static site generator anyway?</h2> <p>For us here’s what made it attractive:</p> <ul> <li>progressive enhancement: no need for JavaScript</li> <li>better performance: easier to handle traffic spikes, no db queries, server-side rendering &amp; the list goes on</li> <li>super easy to host &amp; run, inexpensive too (you can even do Github pages!)</li> <li>version control for content</li> <li>it’s safer, too!</li> </ul> <p>We were happy users of a static site generator (kinda) in the first place, but that was mostly client-side. While we did get an UX bonus, it was rather slow on mobile devices. That’s partly because it required downloading large scripts at first load. We weren’t taking advantage of server-side rendering. <br /> It still made a lot of sense to switch to a proper static site generator - and so we did.</p> <h2 id="why-jekyll">Why Jekyll</h2> <p>There are plenty site generators to choose from (more on that later), but Jekyll caught our eye because of:</p> <ul> <li>fewer scripts, no Angular, fast first load</li> <li>markdown! Easy to write, easy to migrate</li> <li>community, maturity &amp; (plugins)[https://jekyllrb.com/docs/plugins/]</li> <li>easy to get started</li> <li><a href="https://www.ampproject.org/">AMP</a> support</li> </ul> <p>Granted, the first 2 items in the list are true for many static site generators. However, the size and dedication of the community just blew our mind.</p> <h2 id="to-wrap-it-up">To wrap it up</h2> <p>Don’t take our word for it, give it a try for your next project. We’re happy now, but we were also happy with our Angular-JSON static site. We’re also running Wordpress, Joomla, Squarespace and even Medium blogs. There are many, many others you can try too. How many? About <a href="https://staticsitegenerators.net/">437 of them</a> to be precise (at the time of this post).</p> <p>There’s no silver bullet, but Jekyll is a damn good solution for techies to produce content.</p>