Prose.io and Jekyll Static Sites

Prose.io is a web application that allows editing of Github Repositories through your browser. This has great potential, particularly when used with the website hosting offered by Github Pages, providing a CMS-like experience for a generated static site, as described by Daniel Nabb.

Prose.io has some powerful configuration capability to simplify the user editing experience, which I will be exploring in upcoming posts.

Update as of February 2016

I have been using Prose.io regularly to create posts on this website now for a couple of months. I would recommend it.

Pros

  • it is very quick to start a post
  • you can edit posts through the web - even on my mobile
  • adding an image to the post is also super fast

Cons

  • no spell checker

Basic Prose.io Configuration

The basic prose configuration is added to the _config.yml file of my Jekyll site

prose:
  rooturl: ''
  siteurl: 'http://www.hywel.me'
  media: 'assets'
  metadata:
    _posts:
      - name: "layout"
        field:
          label: "layout"
          element: "text"
          value: "post"
      - name: "date"
        field:
          label: "date"
          element: "text"
          value: "CURRENT_DATETIME"
      - name: "author"
        field:
          label: "author"
          element: "text"
          value: "Hywel"
      - name: "categories"
        field:
          label: "categories"
          element: "text"
          placeholder: "Enter categories"
      - name: "excerpt"
        field:
          label: "excerpt"
          element: "text"
          placeholder: "Enter excerpt"
      - name: "meta"
        field:
          label: "meta"
          element: "text"
          placeholder: "Enter metadata"

Note that I have defined my media folder with today’s date. I keep my media sorted into date folders. I have not found out how to configure this as yet.

Create the Post

1. Log in to prose.io using your Github credentials and navigate to your _posts folder. Click ‘New File’ to start a new post.

step 1 log in to prose.io and navigate to your posts folder

2. Write your post

write your post using prose io

3. Select Medatata to edit

select metadata option to edit

4. Edit your metadata. Note that the default options from the configuration are shown

enter metadata default options are shown

5. Insert an image using prose.io, note that the image is uploaded and inserted to the post automatically

select image for upload to prose.io insert an image using prose io