Spike: Investigate CMS suitability

[Cleop]

Following my research into CMS options we have narrowed down our choices to Ghost and Apostrophe. Now in order to understand which is most suitable we are going to do a short spike into each of these to learn more. I will be looking at Ghost whilst @finnhodgkin will be looking at Apostrophe. We will record our findings in here and choose a CMS by the end of the day.

[finnhodgkin]

First impressions of Apostrophe

It's really easy to get set up and running!

There's a great beginner's guide that takes you through the installation and templating process, and I can already see exactly how you would build fairly complex layouts with text editing integration. :+1:

The CMS side of things is 'widget' based - signed in admins just click directly on the existing page content to make edits or add new sections (widgets). This means the page isn't limited to just a title/content like some blog sites, and the text editing is 'rich text' so there's no markdown/html on the client-side. Image selection/upload is also included out of the box.

The docs

On first impression the Apostrophe documentation seems to be thorough but not terribly well organised. There's just a giant list of alphabetised module names so unless you know exactly what you're looking for it's hard to know where to look.

CSS

It comes bundled with Less for css but it was v. easy to swap out it for tachyons (you can add <style> and <script> tags like any other static site).

JS

Lodash / jQuery are included by default and there doesn't seem to be an easy way to remove them. Bundling doesn't seem to be provided so no access to brunch/webpack, and no npm/require on the front-end.

Links

Example demo: http://demo.apostrophecms.org/ Beginner guide: http://apostrophecms.org/docs/tutorials/getting-started/index.html Docs: http://apostrophecms.org/docs/

Issues so far:

• Intro tutorial differs slightly from the current version. The configuration file for pages is contained in /lib/modules/apostrophe-templates/index.js rather than /app.js. The change is documented in comments within /app.js but it may be a sign of annoying documentation issues in the future.

• Can't use nodemon out of the box and there's no inbuilt hot reloader. I haven't Googled this and I guess it's not the end of the world, just a little annoying when working on css.

@nelsonic posted a list of questions in https://github.com/dwyl/adoro/issues/3#issuecomment-359429975 that I've tried to answer below. Some information may be missing/wrong because I haven't had much time to explore the module ecosystem:

• [ ] Version controlled - none that I could see
• [x] User hierarchy - there are permissions but there's no edit approval process
• [ ] Creation/Editing/Approval UX - appears to just be instant edits with no approval workflow. The Apostrophe pieces submit widgets module could be hacked into an admin aproval workflow, but there's nothing by default.
• [x] WYSIWYG - clickable and editable rich text boxes and image upload widgets
• [ ] PR-like approval system - no
• [ ] AMP by default - no, but all styling is done by the developer so it could be implemented like any other web app/site.
• [ ] CDN with well defined headers? - I think the recommendation is for it to be used in combination with nginx. Not sure on this point though...
• [ ] Real time analytics. No but Google tag manager would be easy to tack on later.
• [x] Full-text search - Yes, here are the docs
• [ ] SEO by default - No.
• [ ] Indexed links to avoid 404 - No.
• [ ] Media stored on CDN by default - It seems to just be stored on the server by default.
• [ ] Draft content - Draft content is allowed but there's no approval workflow.
• [ ] Real time user comments - Not by default, but there are a number of non-realtime comment solutions (stack overflow answer, apostrophe pieces submit widgets, apostrophe comment system
• [ ] Spam protection - Nothing inbuilt.
• [ ] Email send configuration - Guide on creating a form. It appears that Apostrophe gives access to Express routes on the backend so technically anything you can do with Node you can do with apostrophe.
• [ ] User confirmation - AFAIK they don't have a client-facing user system so I don't think emails are sent at all.
• [ ] OAuth - No
• [ ] Edit suggestions - No
• [ ] Short URLs - No

[Cleop]

Reflections on Ghost

Setup

tl;dr

The setup was time consuming and I encountered lots of hiccups along the way. I've now had to take a shortcut for a local version which may be difficult to run in production. This experience may have been totally different if I was using Ubuntu which is what Ghost is designed for.

Setup on a Mac

• Tells you to create users in the instructions before you've even set up your server
• Instructions are focused on Ubuntu

Ie. brew install nginx not sudo apt-get...

• You need:
  • [ ] NGINX (min 1.9.5)
  • [ ] Node (v6) - make sure you have a supported version of Node, check the docs
  • [ ] MySQL (brew install mysql NOT MySQL-server, doesn't exist on brew)

Ensure that MySQL is installed with a password specified (as per the Ghost documentation):

Problems I encountered/ instructions I chose not to follow:

• Error message on MySQL
• MySQL is not MySQL-server
• ufw allow 'Nginx Full' - have not run with sudo yet so did not work
• Haven't installed Node via NodeSource as they specified
• Says to install yarn, I've not

You must install ghost-cli globally, everything else I didn't install globally even when it tells you to: npm i -g ghost-cli

Do sudo mkdir -p /var/www/ghost or sudo mkdir -p /var/www/{folder} - must use sudo

Do cd /var/www/ghost, then sudo ghost install

---

Based on the journey above, now going to pursue the local option: ghost install local. Make sure your repo is totally empty before doing this.

This runs like the production example but skipping the following sections:

This works and I am now running their demo site. The demo site uses the theme Casper which they suggest you customise.

Using Ghost

The site's structure doesn't seem to difficult to get a grasp of for customisation. Concerns however are:

• Customisation doesn't look easy for creating fields outside of the designated blog fields ie. author, title, post. As the research I did suggested, this really is a tool focused on blogging. Haven't fully worked out how to create custom pages yet.

• Writing/editing is markdown based and although they have buttons like this: When you click on the buttons it just adds the markdown for you which may not be the easiest for some non technical users:

  

• AMP integration ✅

• Authors, Editors, Administrator permissions

• Has JQuery built in ❌

• Node, MySQL, Ember, Express, Handlebars

Links

Setup guide for production site - https://docs.ghost.org/docs/install Local setup - https://docs.ghost.org/docs/install-local

[Cleop]

We are going to proceed with Apostrophe because it is more of an all-round CMS (rather than Ghost being publishing centric), it is compliant with both Ubuntu and OS X and has good documentation and options for module expansion.