Digital Agency Shares the Benefits of Building a Static Website

Static sites are a big hit today. There are many advantages to having your website static, mainly performance and security. But will static sites stand the test of time? What is the real experience of developing and maintaining a static site? And how does it stand compared to dynamic websites built with traditional CMSs like Wordpress? I had a privilege to talk with Adam Judd, Managing Director of , which is a UK based digital agency with a core focus on digital, about how they redesigned their own site using . That includes Vue.js framework, static site generator and a headless CMS . DiscoverIT JAMstack methodology Nuxt.js Kentico Cloud Ondrej: Adam, I know you had an existing website that you decided to redesign. Can you explain your motivation? Adam: Our original site was built on a traditional CMS back in 2014, so we were due a refresh. Especially for a digital agency it is essential to have something that uses the latest technologies and showcases what your capabilities are. Ondrej: But there are so many new technologies and options for building websites out there. How did you go about selecting the one that works well for you? Adam: We were initially drawn to the idea of going down the full server-side-rendering route for our website, but in the end our server configuration and the way we host other sites meant that the static site generator was a better option for our needs. There was less complexity involved server-side, the speed of serving pages is increased as the content is already generated and SEO capabilities can be more easily managed. Ondrej: Can you describe what a static site generator is and what are its benefits? Adam: The main idea behind static site generators is to take the dynamic content, front-end implementation of the site, combine these two and save the result into static, physical files. This approach brings benefits on multiple fronts — your web server provides only static files while your visitors are amazed from the speed of browsing through your website. Static files are also hard to penetrate as they typically do not contain any dynamic functionality that could be breached. Ondrej: So what did you need to build the static website? Which technologies and frameworks have you selected? Adam: Our website has been built using Nuxt.js, a framework designed for creation of Vue.js applications, with an emphasis on UI rendering and abstraction of the client/server distribution. What drew us to Vue.js in particular was a combination of things. First of all, Vue is exceptionally fast and lightweight. At roughly 20KB in size, the framework has extremely small overheads which allows applications to reach peak performance. Secondly, Vue.js builds upon classic web technologies meaning that the learning curve for development was small and the time to delivery likewise. At its core, Vue.js is simple, highly integratable and fast. We were looking for a framework that would allow us to build an effective, modern website in a short amount of time. Vue.js fit the bill perfectly. Nuxt.js was the only practical solution for most websites given the SEO limitations of Vue.js. Ondrej: I assume you are also using some system for managing content, right? Adam: Yes, we selected headless CMS, because in terms of the steps to get started with designing the content types and content population, it was certainly quicker as a starting point. We did not have to install traditional CMS somewhere or get too deep into page types and their setup. We considered importing all of the content from the existing website as a starting point. Although there is an API available to do that, we just decided to start again and copy pasted what we wanted to keep from the existing site. From the editors perspective it’s very good, very simple. From the developers point of view, the API towards , which is the headless CMS we used, is very easy to use. We did not really have any issues with bringing the data wherever we wanted. Limit them, order them, absolutely easy to use. Kentico Cloud Ondrej: Is the website integrated with any other 3rd party services than headless CMS? Adam: The only other 3rd party service we use is TypeForm. We use it for the contact form on our Contact page. It was the quickest option to get the site out there. Ondrej: So the site is static, but from time to time there will certainly be content updates or implementation changes. How do you regenerate the site when this happens? Adam: Nuxt.js comes with a deployment option called which we call on a daily basis from our CI/CD server, Team City. Once the pages have been statically generated and the application has been built into a release package, we pass that off to our release management tool Octopus Deploy to push to our server. nuxt generate Whenever we make a development change, we commit it to a git repository and via webhook notify TeamCity to start the same process. Ondrej: How long is your new website live? Have you heard any feedback on it from your clients yet? Adam: Everything has been working well since our first deployment a few weeks ago and I have no complaints. The usage of the static site has meant we have been able to more easily manage our SEO scores and the results have been great. This was always going to be a big factor in the measurement of our considered success. Ondrej: Based on your experience, would you recommend static site generators to anyone or is it a good fit only for specific websites? Adam: There is no ‘one size fits all’ approach to web development, but certainly static site generators are an option that can and should be considered when building web applications. It all depends on your content and how often you need to update the content on your site. If you have dynamic, constantly changing content, the approach is unlikely to suit your needs. If your content is consistent and updates can be handled in a daily build for example, then I would recommend giving the approach a thought. It can also be beneficial when you are on an enterprise level and need to work with many touchpoints like digital signage, mobile apps, static sites, kiosks. It becomes very powerful when you want marketing to have control over how they run their marketing campaigns. They gain the ability to control the content of these different applications without having to put a change request each time. Ondrej: Thank you Adam for all your valuable insights into building static websites. I am sure there is a lot others can learn from your experience. Have you deployed a static website yet? Would you recommend it to others? Leave a comment.