When we see the working of JAMSTACK, it is understood that a static site generators is an essential part of the working. Static site generator takes the content, add templates and plugins to generate a view that can be served up to the site. The greater aspect is compared to traditional websites, the view doesn’t have to wait for the database and server response, it prerenders and doesn’t have to wait each time a request is sent.
Here are the best static site generators to consider
Table of Contents
NEXTJS
Build on react server site rendering and static site rendering. You can use NEXT JS to ease out the complex handling like middleware, routing etc. It can have static websites with just a generate command and you will be able to see static pages prerendered.
HUGO
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.HUGO as the name states is built on the GO language.
Hugo caches all HTML files and renders on your computer. You can check the files locally before rendering to the site, hosting it to the HTTP server. HTML files aren’t generated dynamically which has many benefits.
The most praiseworthy is performance. HTTP servers are efficient at utilizing static files. You can effectively serve pages with a fraction of the memory and computation compared to what of a dynamic site.
Starting with HUGO
1. Go ahead and install HUGO
You can either go to the HUGO repository and follow the procedure from there or you can install it from Homebrew.
brew install hugo 2. Create a new directory and skeleton site
hugo new site website
cd website 3. You can create your static page by simply creating an HTML file or typing in the command
hugo new myfile.md with this, you can easily add new static pages and run them to the server without having it compiled for each request and waiting for a response.
export default {
target: 'static'
} Scully
Scully is gaining a lot of attention due to the steadfastness. JAMSTACK and Angular are developing together with combine efforts and collaborations. A static site generator for Angular application Scully was introduced.
Let’s get right into it and see how Angular uses Scully to generate static pages.
1. Create your Angular app
Type in the following command in Angular cli
ng new scully-snipcart go with yes for completion and then visit app.component.html
2. Adding content and style
Now you can add layouts, themes, other services, and components to how you want your application to be built.After all the content and themes are completed you can go ahead and run your application.
Scully would take all the content and styling and create static pages which would be HTML and CSS. You didn’t have to code each and single thing and your HTML pages were created.
Scully uses machine learning to generate HTML and CSS according to the content and style provided by you.
