preloader

Building website using static site generator Hugo. part.1

blog-image

When I decided to launch a new website, I considered what kind of method to build the site, and as a result, I decided to try a static site generator of the trend recently.

What is a static site generator?

Literally, it’s software that creates static site.

A static site is a site that simply displays a pre-generated web page. On the other hand, a site that generates and displays a web page on the spot in response to a request from a user (access with a browser etc.) is called a dynamic site (such as a blog service or CMS).

Problems with dynamic site and advantages of static site

Although current websites are mainly dynamic site, recently, static site have been reviewed. The reason is that there are problems with dynamic site.

  • Performance
    Since the program is run on the server and the web page is dynamically generated, the load on the server is inevitably high and it is easy to cause performance degradation.
  • Security
    For the same reason as above, it is difficult to maintain security because many attacks target vulnerabilities in server side programs.
  • Maintenance
    Appropriate maintenance is required not only for the server side program but also for the execution environment of the program, which causes extra management work in addition to the original management of the website.
  • Cost
    Since the server load tends to be high, a high-performance server is required, and a program execution environment (database, application server, etc.) is also required, which increases the cost.

On the other hand, for static site,

  • Performance
    Since it only displays the page generated in advance, the load on the server is low and it is very advantageous in terms of performance.
  • Security
    In the first place, the server side program itself does not exist, so there is no way to exploit the vulnerability. Although there is a risk of vulnerabilities in the web server itself, it can be said that it is extremely safe in terms of security.
  • Maintenance
    Since using a static site generator, the maintenance work associated with the generator will occur. However, the extra work is less than dynamic site.
  • Cost
    Most of the contents is static, so don’t need a high-performance server and database, etc, so the cost is low. There is also a hosting service that can be used free of charge for small sites.

The static site can easily solve the problems that the dynamic site has. Of course, static site also have their drawbacks (it is reason that dynamic site have become mainstream).

  • Interactive
    Since the web page is generated in advance, it is not possible to prepare pages that respond to user input, such as inquiry forms, search forms, and bulletin boards. If you need these functions, it is necessary to devise to such as using cloud services.
  • Turnaround
    Since the process of generating a web page in advance and uploading (deploying) it to the server is required, adding or updating a page cannot be reflected immediately. Larger sites can have a significant time lag.
  • Programming
    Knowledge of programming languages ​​such as HTML and JavaScript, and some knowledge of the development environment such as editors and shells are required. It may change with the spread of static site generator in the future, but at the moment it is difficult to build a static site without programming knowledge.

In other words, a static site generator is suitable for a site that is not very large, does not update very often, has few dynamic elements, and has human resources with programming knowledge (just like here).

Static site generator Hugo

I decided to use the static site generator for building and managing this site for the above reasons, but even with famous products alone,

  • Gatsby
  • Next
  • Nuxt
  • Hugo
  • Jekyll

I am wondering which one to choose, but this time I decided to adopt Hugo, which is rumored to be a very fast build.

Next time, I will post about installing Hugo and building the development environment.

comments powered by Disqus