Static Site Generators

Introduction:

A static site generator is a program that takes content, webpage design templates and configuration files and based on them generates a directory tree of HTML and other files that represent a website. The resulting website is static in the sense that it does not require CGI or other server-side scripts to serve its content and could as well be distributed as a ZIP file with no HTTP server at all. The content that a static site generator processes into HTML is usually marked up with a lightweight markup language like Markdown.

It can also be defined as a program, that generates an HTML website as an output. This HTML website is then served through your web server, just like the olden days. This is usually achieved using template languages and code that separates out the layout of the website from its content and styles.

One popular modern example of a static site generator would be Jekyll . It is written in Ruby.


How does SSG Work:

The proposition of a static site is to shift the heavy load from the moment visitors request the content to the moment content actually changes. Going back to our news kiosk metaphor, think of a scenario where it’s the news agencies who call the kiosk whenever something newsworthy happens.

The kiosk operators and scribbles will then compile, format and style the stories and produce a finished newspaper right away, even though nobody ordered one yet. They will print out a huge number of copies (infinite, actually) and pile them up by the store front.

When customers arrive, there’s no need to wait for an operator to become available, place the phone call, pass the results to the scribble and wait for the final product. The newspaper is already there, waiting in a pile, so the customer can be served instantly.

And that is how static site generators work. They take the content, typically stored in flat files rather than databases, apply it against layouts or templates and generate a structure of purely static HTML files that are ready to be delivered to the users.

When we’re setting up our server, we take the static site created by static site generator and deploy it to our server. When a user requests a page on our static site, the request is sent to our web server (Nginx), which then finds the matching file and sends it back to the user.


When do you use SSG:

  • Static generator has the following benefits:

    • Flexibility

    • Better Performance

    • Fewer Server-side Dependencies

    • Improved Reliability

    • Superior Security

    • Client Control Considerations

    • Version Control and Testing


List of Static Site Generators:

 

Jekyll

Middleman

Hugo

Hexo

Gatsby

Nuxt

MkDocs

Pelican

Metalsmith

Spike

Language

Ruby.

Ruby.

Go.

JavaScript.

JavaScript.

JavaScript.

Python.

Python.

JavaScript.

JavaScript.

Template

liquid.

ERB and Haml.

Go.

EJS and Pug.

react.

Vue.

Jinja 2.

Jinja 2.

Handlebars and Any JS.

Reshape.

Start up new project

jekyll new my_website

middleman init my_website

hugo new my_website

hexo init my_website

gatsby new my_website

vue init nuxt/starter [PROJECT_NAME]

mkdocs new my-project

mkdir -p ~/projects/yoursite

Metalsmith(dirname).source('sourcepath') );

$ spike new test-project

Documentation

Click here

Click here

Click here

Click here

Click here

Click here

Click here

Click here

Click here

Click here


Static Website vs Dynamic Website:

Static Website

Dynamic Website

1. A static site is one that is usually written in plain HTML and what is in the code of the page is what is displayed to the user.

1. A dynamic site is one that is written using a server-side scripting language such as PHP, ASP, JSP, or Coldfusion. In such a site the content is called in by the scripting language from other files or from a database depending on actions taken by the user.

2. Flexibility is the main advantage of a static site - every page can be different if desired, to match the layout to different content, and the designer is free to put in any special effects that a client may ask for in a unique way on different pages.

2. The main advantages of dynamic sites are that by connecting them to databases you can easily pull in information in an organised and structured way to create product pages or categories of related products sorted in a variety of different ways depending on how the user wants to view them.

3. Cost is low.

3. Cost are higher than static website.

4. The word static refers to something that is fixed, that doesn’t move or change in any way. This is enough to understand what a static page is all about. No elements on this page are changed when accessing it. Static websites are basic pages that require simple code and design elements to create. “Static” also refers to the website being fixed in terms of page numbers. A fixed number of pages are delivered just the way it is designed and stored.

4. Conversely, the word dynamic refers to elements that are continuously changing, interactive, and functional. Instead of being simply informational, dynamic websites include aspects that are characterized by interactivity and functionality. They are more complex in terms of building and design, but they are also more versatile.

5. Static website can be developed in short time when compared to dynamic one.

5. Dynamic designs are integrated with high-end programming that enable in making changes easily. So it requires more time when compared to static one.

6. The theme of website and content of website are fixed.

6. Website designs and content can be changed on runtime

7. With the help of markup language static websites loads quickly

7. Dynamic websites delays to load because of more processing time.

8. Static website provides information to their clients like an organization website.

8. Dynamic website is where content changes frequently. Like a Electronic-commerce site etc.

9. Static website directly run on browser and does not require other internet application language. This website can be created from HTML and CSS.

9. Dynamic website run the application on server and the result will be display on webpage. So this requires server application language like PHP, JSP etc.

10. Static websites are easy to develop and a experienced person can develop it.

10. Dynamic websites it cannot be developed easily because it require qualify developers to create it, manage it, test it and maintain security of application and database.


Advantages of a static website:

  • Provide improved security over dynamic websites (dynamic websites are at risk to web shell attacks if a vulnerability is present).

  • Improved performance for end users compared to dynamic websites.

  • Fewer or no dependencies on systems such as databases or other application servers.

  • Cost savings from utilizing cloud storage, as opposed to a hosted environment.


Disadvantages of a static website:

  • Dynamic functionality must be performed on the client side.

  • The main problem with any static site appears when you wish to update the content. Unless you are conversant with HTML and the design methods used in the site then you have to go back to the designer to have any content changes made. This may be perfectly ok when a new page is required which needs design input, but if all you want to do is change some text then it can be a nuisance for both client and designer.

  • The second main problem is scalability. If you wish to sell products on your site and you have a lot of them then you may have to construct individual pages for each one, which can take considerable time, effort and cost.

  • Costs - there are ongoing costs for updating the content.


Future of Static Site Generators:

Static Site Generators will become more user-friendly and perhaps ironically they will become less “static”.

User-friendly:

The vast majority of SSGs tend to be “made by developers for developers”. Indeed, many are used from the command line, use Git source code management system to trigger website builds, and use markdown as the input for content.

Typical non-technical users stay away from the command line as much as possible. Yet the benefits of static site generators that developers enjoy apply to non-technical users too.

These benefits include: security, performance, cost-effectiveness, and site-portability.

All these benefits are even more valuable to non-technical users:

A non-technical user should never mess with a monolithic CMS that requires expert knowledge and constant updates and monitoring to make secure.

A non-technical user should not be faced with a challenging migration process if they choose to move their site to a different host. If they are on SquareSpace, they are facing an epic battle to move elsewhere. With static sites, it’s just a matter of deploying to a different storage provider and changing DNS settings. With a little help they can do it.

A static site created in such a system could be easier to set up and update, while retaining all the benefits of the developer friendly static site generators. I think you will see this happen soon.

Less Static:

The easiest knock on static site generators is precisely the fact that they produce static sites.

One way to make a site more dynamic is to use a 3rd party service, like Disqus for example that creates a dynamic comments section for each article. There are also 3rd party services for sending the data from a form to a database, and a large number of additional capabilities.


Static Site Examples:

We have our own static sites:

Stocky - A photography theme - https://equal-kilt.cloudvent.net/


Glossary:


What does a static page mean:

A static site generator holds a collection of static web pages in html and markdown formats

A static web page also called a flat page or a stationary page is a web page that is delivered to the user’s web browser exactly as it is stored, without the help of any web application.

Static web pages are often HTML documents stored as files in the file system and made available by the web server over HTTP. Static web pages are suitable for the contents that never or rarely need to be updated.