Website management tools like WordPress leave your nonprofit’s website vulnerable to attack, hacking or being held hostage. A new type of website management tool known as Static Site Generators makes websites less vulnerable. In this article, we go into the technical how-to’s for the technically inclined. This is part two of a series. In part one of this series, we explained the pros and cons of both tools to help nonprofits make an informed choice.
Authored by John Kenyon & Max Pearl
Requirements for Creating Static Sites
If you’re ready to try out a static site generator, here is what you’ll need.
First, you’ll need a front-end website designer and/or website developer to create your website templates. These templates give the website its look and feel. If you have in-house expertise, and are doing this as a one-off project, for example, the person making the templates would have to learn the specific templating language used by the static site generator. If you are going to hire external talent, find someone with experience in creating templates for static site generators.
Creating static sites is different than old-school web page writing, in that none of the essential elements of a website (HTML, CSS or Javascript) need to be created manually each time – all of those element live in templates, and are dynamically put together with your plain (or simply marked up) text to create an individual website page or blog entry.
Second, you’ll need a place to host the HTML, CSS, Javascript, and media. Amazon S3 (Simple Storage System) is a great option – it’s very inexpensive (you will spend less than $3/month hosting a small site with 10,000 visits/month,) and many static site generators have built-in integrations with it. That said, any standard shared hosting provider would also work.
Static Site Generator Options
- Command-line options – Static Site Generators for Developers
These options are frameworks that create everything one needs for a site, making it easy to add templates, and generate websites based on text or markdown files. There are static site generators in every programming language. The most popular and well maintained static site generators include Pelican, which is written in Python, Hugo, written in Go, Jekyll, written in Ruby, and Hexo in written in Node.js.
The way these command-line options work is that one downloads the package (usually via the package manager in the language one is using) and then uses a quick-start to create the basic site and framework. Each project has different templating options, usually ones well supported in the programming language of choice.
These are really developer-focused tools. They do make creating static sites easy, but they are meant to be used by people who are comfortable at the command-line and know how to use (and potentially create) templates. That said, it would be possible for a developer to assist you in creating a workflow where you could update and add pages to the site without their assistance.
2. Static Site CMS
Static site content management systems are web or desktop interfaces that create static sites. These tools usually have the static site generators underneath a web interface. A developer would set one of these up for you, then you would use the graphical interface to add and edit pages.
A desktop static site CMS called “Publii” is worth looking at. It is easy to use, and works on Windows, Mac and Linux. It has several nice built in themes, and it is fairly straightforward to add your own theme.
Max’s move to Pelican
As we said in article one, Max moved his online presence of 4 WordPress sites to Pelican over the past year (2018). In two cases, he decided to start from scratch, and not import old posts from WordPress, but in two other cases, he used a Pelican utility to import old posts and pages.
First, Pelican is a python-based command line tool. If you are completely unfamiliar with running things at the command-line, Pelican is not the right tool to start with. However, even just a little bit of familiarity with the command line will make it fairly straightforward to build sites in Pelican. This guide is a great start. I used one of the themes available on github for Pelican (there are quite a few).
Editing new pages is easy – you can use a standard text editor like Notepad or Notepad++, or a MarkDown editor, like Typora or MarkdownPad.
I set up an S3 bucket with the domain name I was going to use. You have a couple of options on how to point your domain to this bucket. The URL for this bucket will be something like http://<bucket-name>.s3-website-us-west-2.amazonaws.com. You can use your present DNS host to point your current domain name to that URL. The disadvantage to this is in terms of search engine rankings. The best situation would be if all pages in your site live at http://<domain-name>.org, instead of at a CNAME pointer. To do that, you need to use Amazon’s Route 53 DNS service to host your domain’s DNS.
Once I took those steps, I added the AWS python command line interface to my system, which would allow for an easy upload to S3 via Pelican, and configured Pelican’s Makefile with the correct bucket. Then, once I created a page, all I needed to do was one command: “make s3-upload”.
Pelican import is a tool which allows the import of XML files into Pelican. You can use WordPress XML files, DotClear files, or RSS/Atom feeds (which would allow import from just about any CMS platform, such as Drupal or Joomla.) In general, it worked pretty well for WordPress files – but images need some special tending.
Try It
Static site generators provide an option to the usual suspects for managing a website without the high risk of hacking that exists with tools like WordPress. The best way to get to know static site generators is to give them a try. We have links to all of the tools mentioned below. We wish you happy generating!
Owlypixel
By the way, Angular didn’t have a static site generator (SSG) yet. But, it does now! They recently released their own static site generator called Scully. Since Angular is one of the most popular frameworks out there, I think Scully has all the prerequisites to be an awesome platform like Hugo or Jekyll.
It’s in alpha right now, but judging from the demos it’s pretty good.
So, if someone works primarily with Angular, well, now they can build fast and performant sites too.
John Kenyon
Max says:
Thanks for this info, indeed for folks who build with Angular, Scully looks to be an interesting choice. That said, I think the point of our posts was to find the best use cases for simple static sites that don’t need maintenance or server-side resources save storage. From what I understand, the JAMStack (which Scully is built on) includes APIs, and once you add server-side APIs, from my perspective, you might as well go ahead and deploy a modern framework like Flask, Django (or Node, if Javascript is your jam.)