Developing a Static Site Generator Workflow

Static website generator: a powerful tool to improve the workflow of landing pages

Core points:

• Static website generators such as Hugo offer many advantages, including full control over content and web design, speed improvements and flexibility enhancements. Unlike content management systems such as WordPress builds pages every time a visitor requests, the static website generator builds web pages when creating or editing new content.
• Migrating to a static website generator can simplify hosting process. Usersnap successfully uses Netlify, which works well with GitHub and provides a simple deployment process.
• Using GitHub for source code management, automated testing with Codeship, and manual testing with Usersnap creates powerful development workflows for static websites. This combination of tools allows efficient error reporting and automated testing to ensure a high-quality, error-free environment.

In this article, Usersnap's technical marketer Thomas Peham explains how and why static website generators can help with your landing page workflow.

No one likes to find bugs. Worse, no one likes to find bugs when buying digital products. That's why, as a company that provides web-based bug tracking tools for tens of thousands of users, we have to ensure a bug-free environment. As our web pages grow—and therefore the number of lines of code—we are motivated to find ways to improve internal workflows. In this article, I want to introduce you to the journey we have been doing over the past few months to change our tool stack and how we generate and deploy new landing pages.

Usersnap.com's new tool stack

As soon as we decide to improve the internal workflow of the usersnap.com landing page, there are many questions that need to be answered. Which content management system to use? What software tools? There are more questions. We ended up using Hugo as the main website framework for usersnap.com. This decision led to a radical change in the way the team collaborates and develops.

Advantages of Static Website Generator

So what role does Hugo play in our website settings? Hugo is an open source static website generator. Static website generator builds web pages when you create new content or edit content. Instead, content management systems like WordPress build a page every time a visitor requests (although there are various caching techniques available). There are many benefits to choosing a static website generator like Hugo instead of a system like WordPress. And these advantages are not just about performance. Static web pages created with Hugo give you 100% control over your content and web design. If you plan to start a website with different layouts and content types, it makes sense to consider using a static website generator instead of a content management system because you will be faster and more flexible. Also, you don't need to know all the features of a particular CMS, but you just need to know the basics of HTML and CSS. Hugo was originally launched by Steve Francia as a side project. Today, the Hugo community has more than 165 contributors, 35 topics and thousands of users. We have used Hugo in our side project bugtrackers.io, and we know it is also the framework we want to use for usersnap.com.

Static Hosting on Netlify

After deciding that CMS like WordPress brings more complexity than benefits, we started looking for static hosts. The requirements are simple and clear. Static hosts must work perfectly with GitHub, and we need to be able to set up a deployment process that everyone in the company can perform. When Divshot (our host in bugtrackers.io) is shut down after being acquired by Google, we switch to Netlify. We are very satisfied with Netlify, so choosing it as our static landing page is also a natural and simple decision.

Use GitHub for version control

Since we have used GitHub in several other projects, we know GitHub will be the place for our source code management. It's very easy to set up a private repository for our new landing page and connect GitHub to Netlify.

Especially for static website generators like Hugo, this workflow becomes even more powerful. Using the command hugo, you can configure Hugo on Netlify. You just have to choose how the project is built and which directory should be publicly hosted. Whenever you push it to GitHub, Netlify runs your build commands and deploys the results. In our example, the configuration looks like this:

<code>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</code>

(We do run other tools for JavaScript and CSS preprocessing.)

Test using Codeship and Usersnap

When it comes to testing and quality assurance, most people seem to be busy avoiding this topic. ;) Using Codeship (for automated testing) and Usersnap (for manual testing), I think we found the perfect toolchain that allows us to report bugs at any time while having an automated testing safety net. So, before our code is hosted on Netlify, it will be tested, prepared and deployed by Codeship. In this way, we set up a staging and production environment for static websites. Once deployed, we use Usersnap (yes, we use our own products) for manual testing and quality assurance, or just discuss new ideas or collect feedback on anything. In short, the development workflow is as follows:

To get everyone on the team involved, we connected Codeship and Usersnap to Slack. New pushes will be displayed in a dedicated Slack channel. Additionally, developers will receive notifications in Slack about new bug reports and feedback.

Manage bugs and get the job done

Receiving alerts and notifications about new bugs and errors is the same thing. Prioritizing, allocating, and fixing them is another matter. Our products and development teams rely on the product roadmap, which we call the functional matrix. This feature matrix includes all the features, bug fixes and change requests that our team is working on. In addition to the functional matrix, we also use some internal tools to simplify communication and life. We like to call Slack our home because it allows us to communicate with each other throughout the company. To manage new projects and get the job done, we rely on the product management tool Blossom, which allows us to have a good understanding of the bigger picture. For example, we have a Blossom board for our products, which allows us to have a good understanding of the current status of new product requirements. We also have a blackboard for all static website projects.

What's next?

As a growing startup, we keep thinking about new ways to improve efficiency. Adding new employees to our development team also requires us to rethink how we work and identify the work that must be done differently. Through our new workflow, we have found a way to be more efficient in deploying new landing pages. Looking ahead, we believe DevOps is becoming increasingly important for developing companies. Outsourcing infrastructure to services like AWS or Azure has become the de facto standard for building and scaling software. As a result, infrastructure operations are becoming less important – although we see a growing demand for resources, skills and tools that handle your software operations and services. Fortunately, there are already various services that can help you speed up DevOps.

(The rest of the article is FAQ and has been covered in previous replies, duplicate content is omitted here)

The above is the detailed content of Developing a Static Site Generator Workflow. For more information, please follow other related articles on the PHP Chinese website!