Dynamic vs. Static Websites
Before we talk about static site generators, it's important to know what a static site is, and how it's different from a dynamic site. Understanding the difference can help you decide if a static site is the right choice for your project.
What is a dynamic website?
Has a back-end scripting language and database
May use a content management system (WordPress, Drupal, etc)
Allows for more user input & interaction
A dynamic website generally uses a back-end scripting language, like PHP or Ruby, along with a database like SQL. Dynamic sites might be built with a content managemeny system, like WordPress or Drupal. These sites may accept user input, have accounts, and do other things that require server-side scripting and a database. Dynamic sites are generally more interactive.
What is a static website?
No back-end scripting languages or databases
Displayed to user as it exists on the server
It doesn't use a back end scripting language, like PHP or Ruby, and it doesn't have a database. A static site is displayed to the user exactly as it exists on the web server, so it doesn't pull in content from a separate SQL database, or take user input (typically).
What is a static website generator?
Template language & markup language
Compiles into HTML/CSS files
Built-in server for testing
Many options - 181 on
staticgen.com Most popular is Jekyll
Performance & speed
Less technical maintenance
Less resource intensive
Simple hosting, e.g. Github pages
No WYSIWIG/editing environment
Static site generators are not without their disadvantages. They don't have an admin interface or an editing environment like a content management system does, so there's some technical skill required to update the site. There are tools being developed to improve on this, but at this point there's still some technical knowledge needed to do content updates.
Since some technical skill is required, there can be a bit of a learning curve involved with static generators. You need to understand some HTML and CSS, some command line and git basics, and if you want to do a lot of site customization, you'll need to learn the templating language that's being used.
Finally, static sites may be more challenging to manage the larger that they get.
Create your site
hugo new site demosite
Copy example site folder in theme into the main directory
cp -r themes/beautifulhugo/exampleSite/* .
Add your content
Content lives in
config.toml and the
Assets live in
static/, e.g. images, custom css files
Content structure may vary between themes
baseurl = "https://username.github.io"
DefaultContentLanguage = "en"
#DefaultContentLanguage = "ja"
title = "Beautiful Hugo"
theme = "beautifulhugo"
metaDataFormat = "yaml"
pygmentsUseClasses = true
pygmentCodeFences = true
#disqusShortname = "XXX"
#googleAnalytics = "XXX"
subtitle = "Build a beautiful and simple website in minutes"
logo = "img/avatar-icon.png"
favicon = "img/favicon.ico"
dateFormat = "January 2, 2006"
commit = false
rss = true
comments = true
Hugo content is written in Markdown
HTML can also be added
**Here is some bold text**
## Here is a secondary heading
Here's a useless table:
| Number | Next number | Previous number |
| :------ |:--- | :--- |
| Five | Six | Four |
| Ten | Eleven | Nine |
| Seven | Eight | Six |
| Two | Three | One |
Here's an image:
Overwrite layouts or CSS
Copy layout files into the layouts folder, following theme structure
Do not edit the theme files directly!
Build the public files
Move public files to server
Copy the contents of the public folder to the web server, or use