Experience Design / Education / Multi-device / Grav CMS

Here is what I have in mind so far for a possible ebook or workshop about Grav CMS for instructors:

What is a Modern Flat-file CMS?

Getting Grav up and Running

Requirements

Installation

Server Only

Desktop + Server

The Basics of Grav

Admin Panel

Account Creation

Overview

Dashboard

Configuration

Managing Pages

Editing Pages

Working with Files

Overview

Pages

Folders

Page Content

Overview

Names

Headers

Markdown

Linking Pages

Embedding Media

Flipping your LMS with Grav

What is a Flipped-LMS?

Why Flip the LMS?

Flipped-LMS Approach

Experience Design Goals

Why Grav?

An Open and Collaborative Workflow

Overview

Recommended Toolset

MAMP

Git Service (e.g. GitHub, GitLab, Gogs, etc.)

GitHub Desktop

Deploy

Example Workflow

Setting it all Up

Course Companion Skeleton Package

Highlights

Site Structure

Pages Types

Configuration

Things to Explore Next…

Font awesome icons (included)

Built-in media manipulation functionality

Modular content using Page Inject plugin (included)

Additional theme customizations

The joys of the Twig templating language

Wrap-up

Here is a draft workshop description:Do you have unmet pedagogical goals due to the constraints of your current LMS? Do you want to have a better experience for your students and yourself? In this workshop, Paul will introduce Grav, the modern flat-file (no database) CMS and his open source course companion to help other instructors flip their LMS to overcome these challenges. Participants should be comfortable with editing text files, connecting to a Web server, and be familiar with basic Web page elements.

For example, the modern flat-file CMS Grav along with GitHub and an automatic deployment service such as Deploy can be used quite effectively by tech-savvy educators as an open and collaborative platform to support a flipped-LMS approach:

Want to get started with flipping your own LMS? Since this article was written I’ve built an open source project using the Grav CMS to help other tech-savvy instructors - explore the on-line demo and then head over to Grav Course Hub Getting Started Guide to get going.

As a modern flat-file CMS, Grav can take full advantage of today’s ecosystem of open and collaborative editing services, such as GitHub or GitLab. In this article we will look at how to easily use Grav with GitHub Desktop (which uses GitHub and Git for source control) and the automatic deployment service Deploy to result in a very efficient, open and collaborative workflow. No scripting or command line interactions will be required, I promise.

As an educator, the use of a service such as GitHub to store an online course companion is very appealing as not only does it support an open practice but also enables students to control the very learning environment that they are using. I first described this workflow in my earlier article My Dream Workflow as an Instructor.

Before you start this tutorial I suggest you first get your Grav site up and running locally using MAMP, as outlined in Running Grav Locally with MAMP. By utilizing MAMP you will then have a complete, local version of your course companion site running on your computer that can be easily updated and then deployed to your Webserver.

This tutorial should take about 15 minutes, and once completed you will have an efficient, open, and collaborative workflow for yourself and your students!

Download the GitHub Desktop client for your computer (Mac or PC), and once it is installed launch the application and proceed with the setup process to enter your GitHub account credentials.

Figure 1. GitHub Desktop setup welcome.

Figure 2. GitHub Desktop connect to GitHub.

Assuming you already have a Grav site present on your computer (and preferably one that is already viewable via MAMP), you next need to create a GitHub Repository of your site. It is recommended that if this is the first time you are using GitHub with Grav that you add the entire Grav site to GitHub, but other approaches are possible such as only storing the “user” folder (see the provided additional resources at the end of this article for more options).

Figure 3. GitHub Desktop main window, displaying the included tutorial.

Press the “Add a Repository” button (upper-right plus(+) sign in the main window) in the GitHub Desktop client, select the “Add” tab within the displayed dialog box, and then press the “Choose…” button to select the folder containing your entire Grav site.

Figure 4. GitHub Desktop add Repository dialog.

Figure 5. GitHub Desktop local Repository added.

