"Git-based Jamstack" is the way to go for engineers who want to start a blog
Tags: hugo, gitlabpages, jamstack, tutorial
Published: 2022-07-23 12:48:00


If you are an engineer who wants to start a blog that is free, serverless, and fun to develop, Git-based Jamstack is the architecture for you. I will explain why, comparing it to other typical architectures.

## Comparison of service architectures for a serverless blogging environment

Below is a configuration comparison of various service architectures for a serverless blogging environment. Since I want to compare them based on the assumption that they are server management-less, I exclude the case of renting IaaS such as AWS to build a web system from scratch.

![Service architecture for serverless blogging environment : Components](https://ayaco.gitlab.io/zerogravity/en/docs/overview/jamstack/feature.svg)

### Hosting service only

This is a style in which you create your own web resources (all resources that are sent to the browser).

#### Advantages

On the browser side, it is 100% free.

#### Disadvantages

It is necessary to create everything from scratch, using development skills such as HTML/CSS/JavaScript, web design skills, and knowledge of SEO to make it visible to viewers. If you are a technical person, the skill aspect may not be a problem, but the ongoing cost of not only launching a blog but also maintaining/managing it makes it unsuitable for those who want to start a blog casually.

Also, there is no server processing and no way to interact with viewers.

### LAMPstack all-in-one service

This is a style of blogging in which the blog service is entrusted with the entire process from drafting to management/publishing. Many blog services such as [Wordpress.com](https://wordpress.com/), [Ameba](https://ameblo.jp/), [Hatena Blog](https://hatenablog.com/), etc., which are the most popular blog services in the world The following is a list of the most common

The definitions and overview of the terms are as follows

> LAMP (DeepL translation of [Wikipedia](https://ja.wikipedia.org/wiki/LAMP_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2%E3%83%90%E3%83%B3%E3%83%89%E3%83%AB)))
>
> LAMP is an acronym for the operating system Linux, the web server Apache HTTP Server, the database MySQL, and the scripting languages Perl, PHP and Python. It is a set of open source software suitable for building websites with dynamic web content.

Here, it should be taken broadly as an all-in-one service that dynamically generates web resources on the server side.

#### Advantages

This service is designed to make it easy for people without HTML/CSS/JavaScript or other development skills to create multifunctional, high-quality websites, allowing them to create commercial-level sites simply by writing articles using the editor in the management console.

You can dynamically renew the appearance of all pages on your site by simply changing the theme, and add interactive features that only dynamic generation can provide, such as feedback comments from visitors and the number of views given to the web resources.

Above all, the all-in-one service is well documented, and if you still have questions, you can contact support.

#### Disadvantages

The all-in-one service for all is less flexible.
The free version often includes advertisements and is restricted in terms of appearance.

In addition, response time tends to be slower because web resources are dynamically generated for each request. In many cases, the free version seems to have poorer server configuration than the paid version, and the slowness may be felt more.

Furthermore, the presence of a process that dynamically generates web resources and an internal management DB is said to pose a higher security risk compared to architectures that only place static web resources.

### Jamstack service set

This style combines technologies/tools/services familiar to developers to streamline each of the phases of manuscript creation/management/publishing.

The following is a definition and overview of the term.

> What is Jamstack (from an old article on [Jamstack.org](https://jamstack.org/))
>
> A modern architecture -
>
> Create fast and secure sites and dynamic apps with JavaScript, APIs, and prerendered Markup, served without web servers.

> What is Jamstack? ([Jamstack.org](https://jamstack.org/what-is-jamstack/))
>
> Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.
>
> The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before.

> Why Jamstack? ([Jamstack.org](https://jamstack.org/why-jamstack/))
>
> ▶ Security
>
> The Jamstack removes multiple moving parts and systems from the hosting infrastructure resulting in fewer servers and systems to harden against attack.
>
> Serving pages and assets as pre-generated files allows read-only hosting reducing attack vectors even further.
>
> ▶ Performance
>
> Page loading speeds have an impact on user experience and conversion. Jamstack sites remove the need to generate page views on a server at request time by instead generating pages ahead of time during a build.
>
> ▶ Developer Experience
>
> Jamstack sites can be built with a wide variety of tools. They do not depend on the proprietary technologies or exotic and little known frameworks. Instead, they build on widely available tools and conventions.

Compared to LAMPstack, the following differences exist

- Decomposition (decoupling) of the architecture, which was a monolith as a CMS service, into the following four parts
  - Git service to manage content that does not change dynamically, such as blog posts and other static content and view-generating program sources
  - Dynamic content service to manage dynamically changing items such as visitor comments
  - Build container service to run view generation programs and generate web resources from static/dynamic content
  - Hosting service to publish the generated web resources
- Web resources are not dynamically generated for each request, but are generated in advance and published (pre-rendering)

#### Advantages

The first point is that it improves scalability and productivity by breaking down (decoupling) services that were provided as an all-in-one offering into open technologies and services. It requires skills, but it is a PaaS set, with a lot of flexibility and no need to worry about advertisements.

The second point is to improve response speed and security strength by using a static site generator to pre-generate (pre-render) web resources that used to be dynamically generated for each request. Since only static web resources are published, security measures are simple and do not require advanced server configuration, so even free servers can be expected to provide sufficient speed.

Third, the developer experience is high. Programmers, who are always under severe pressure for quality and efficiency, have established the best tools/systems for themselves. The best experience is to be able to work in your usual, personalized environment, rather than a system that is easy for anyone to use.

#### Disadvantages

It is not suitable for sites such as Google Search, where there are no fixed pages and dynamic information display is always required. This is because it is not possible or practical to generate web resources in advance.

In addition, it is essential to have the technical skills to investigate and deal with uncertainties on one's own. Unlike an all-in-one service, it is necessary to identify what is happening with which service, Google it or look at the source, and solve the problem on your own. Asking questions to support does not guarantee that contributors or community volunteers will respond.
Also, it is basically in English.

#### Difference between Git-based and API-first

Static content management with Git is Git-based, and API-first with a headless CMS service. Git services include [GitHub](https://github.com/) and [GitLab](https://gitlab.com/), while CMS services include [Netlify CMS](https://www.netlifycms.org/) and [Contentful](https://www.contentful.com/), among others.

Headless CMSs are used in cases where you want to distribute the same content for various platforms, such as social networking sites and smartphone apps, as well as blogs.

A headless CMS may also be chosen in cases where you want non-technical people to contribute. Since Git is too hard for non-technical people, they would like to physically separate the submission process with a headless CMS managed by non-technical people and the view program managed by technical people using Git.

## Conclusion : Git-based Jamstack is recommended for engineers

Below is a graph of service architecture characteristics for a serverless blogging environment. Some of the plots are sensory, and some may be outliers depending on individual services, but I think the trend is something like this.

<!-- {{< figure src="jamstackmatrix.svg" >}} -->

For engineers who want to start blogging while also enjoying development, I recommend Git-based Jamstack, which can be customized as much as you like, depending on your own technical skills. API-first Jamstack is not bad, but I think it is overspecified if you just want to write your own blog.

## Postscript

Even if you are not confident in your skills, it is free of charge, so why not give it a try? It is better to get used to it than to learn it, and you will gradually learn as you use it.

I hope this site can provide useful information for such challengers.

![Service architecture for serverless blogging environment : Characteristics graph](https://ayaco.gitlab.io/zerogravity/en/docs/overview/jamstack/jamstackmatrix.svg)