Chapter 1: Introduction to Hugo
In this first chapter we will begin to cover static, dynamic, and GoHugo sites. We will introduce the differences between the various technologies, and next we will explain what Hugo is.
Difference between dynamic and static sites
Unlike dynamic sites, static sites have less or no dependence on databases, application servers and thus provides greater security, faster loading speed and better performance for end users. Maintaining and manually updating each page of a static site is cumbersome. Therefore, static site generators emerged where the developer writes the site functionality, the content editor publishes or updates articles, and finally, the website generator renders the content into HTML files and saves thousands of hours of development and maintenance. Of the 283 opensource static site generators listed on staticgen.com, Hugo represents a good portion of the generators currently used (in addition to being the engine of my blog!).
Static site generator
A static site generator or SSG is a compilation tool that produces static sites. These sites have pages created in advance and do not change often between user visits. An SSG usually takes the templates and adds the provided data to them to create the HTML pages. The pre-rendered pages are then hosted where users can access them. This is different from dynamic sites where a page is created when a user requests it.
SSGs simplify site development. In some cases, creating a site with an SSG is achieved in only a few steps and in a very short period of time. SSGs are great tools for new developers and those with limited experience who want to create sites without too much hassle. Many SSGs are resourceful and provide a wide range of site themes, common utilities such as comments and hosting integration, etc. Static sites involve far fewer moving parts and are easier to build, secure and maintain. They are fast since pages are already pre-rendered and are served as is, taking advantage of elements such as caching. Resizing static sites is easier than other sites with more complex infrastructure.
One solution would be to hand-write HTML and CSS files, but there are many disadvantages to this. With a handwritten HTML site, some of the same components on different pages have to be repeated. For example, you have to put the menu at the top of every page. If you change the menu, you have to change it on every page. A static site generator takes care of that for you. You will only have to change the menu in one place and SSG will do the rest.
Advantages of static site generators
Fast page loading
As mentioned earlier, the pre-rendered static HTML of static sites loads much faster than the pages of a dynamic site. Fast Web sites are really important for a good user experience and also for boosting your site in search engine rankings (see SEO and CLS parameters).
Security
Static sites by their very nature have no database and require no processing. This means there is no database to hack or platform to take advantage of. The majority of attacks occur by executing remote code that targets the website’s database: removing “pre-execution” from the equation also removes vulnerabilities such as SQL injection (SQLi), Cross-site Scripting (XSS), Remote Code Execution (RCE).
Most attackers target Web sites created with the most popular Open Source software, because once they find a vulnerability, they can scale their attack to all sites running on that software. By having a static site, you are removing the bulk of your attack surface, thus greatly limiting your chances of being hacked.
Performance
Because dynamic Web sites must process content and query the database to render pages, they use a lot of server resources. As a result, a spike in traffic can overload the server and cause the site to slow down to a painful crawl or crash. Because there are no dynamic scripts running on a static site and each page is pre-rendered, your site is less likely to go down when there is a spike in traffic.
Host your site anywhere
Because your site is made up entirely of HTML files, you can pretty much take them and upload them anywhere you want: Dropbox, Amazon, GitHub Pages, Google Cloud, a USB, inside your fridge…. pretty much anywhere.
No maintenance required
There are no plugins or software updates required to keep your site up-to-date and secure. The only maintenance required is in case you want to upgrade the generator to a later version with new features. Nothing, however, prohibits you from staying at an earlier version.
Write offline
Because static site generators do not require servers to update content, you do not have to be connected to the Internet when you update your site. You can save it offline and publish it later.
Quick content creation
Static site generators do not have a backend where you edit your content. Instead, you will use a simple text editor to edit files. Some developers find anything that clicks in a dashboard inefficient and prefer the efficiency of Markdown to WYSIWYG editors.
Simple content management
If you are not technical and are using WordPress, it can be difficult to interact with your data outside the backend area. Figuring out where your posts are stored or trying to retrieve them after a server failure can be a daunting task. Even worse, popular site builders like SquareSpace and Wix don’t even offer the functionality to export the site you’ve worked so hard to build. It’s your data, your work, your creativity, shouldn’t it be easy to own and control it?
Hugo
Hugo (also called GoHugo) is a static site generator and framework written in Go. It uses Go templates for its layouts. A key advantage that sets it apart from other SSGs is the speed with which it creates pages. It provides outstanding content management, is available on multiple OS platforms, supports taxonomies, offers index generation, supports pretty URLs, and can be hosted virtually anywhere. In addition to these features, it provides real-time reloading during development, supports several content type options, and has word count and read minutes features. These are just a few examples of the many features Hugo has to offer, and we will talk about them as the course develops.
Use cases
Below we will go over some use cases for using blogs.
Personal websites and blogs
Gone are the days of hiding from the Internet. In one way or another, anyone in the modern world who has some internet user as a friend or relative is already on the internet. Rather than trying to hide from it, the right approach would be to embrace the Internet and control one’s online impression rather than leaving it dependent on others.
Hugo is very suitable for getting started with a personal website. The big goals for personal sites are low maintenance, low cost, and the flexibility to show off your personal tastes. In this book we will see how we can build something with very low maintenance, almost free hosting and enough flexibility to customize as much as you want. Add to that great performance, the ability to upgrade when and where you want, full SEO support and a fast start.
You can grab any of Hugo’s publicly available themes to get started and be up and running with a decent website in minutes. You will be surprised at how many features are available without any customization. Once you are there, it is very easy to fork up the theme and start customizing it to leave your unique impression on the Internet.
Business Sites
Hugo fits teams that update content in parallel without any problem. Businesses whose core competencies are not building websites need something easy to maintain, with low costs and great performance. They also want flexibility and control. Hugo has all these features. It is well thought out and easy to understand for any sales team that can be added to website development on a short-term contract. Hugo provides very few instances where a developer could write bad code that would slow down the website. The entire mechanism is flexible enough to immediately add the custom page that the business needs without having to go through and rip out the entire website.
Hugo websites can be extended to provide features reserved for dynamic websites that update on the fly on a server. You will see in this course how we can build low-cost, low-maintenance features such as shopping carts and payment screens while keeping the rest of the Web site statically managed.
Documentation
Hugo has great support for reading structured data from a file on disk such as a CSV or JSON and then creating a Web site from it. You can still apply your own custom themes. It has built-in support for syntax highlighting and can scale up to a very large number of pages very easily. This makes it very suitable for writing custom websites that could read from API documents and prepare a neatly formatted version of the specification.
Let us now proceed to install Gohugo to start creating an example blog.