You are now ready for the first commit to your new GitHub repository. Whenever you make a commit you will need to include a brief text summary - as this is your first commit enter the text “First commit.” into the “Summary” text box (above the “Description” text field), and then press the button “Commit to master”.

Figure 6. GitHub Desktop first commit.

Since this is your first commit to your repository, the “Publish” button (upper-left of main window) will need to be also pressed to actually perform the actual file updates. Once the “Publish” button is pressed enter a short description for your new GitHub repository and then select which GitHub account you want to publish to (if you have multiple accounts).

Figure 7. GitHub Desktop - repository details dialog box.

Figure 8. GitHub Desktop publishing the repository.

Figure 9. GitHub Desktop repository published.

Once this process is complete you should now be able to view your Grav site files stored on GitHub - please do this now to ensure that everything went as expected. If you have any issues during this process you may find more detailed GitHub Desktop client support information at https://help.github.com/desktop/.

Congratulations! With the above steps completed you now have a Grav site which you can run and test locally (using MAMP), and with only one click in the GitHub Desktop application have any changed local site files updated in your GitHub repository and then have them automatically pushed to your Webserver hosting your Grav site (via either Deploy or Buddy). In my experience, I can make an update to my Grav site and sync changes to GitHub for automatic deployment to my Webserver in as little as 30 seconds.

Figure 19. GitHub Desktop main window. When any changes are detected they will be displayed on this screen and can be pushed to GitHub when the “Commit and Sync master” button is pressed.

