What is a static website?
No back-end scripting languages, databases, or CMS
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 - 182 on
staticgen.com Most popular is Jekyll (built in Ruby)
The website staticgen.com, which tracks static site generators, currently has 182 listed.
Performance & speed
Less technical maintenance
Less resource intensive
Simple hosting, e.g. Github pages, OLRC
No editing environment (but there are options)
No dynamic elements
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. At Scholars Portal, we've been using the editor built into Github for some basic content editing.
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. These may be barriers for and less technical people involved in the web development process.
Finally, because they are static, static sites don't have the option for dynamic elements, like user accounts or other kinds of interaction with a user.
Built-in multilingual functionality
Integrations (Google analytics, formspree, disqus)
So because there are lots of options, you might be wondering why I use Hugo, especially when Jekyll is the most popular. I like Hugo for a few reasons. For one, it's really fast to build the site, at less than 1 millisecond per page. This is especially nice when you're working on a bigger project.
I also like that I didn't have to install or worry about any dependencies. With some of the site generators I looked at, there were a lot of other things that needed to be installed, which I didn't have to worry about with Hugo.
Hugo also has some nice features. Multilingual is built-in, which is great when working on sites that are french and english. It's also really easy to add google analytics, contacts forms, and commenting systems if you want them.
Basic Hugo workflow feat. maps!
ocul.on.ca/topomaps | github.com/scholarsportal/historical-topos
Now I'm going to go through some of the Hugo workflow and pieces. I'll look at this through the lens of a recent website I built for the Ontario Council of University Libraries Historical Topographic Maps digitization project. This was part of a larger project done by the OCUL geo community to digitize a large collection of over 1000 maps.
snap package, homebrew, single binary download
Create the site
hugo new site topomaps
With a new site, we start by running the Hugo new site command. This creates the folders and files that a hugo site needs.
Add a theme
git clone https://github.com/kishaningithub/hugo-creative-portfolio-theme.git
Theme example site
Many themes have an example site that you can copy to get started
cp -r themes/hugo-creative-portfolio-theme/exampleSite/* .
Built-in development server
Configuration & Content
The configuration file (toml, yaml, or json) contains menus, metadata, etc.
Content lives in the
The config file can be a toml, yaml, or json file. This file is where you set things like the theme, the menu items, or the languages.
The data folder may contain data used in the site, like a json file for example.
baseurl = "http://ocul.on.ca/topomaps/"
theme = "hugo-creative-portfolio-theme"
# Enable comments by entering your Disqus shortname
disqusShortname = ""
# Enable Google Analytics by entering your tracking code
googleAnalytics = "UA-9010354-11"
canonifyURLs = false
defaultContentLanguage = "en"
defaultContentLanguageInSubdir = false
logourl = "http://ocul.on.ca"
style = "blue"
email = "email@example.com"
github = "https://github.com/scholarsportal/historical-topos"
email = "firstname.lastname@example.org"
languageName = "English"
title = "Historical Topographic Map Digitization Project"
languageCode = "en"
weight = 1
logo = "img/ocul.png"
logoalt = "Ontario Council of University Libraries"
name = "Home"
url = ""
name = "About the Project"
url = "about-project/"
name = "About the Maps"
url = "about-maps/"
name = "Collection Highlights"
url = "highlights/"
name = "Using the Maps"
url = "using-maps/"
name = "Full Collection"
url = "collection/"
name = "FAQ"
url = "faq/"
name = "Contact"
url = "contact/"
languageName = "Français"
title = "Projet de numérisation de la carte topographique historique"
languageCode = "fr"
weight = 2
logo = "img/cbou.png"
logoalt = "Conseil des bibliothèques universitaires de l'Ontario"
name = "Accueil"
url = "fr/"
name = "À propos du projet"
url = "fr/about-project/"
name = "Au sujet des cartes"
url = "fr/about-maps/"
name = "Points saillants de la collection"
url = "fr/highlights/"
name = "Utiliser les cartes"
url = "fr/using-maps/"
name = "Parcourir la collection au complet"
url = "fr/collection/"
name = "FAQ"
url = "fr/faq/"
name = "Nous contacter"
url = "fr/contact/"
Hugo can use a toml, yaml, or json file for configuration
Hugo content is written in Markdown, with added HTML
date = "2017-03-16"
title = "Using the Maps"
[Scholars GeoPortal](http://geo.scholarsportal.info) is an online geoportal that allows users to find and download geospatial data and maps. Using the GeoPortal and the built-in map index navigation, users can view map availability by location, and, add maps to the map viewer to explore online. The GeoPortal also supports features to layer multiple maps, and layer other data to visualize changes over time. Maps can be downloaded for any purpose and available in GeoTIFF or JPG formats. Follow the steps below to learn more about how to access and use the collection in the GeoPortal.
To search for maps directly by place name without entering the GeoPortal, go to [_Full Collection_](../collection/).
## Finding Maps
### Using the index
The first step to accessing the historical topographic map collection is to locate and use the index navigation aid. There are two sets of historical topographic map collections available in the Scholars GeoPortal, each with their own index map for navigation, one for the 1:63,360 and 1:25,000 scale map sets. Using the index navigation, you can view map availability by selecting the area of interest found on the map.
In Scholars GeoPortal, maps are available through an interactive online index display. To access the map indexes for different map scales, go directly to the Scholars GeoPortal:
- [1:63 360 Index Navigation](http://geo.scholarsportal.info/#r/details/_uri@=564032357&_add:true)
- [1:25 000 Index Navigation](http://geo.scholarsportal.info/#r/details/_uri@=847590539&_add:true)
You should now be presented with the index navigation aid to select maps of interest.
If you're not familiar with Markdown, it's pretty easy to learn, and there are also online editors that you can use. You can also add in HTML when there are things you want to do that Markdown doesn't support well (e.g. adding custom css classes)
Templates determine the layout of the site
Hugo templates use the Go templating language
With Hugo, we'll have lots of options to customize our site. We can override the existing css and layouts to change
Building the site
Build the public files, then copy them to the web server
Once we're happy with the website and our customizations, we build the site using the hugo command. This will generate a public folder, which has everything we need for our live site. We then put the contents of this folder onto our web server, and our site is up and running.