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:


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
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.
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.
3. Cost is low.
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.
5. Static website can be developed in short time when compared to dynamic one.
6. The theme of website and content of website are fixed.
7. With the help of markup language static websites loads quickly
8. Static website provides information to their clients like an organization website.
9. Static website directly run on browser and does not require other internet application language. This website can be created from HTML and CSS.
10. Static websites are easy to develop and a experienced person can develop it.
Dynamic Website
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. 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 are higher than static website.
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. 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. Website designs and content can be changed on runtime
7. Dynamic websites delays to load because of more processing time.
8. Dynamic website is where content changes frequently. Like a Electronic-commerce site etc.
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. 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:


Disadvantages of a static website:


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.