Students can also now make suggested changes to your Grav site via GitHub or GitHub repository file links provided in your Grav site (see the bottom of this example page at http://paulhibbitts.net/cmpt-363-153//resources). GitHub will provide an excellent view of proposed changes, which you can immediately accept or start a further discussion about these possible changes with the student submitting them.

You can press the GitHub Desktop client “Sync” button (which replaces the “Publish” button you previously used) in the GitHub Desktop client to also download any changes made to the online GitHub repository down to your own computer.

Interested in learning even more about using Grav with GitHub? Check out these two super-informative posts on the Grav Blog:

Recently, I’ve been exploring ways to use the modern flat-file CMS Grav as a simple open publishing tool. Grav is a natural candidate for this usage, as all content is stored as individual files which can be stored on a variety of open and collaborative editing environments (e.g. GitHub).

This article will be substantially updated once the pre-release Git Sync plugin for Grav is officially released (expected in February).

Here is a snapshot of the approach that has produced the best results for me so far:

An instance of Grav running on a Web server, using a slightly modified version of the Learn2 theme. The Learn2 theme is pre-configured with support for content to be stored/maintained on GitHub, although any Grav theme could also be customized to support this ability. The Admin Panel plugin has also been installed, providing the ability to perform easily any needed Grav system updates.

Figure 1. Grav Learn2 Theme.

Figure 2. Grav Admin Panel Dashboard.

A GitHub repository containing only the “Pages” folder of the Grav instance. This results in having only content files (using Markdown) being presented in the repository, bringing a high-level of visibility to the content files of your site for users who wish to interact directly with the GitHub repository. You can view the GitHub repository of my example “Pages” site folder at https://github.com/hibbitts-design/grav-course-hub-starter-kit

Using a GetHub Webhook either through a service such as Deploy, or directly by adding the needed PHP file (see Grav Development with GitHub - Part 2 on getgrav.org), configure a site update to be automatically performed when one or more content files are modified on GitHub.

We now have a simple open publishing system which leverages the power of GitHub! Anytime someone makes a change in the GitHub repository, and you approve of the change, the results will be automatically published to your live site. As well, all of your edits, etc. are available for public viewing and commentary. The content made available on GitHub may also be forked and used for other useful purposes.

It should be noted that you would want to make any significant changes to the chosen Grav theme before you upload the Grav site to your Web server. You can still make changes to the theme once it is running on your Web server, but doing so would require using a FTP program to edit the needed files or copy the updated files from your computer to the site. Alternatively, you could the place the “User” folder on GitHub (or even the entire Grav instance, as Grav is open source) which would also contain any theme customizations, but doing so would reduce the high-level visibility of your content files achieved when only placing the contents of your “Pages” folder on GitHub.

Here is an overview of the flow of someone making a change to your site content via GitHub:

Viewing the Grav site, a viewer can click the provided “Edit this Page” link to propose changes to the page. You can view a live example of this technique at my Course Hub Starter Kit prototype site.

Figure 4. Example site page - Overview, using a modified version of the Learn2 theme with a link to edit the page on GitHub.

Once the viewer has logged into GitHub, they can edit the page and then submit a Pull Request (a request for the site administrator to review and approve the submitted changes).
Figure 5. Editing Overview site page on GitHub, which when completed will result in a Pull Request.

The site administrator reviews the submitted Pull Request, and can approve changes immediately or start a discussion with the author of the proposed changes for further modifications, etc.
Figure 6. Review submitted Pull Request on GitHub, showing GitHub’s super-useful file changes preview.

Once the change is approved by a site administrator of the GitHub account the changes to the GitHub repository will be automatically pushed to the server, where the updated content is available to be viewed.
Figure 7. Updated site page - Overview.

I personally also like to use GitHub Desktop as a point-and-click means to keep a local copy of my GitHub repositories on my local machine so I can use any markdown-enabled application for editing my content files. GitHub Desktop can also sync any changes made to the GitHub repository down to your local machine. You can learn more about my use of GitHub Desktop in my earlier post My Dream Workflow as an Instructor.

Note: The original title of this post was ‘Using Grav as a Simple Open Publishing Tool’.

One of the (many) great things about using the open source CMS Grav for a flipped-LMS approach is that no database is required, which makes running a local copy of Grav on your computer for testing purposes a very straightforward process. This also makes deployment to a Web server a breeze - just a simple folder copy.

In this brief article we will look at how to use MAMP, a tool to safely run a PHP server on your computer, to view Grav sites locally on your Mac or Windows PC.

Change the ‘Document Root’ MAMP preferences setting from the default value ‘htdocs’ within the MAMP application folder to the ‘MAMP Websites’ folder that you previously created within ‘Documents’ by pressing the select folder button (a folder containing three dots), choosing the folder, and then pressing the ‘OK’ button

With MAMP installed and running you can now view your Grav site(s) locally. Launch your Web Browser, enter the URL http://localhost:8888 and then choose the displayed Grav folder name. That’s it! If you downloaded a Grav Skeleton with the Admin Panel pre-installed you will be prompted to create your administrator account.

Additional MAMP Setup Options

If you would prefer, you only need to enter ‘http://localhost’ in your Web Browser to access your MAMP htdocs directory listing, then do the following:

Change the value in the ‘Appache Port’ field from the default value ‘8888’ to ‘80’ (no quotes)

Press the ‘OK’ button

If you are curious about how a local copy of Grav can be used with GitHub/GitHub Desktop for super-easy deployments while fully supporting student collaboration, check out the article Using Grav with GitHub Desktop (and Deploy).

I am excited to be presenting my approach of a Flipped-LMS at Simon Fraser University’s DEMOFest 2015 on November 24th.

Here is the description of my session:

Flipping the LMS: Benefits and Lessons Learned of Using an Alternative Front-end to Canvas

Let’s be honest, as course facilitators we want to deliver the best possible online learner experience but at the same time make our own experience as convenient as possible. LMSs, such as Canvas, provide some great pedagogical elements but often fall short when it comes to such things as streamlined course updates, content reuse, easy customization, and providing a truly open platform. The solution? Flip the LMS!

A flipped-LMS is an approach where an open platform, chosen by an instructor, provides an alternative (and preferably collaborative) front-end to their institutional LMS. In this presentation Paul will demonstrate how this approach can produce significant improvements to both the student and instructor experience. Elements from Paul’s personal toolkit to be highlighted will include Canvas (naturally), the open source flat-file CMS Grav, and GitHub Desktop.