Nobody likes finding bugs. Even worse, no one enjoys finding bugs while shopping for digital products. That is why, as a company providing a web-based bug tracking tool to tens of thousands of users, we have to ensure a bug-free environment.
With our increasing number of web pages – and therefore increasing lines of code – we were motivated to look for ways to improve our internal workflow.
In this article, I’d like to give you some insights into the journey we undertook in the last couple of months to change our stack of tools and the way we produce and deploy new landing pages.
Once we decided to improve our internal workflow for the landing pages on usersnap.com, there were a lot of questions that needed to be answered. Which content management system to use? Which software tools? And many more questions.
We ended up using Hugo as our main website framework for usersnap.com. This decision has resulted in a completely new way of collaboration and development for the team.
The Benefits of a Static Site Generator
So what role does Hugo play in our website setup? Hugo is an open source static site generator. Static site generators build a web page at the moment you’re creating new content or editing it.
In contrast, content management systems like WordPress build a page every time a visitor requests one (although there are various caching techniques available).
There are a lot of benefits of choosing a static site generator like Hugo over a system like WordPress. And those advantages are not only about performance.
Static web pages created with Hugo give you 100% control over your content and web design. If you’re planning on launching a website with different kinds of layouts and content, it would make sense to consider a static site generator over a content management system, as you’ll be faster and more flexible. Moreover, you don’t need to understand all the peculiarities of a given CMS, but would only need to know the basics of HTML and CSS.
Originally, Hugo started as a side project by Steve Francia. Today, the Hugo community has more than 165 contributors, 35 themes and thousands of users.
Having already used Hugo for our side project bugtrackers.io, we knew it was the framework we wanted to use for usersnap.com as well.
Static Hosting on Netlify
After deciding that a CMS like WordPress adds more complexity than benefits, our search for a static hoster began. The requirements were plain and clear. The static hoster had to work great with GitHub, and we needed to be able to set up a deploy process that everyone in our company would be able to perform.
When Divshot (our host for bugtrackers.io) closed down after being acquired by Google, we switched to Netlify. We were quite satisfied with Netlify, so it was a natural and easy decision to choose it for our static landing pages as well.
Version Control with GitHub
Having GitHub already in place for a couple of other projects, we knew that GitHub would be the place for our source code management. Setting up a private repository for our new landing pages and connecting GitHub with Netlify was pretty straightforward.
Especially with a static site generator like Hugo, this workflow becomes even more powerful.
With the command hugo you configure Hugo on Netlify. You simply choose how your project should be built, and which directory should be hosted publicly.
Netlify will run your build command and deploy the result whenever you push it to GitHub.
In our case, the configuration look like this:
Repository: usersnap/landing-pages
Branch: master
Build cmd: cd src && npm install &&node_modules/bower install && node_modules/brunch/bin/brunch
build —production && cd .. && hugo
Public folder: /public(We do run additional tools for JavaScript and CSS preprocessing.)
Testing with Codeship and Usersnap
When it comes to testing and QA, most people seem to be busy avoiding that topic. ;)
With Codeship (for automated tests) and Usersnap (for manual tests), I think we’ve found the perfect tool chain that allows us to report bugs on the fly while having a safety net with automated tests.
So before our code gets hosted at Netlify, it will be tested, prepared and deployed with Codeship. This way, we’ve set up a staging and production environment for our static websites.
Once deployed, we use Usersnap (yes we eat our own dog food) for manual testing and QA or simply for discussing new ideas or for collecting feedback on any content.
All in all, the development workflow looks like this:
To get everybody in our team in the loop, we connected Codeship and Usersnap with Slack. New pushes show up in a dedicated Slack channel. Furthermore, developers get notified on new bug reports and feedback inside Slack.
Manage Bugs and Get the Job Done
Getting alerts and notifications on new bugs and errors is one thing. Prioritizing, assigning and fixing them is something else.
Our product and development team relies on a product roadmap, which we call a feature matrix. This feature matrix includes all features, bug fixes and change requests our team is working on.
Aside from the feature matrix, we also use a couple of internal tools to make communication and life in general easier. We like to call Slack our home, because it enables us to communicate with each other throughout the company.
For managing new projects and getting the job done, we rely on the product management tool Blossom, which gives us a good view of the bigger picture. For example, we have a Blossom board for our product, which gives us a great overview of the current state of new product requirements. We also have boards for all our static website projects.
What’s Next?
As a growing startup, we’re continually thinking of new ways to be more efficient. Adding new people to our development team also requires us to rethink how we work and to identify work that must be done differently.
With our new workflow, we found a way to be more productive in deploying new landing pages.
Looking into the future, we think DevOps is a topic that is becoming increasingly important for growing companies.
Outsourcing infrastructure to services like AWS or Azure became a de-facto-standard for building and scaling software.
Therefore, infrastructure operations are becoming less important – though we see an increasing need in resources, skills and tools for taking care of your software operations and services. And luckily, there are already various services out there which help you to speed up your DevOps.