There are many static site generators available in a variety of programming languages that you can run on a computer or web server, such as Jekyll and Pelican. These types of tools will take your content, usually in the form of Markdown-formatted text files, and generate a complete HTML website that you can upload to your web server. The benefit of a static site over something like WordPress is that it doesn’t rely upon any server-side code and can be hosted almost anywhere.

There isn’t, however, one that I could find for iOS, so I set out to see if it were possible to create one in Workflow. While this should be considered more a “proof of concept” than anything else, I’m actually quite surprised how well this turned out and it’s very, very usable.

Here’s a working demo containing 50 randomly generated blog posts (hence the gibberish) and some sample pages.

Get the workflow.

###How it Works

When planning to build a static site generator in Workflow, I decided to build one around the concept of a blog. A Typical blog has posts, pages and an RSS feed, so I designed it to do the following:

  • Allow the user to set site’s title, URL, name of the author and footer text.
  • Get the contents of a directory of blog posts in Markdown-formatted text files, determine the date and title of each post and generate the necessary HTML pages.
  • Get the contents of a directory of pages in Markdown-formatted text files, determine the name of each page, build a navigation menu and generate the necessary HTML pages.
  • Create an index.html file using the site information, include the navigation menu and the contents of the most recent blog post. All previous blog posts are listed below with a link and date published.
  • Create an RSS feed that includes the 10 most recent blog posts.
  • Be a simple, yet decent-looking site with no additional assets, save for a generated CSS stylesheet containing the styling for the site, referenced by all HTML pages (the stylesheet also includes Normalize.css).

After running the workflow, a ZIP file is generated containing all of the HTML files and can be opened in an app like Transmit, the extracted contents of which can be uploaded to your web server.

###Structure

The structure of a generate site is:

  • index.html
  • {blog-post}.html
  • {page}-page.html
  • feed.xml

All of these are located within the same directory, so a “Hello World” blog post would be at hello-world.html.

###RSS Feed

Yes, there’s even an RSS feed. It’s actually an Atom 1.0 feed, and is generated at feed.xml.

###Text File Naming

The purpose of the workflow was not only to achieve the technical functionality of a static site generator, it needed to be usable by iOS standards. With that, formatting the text files is very simple and only requires a directory in Dropbox to be used that contain just two directories – “posts” and “pages”.

Blog posts simply need to be saved in Markdown-formatted text files in the “posts” directory with the date (in the format of YYYYMMDD) and title of the post or page as the file name, separated by two underscores. For example, a blog post titled “Hello World” published on the 1st Jan 2016 would be saved as:

20160101__Hello World.txt

Workflow splits the filename and uses the date for the published date of the post and the name as the title (hence the capitalisation).

For pages, you would simply omit the date and separator, and save to the “pages” directory:

About Me.txt

With that, no two blog posts or pages can have the same name, otherwise it will result in the older post overwriting the new one.

###Using the Workflow

Before using this workflow for the first time, there are just a couple of options to configure:

  • Specify the correct location of your root directory containing the “pages” and “posts” directories. The default is Workflow/static/, so blog posts would be located within Workflow/static/posts.
  • Ensure your blog posts are in the appropriate format (see below).
  • Update the workflow with your site name, URL and your name.

After the initial setup, the workflow can be run at any time and it will process all of the available blog posts and pages, create the necessary HTML and output a complete ZIP file.

When it comes to updating the site, you can simply run the workflow again and upload the contents of the ZIP file, overwriting any files there.

###Design

The design of the site is quite simplistic though have full control over the site’s CSS within the workflow. I designed the template, based upon this site, using Coda for iOS, and you can edit it however you see fit.

###Speed

The workflow isn’t particularly fast, though the demo site I created, containing over 50 blog posts, took about 90 seconds to generate. Again, this is a proof of concept but if you’re planning to use this, it’s not too slow.

###Bugs and Limitations

While I’ve done quite a bit of testing during my time working on this, it’s likely that there are going to be instances where the workflow just isn’t best suited for your needs, so it should be considered completely unsupported.

###Demo Content

To demonstrate how to use this workflow, I’ve made the sample content from the demo site available on Dropbox so you can get started and test it out.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s