Introduction
- A static site is a collection of pages contained in basic HTML files. You could hand-write these in a text editor, but managing assets and repeated elements such as navigation can become problematic.
- A content management system (CMS) stores page content in a database and provides facilities to edit and apply themes. Management becomes easier at the expense of flexibility, performance, server requirements, security and backups.
- A static site generator (SSG) is a compromise between using a hand-coded static site and a full CMS. You generate an HTML-only website using raw data (such as Markdown files) and templates. The resulting build is transferred to your live server.
Ref.
(post 2016)
- Un site statique est une collection de pages contenues dans des fichiers HTML de base. Vous pouvez écrire à la main ces pages dans un éditeur de texte/Latex->HTML, mais la gestion des acteurs et des éléments répétés tels que la navigation peut devenir problématique.
- Un système de gestion de contenu (CMS) stocke le contenu de la page dans une base de données (et donc il faut un serveur et une infrastructure adaptés) et fournit de grandes facilités pour modifier et appliquer des thèmes. La gestion devient plus facile au détriment de la flexibilité, des performances, des exigences du serveur, de la sécurité et des sauvegardes.
- Un générateur de site statique (SSG) est un compromis entre l'utilisation d'un site statique codé à la main et un CMS complet. Vous générez un site Web HTML uniquement en utilisant des données brutes (comme des fichiers Markdown) et des modèles. La compilation résultante est transférée à votre serveur en direct.
Tools
Popular static site generators include Jekyll, Pelican, Hugo and Metalsmith — see StaticGen for many more options.
Jekyll
Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites. Think of it like a file-based CMS, without all the complexity. Jekyll takes your content, renders Markdown and Liquid templates, and spits out a complete, static website ready to be served by Apache, Nginx or another web server. Jekyll is the engine behind GitHub Pages, which you can use to host sites right from your GitHub repositories.
Jekyll is flexible and supports front-end frameworks such as Bootstrap, Semantic UI and many others.
Jekyll sites can be published using cloud-based CMS software such as CloudCannon, enabling content editors the ability to modify site content without having to know how to code.
Philosophy
Jekyll does what you tell it to do — no more, no less. It doesn't try to outsmart users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content.
Sick of dealing with hosting companies? GitHub Pages are powered by Jekyll, so you can easily deploy your site using GitHub for free—custom domain name and all.
https://github.com/jekyll/jekyll (>6200forks @ jan 2017)
Pelican
Pelican is a static site generator, written in Python.
- Write content in reStructuredText http://docutils.sourceforge.net/rst.html or Markdown using your editor of choice
- Includes a simple command line tool to (re)generate site files
- Easy to interface with version control systems and web hooks
- Completely static output is simple to host anywhere
Features
Pelican currently supports:
- Chronological content (e.g., articles, blog posts) as well as static pages
- Integration with external services (e.g., Google Analytics and Disqus)
- Site themes (created using Jinja2 templates)
- Publication of articles in multiple languages
- Generation of Atom and RSS feeds
- Syntax highlighting via Pygments
- Importing existing content from WordPress, Dotclear, and other services
- Fast rebuild times due to content caching and selective output writing
https://github.com/getpelican/pelican (>1300forks @ jan 2017)
Hugo
Hugo is designed to work the way you do. Organize your content however you want with any URL structure. Group your content using your own indexes and categories. Define your own metadata in any format: YAML, TOML or JSON. Best of all, Hugo handles all these variations with virtually no configuration. Hugo just works.
Hugo is a static HTML and CSS website generator written in Go. It is optimized for speed, easy use and configurability. Hugo takes a directory with content and templates and renders them into a full HTML website.
Hugo relies on Markdown files with front matter for meta data. And you can run Hugo from any directory. This works well for shared hosts and other systems where you don’t have a privileged account.
Hugo renders a typical website of moderate size in a fraction of a second. A good rule of thumb is that each piece of content renders in around 1 millisecond.
Hugo is designed to work well for any kind of website including blogs, tumbles and docs.
Currently, we provide pre-built Hugo binaries for Windows, Linux, FreeBSD, NetBSD and OS X (Darwin) for x64, i386 and ARM architectures.
https://github.com/spf13/hugo (>2100forks @ jan 2017)
Metalsmith
An extremely simple, pluggable static site generator.
The package exposes both a JavaScript API, and CLI in case you’re used to that type of workflow from other static site generators. To see how they’re used check out the examples (https://github.com/metalsmith/metalsmith/tree/master/examples)
The task of a static site generator is to produce static build files that can be deployed to a web server. These files are built from source files. Basically for a static site generator this means:
- from a source directory read the source files and extract their information
- manipulate the information
- write the manipulated information to files into a destination directory
Metalsmith is built on this reasoning. It takes the information from the source files from a source directory and it writes the manipulated information to files into a destination directory. All manipulations, however, it exclusively leaves to plugins.
Manipulations can be anything: translating templates, transpiling code, replacing variables, wrapping layouts around content, grouping files, moving files and so on. This is why we say »Everything is a Plugin«. And of course, several manipulations can be applied one after another. Obviously, in this case the sequence matters.
Why is Metalsmith extremely simple?
- When all manipulations are performed by plugins, the only thing Metalsmith has to do in its core is to provide for an underlying logic of actually how manipulations are dealt with and for a defined interface for the plugins. To achieve this, we only needed around 400 lines of code — have a look at the source yourself. We believe this is rather simple.
- For manipulations Metalsmith uses a very clever, but extremely simple idea. All source files are initially converted into JavaScript objects with the usual {property: property value} pairs. These {property: property value} pairs contain information on the original file itself (such as its birthtime or path) and on its content. The JavaScript object for each file is then supplemented with all variables either specified in the front-matter of the file or elsewhere. The manipulations performed by the plugins are now nothing else then modifications applied to the JavaScript objects either by changing the properties or the property values.
- Breaking down Metalsmith into a core and many plugins has several advantages. It reduces complexity. It gives the user the freedom to use exactly only those plugins he or she needs. Furthermore, it distributes the honor and the burden of maintaining the Metalsmith core and its plugins onto the Metalsmith community. With this approach we hope to keep the Metalsmith environment pretty up-to-date.
- Writing plugins itself is also rather simple. The plugin-interface is easy to understand and most plugins are also rather short.
- Every site needs JavaScript anyway. Just like the popular task runners gulp or grunt Metalsmith is programmed in JavaScript. So, you do not have to rely on a further language such as Ruby, Python or Go. This also helps to keep your workflow simple.
HOW DOES IT WORK IN MORE DETAIL?
Metalsmith works in three simple steps:
Read all the files in a source directory and transform them into a JavaScript object of JavaScript objects.
Invoke a series of plugins that manipulate these objects.
According to the information contained in the resulting objects write them as files into a destination directory
Every file in the source directory is transformed into a JavaScript Object. For instance,
my-file.md:
---
title: A Catchy Title
draft: false
---
An unfinished article...
becomes
{
'relative_to_sourcepath/my-file.md': {
title: 'A Catchy Title',
draft: false,
contents: 'An unfinished article...',
mode: '0664',
stats: {
/* keys with information on the file */
}
}
}
where the content of the file is always put into the property value of contents. For illustration purposes only we display the value of contents as a string. Technically, however, the property value of contents is realised as a new Buffer('...') object, in order to also handle straight binary data well. mode contains the permission the file has and stats has more technical information on the file such as size or birthtime. Furthermore, the file is also parsed for YAML-front-matter information, which will then also be put into the JS Object. Thus, we finally have an JavaScript object of JavaScript objects. This encompassing JavaScript object is usally called files since it contains all the JavaScript objects that represent the files.
https://github.com/metalsmith/metalsmith (>200forks @ jan 2017)
middlemanapp
used by DataCite
Why Middleman?
The last few years have seen an explosion in the amount and variety of tools developers can use to build web applications. Ruby on Rails selects a handful of these tools:
- Sass for DRY stylesheets;
http://sass-lang.com/ (CSS with superpowers)
https://github.com/sass (>1200forks @ jan 2017) - CoffeeScript for safer and less verbose javascript
- Multiple asset management solutions, including Sprockets
https://github.com/rails/sprockets
Sprockets is a Ruby library for compiling and serving web assets. It features declarative dependency management for JavaScript and CSS assets, as well as a powerful preprocessor pipeline that allows you to write assets in languages like CoffeeScript, Sass and SCSS. - ERb & Haml for dynamic pages and simplified HTML syntax
http://ruby-doc.org/stdlib-2.0.0/libdoc/erb/rdoc/ERB.html
http://haml.info/
https://github.com/haml/haml (>500forks @ jan 2017)
Haml (HTML abstraction markup language) is based on one primary principle: markup should be beautiful. It’s not just beauty for beauty’s sake either; Haml accelerates and simplifies template creation down to veritable haiku.
Unspace Interactive and several other professional Rails shops use Haml exclusively for their projects, valuing its focus on cleanliness, readability, and production speed.
Haml is a markup language that’s used to cleanly and simply describe the HTML of any web document without the use of inline code. Haml functions as a replacement for inline page templating systems such as PHP, ASP, and ERB, the templating language used in most Ruby on Rails applications. However, Haml avoids the need for explicitly coding HTML into the template, because it itself is a description of the HTML, with some code to generate dynamic content.
Haml also embeds some code that gets executed during runtime and generates HTML code in order to provide some dynamic content. In order to run Haml code, files need to have .haml extension. These files are similar to .erb or eRuby files which also help to embed Ruby code while developing a web application. While parsing coding comments Haml uses the same rules as Ruby 1.9 or later. Haml understands only ASCII compatible encodings like UTF-8 but does not understand UTF-16 or UTF-32, since these are not compatible with ASCII. Haml can be used in command line, as a separate Ruby module or can be used in a Ruby on Rails application making Haml suitable for a wide range of applications.
https://en.wikipedia.org/wiki/Haml
Haml =also an add-on for Ruby on Rails - Ruby on Rails, or simply Rails, is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pages. It encourages and facilitates the use of web standards such as JSON or XML for data transfer, and HTML, CSS and JavaScript for display and user interfacing. In addition to MVC, Rails emphasizes the use of other well-known software engineering patterns and paradigms, including convention over configuration (CoC), don't repeat yourself (DRY), and the active record pattern.
In August 2006, the framework reached a milestone when Apple announced that it would ship Ruby on Rails with Mac OS X v10.5 "Leopard", which was released in October 2007.
https://en.wikipedia.org/wiki/Ruby_on_Rails
Middleman gives the stand-alone developer access to all these tools and many, many more. Why would you use a stand-alone framework instead of Ruby on Rails?
These days, many websites are built with an API in mind. Rather than package the frontend and the backend together, both can be built and deployed independently using the public API to pull data from the backend and display it on the frontend. Static websites are incredibly fast and require very little RAM. A front-end built to stand-alone can be deployed directly to the cloud or a CDN. Many designers and developers simply deliver static HTML/JS/CSS to their clients.
Middleman is built on Ruby and uses the RubyGems package manager for installation. These are usually pre-installed on Mac OS X and Linux. Windows users can install both using RubyInstaller. For windows RubyInstaller-Devkit is also required.
Running one command, bundle exec middleman build, exports the site in a production-ready format. Choose from open source deployment solutions to get your site live.
https://github.com/middleman/middleman (>550forks @ jan 2017)
benefits of SSG
SSGs appear to offer the benefits of both CMS and static worlds, but they will not be suitable for every project
I am obliged to you for sharing your guidance here. I am certain that this might benefit many seekers. Thank you the share. Keep writing.
ReplyDeleteWebsite Design Agency | Website design company in Lucknow