My static website
08 Aug 2016OK, everytbody does it, even I do it: Static websites. It’s fast, it’s safe, it does the computing where it belongs (as long as you don’t need fancy customization, why should a server think about what the page looks like at read time?). This very site is static (built with JBake and hosted on Github). It was fun setting it up, it works great - but I couldn’t explain my mother how to use it or how to publish some content on it. And that’s what a CMs should be about: It has to be usable in the first place.
Therefore I need anotrher setup. I plan to have a look at some different static web site systems, and set up a list of criteria against which I plan to test the different generators…
Criteria
- Themes
- Many
- Beautiful
- Responsive
- Easy to write
- Editor with preview
- Easy handling and referencing of pics
- Pictures in preview
- Videos
- Tables
- Code with syntax highlighting
- Automated checking of consistency, i.e. the generated website is correct, complete, the pointers don’t point to Nirwana…
- Being able to create an Accelerated Mobile Page
- Functional features & pages
- Tags, tag pages, tag cloud (could also be an extension)
- Publishable on Github (it’s very fast, free and reliable)
- Make website private. i.e. accessible only for registered members
- Publish by email
- Comment by email
- Push news to registered users by email
- Resize pics for fast delivery
- Easy to create new themes, Themes should be just CSS
- Based on other HTML, i.e. Bootstrap themes
- Extensible architecture
- Can add stuff, i.e. Picture resizing process
- At least a programming language I know a bit - or that I am curious to learn (that basically boils it down to Java and JavaScript)
- The generated HTML should be as simple as possible. All formatting sits in the CSS
Generators
When scanning the literature (and Github). this is the list of generators rthat I should probably have a look at:
- Jekyll - Done
- Harp JS - Done
- Hugo - Done
- Metalsmith - Done
- Nikola - Done
- Octopress - Done
- Hexo - Done
- Hyde - Done
- Pelican- Done
- Nanoc - Done
- Middleman - Done
- Lektor - Done
- Gatsby - Done
- Expose - Done
- Wintersmith - Done
- Doc pad - Done
- kirby - Done
Evaluation Matrix
| Generator | Programming language | Themes | Formats | Comment |
|---|---|---|---|---|
| Jekyll | Ruby – | Lots ++ | Markdown, Textile, Liquid ++ | |
| Harp JS | NodeJS ++ | Some 00 | Markdown, EJS, Jade, LESS, Stylus… ++ | |
| Hugo | GO – | Some 00 | Markdown, asciidoc, reStructure ++ | |
| Metalsmith | Node JS – | Looks very flexible. Also see http://dbushell.com/2015/05/11/wordpress-to-metalsmith/ | ||
| Nikola | Python – | Few – | reStructuredText, Markdown, | Looks just so so… |
| Octopress | Python – | Some 00 | Is just a package around Jekyll. | |
| Hexo | Node JS ++ | Some 00 | Markdown, different flavors, Jekyll Plugins ++ | Looks very flexible, uses standard template engines (EJS, Jade, Swig…), allows to integrate scripts and plugins. ++ |
| Hyde | Python – | Little – | ||
| Pelican | Python – | |||
| Nanoc | Ruby – | |||
| Moddleman | Python – | |||
| Lektor | Python – | |||
| Gatsby | Node JS, React | No – | Markdown 00 | Looks very flexible, but pretty complex… |
| Expose | Shell scripts – | Markdown and picture folders | Specifically for picture sites. | |
| Wintersmith | Node JS, CoffeeScript ++ | Little – | Markdown, Jade, … | Looks very flexible, LESS, Sass, Stylus. Might be a bit complex… |
| DocPad | Node JS ++ | No – | Markdown and others ++ | Looks flexible but complex |
| kirby | PHP – | Markdown |
As a result I should have a closer look at Harp JS, Metalsmith, Hexo and Wintersmith.
After quickly reading thru the websites of the above tools I decided to give it a try with Metalsmith.
Editors
When you think of a static site generation from a base of Markdown files, it quickly becomes natural to look for a good editor. What we want from our editor:
- Preview Markdown
- Preview including the CSS and other transformations that our site generator uses - to make sure we see the same result as it will be displayed in production
- Preview including images. This might be non trivial since the images might be located on a different path in DEV as in PROD… Overa ll this means the editor must launch a compilation / composition process that produces the web view every time the Markdown source has been modified.
Editor we look at
| Editor | Markdown / HTML Preview | Comments |
|---|---|---|
| Visual Code | ? | Might have something suitable |
| Atom | ||
| Brackets | ||
| Caret.io | ||
| IA Writer | Claims so… |
… probably some more…
History
- August 2016: Started this page
- Jan 2017: Continued while being in Thailand with the family, Tomi & Beate