New documentation for all Grav open education projects is now available! Visit learn.hibbittsdesign.org.

This article is now outdated. Please refer to the Grav Course Companion Getting Started Guide.

I am pleased (well, actually quite stoked) to announce that my ready-to-run Course Companion, built with the open source CMS Grav, is now available for fellow educators to take for a test drive.

Grav course companion screenshot
Figure 1. Grav course companion screenshot. Explore the early release online at demo.hibbittsdesign.org/grav-course-companion-bv/

This Course Companion is designed to accompany a face-to-face, blended or fully online university course. It also supports a flipped-LMS approach using the modern flat-file CMS Grav as an open and collaborative Web platform.

Why Flip your LMS with Grav?

  • To support pedagogical goals unmet by current LMS/platform
  • To increase capability of access, sharing and collaboration
  • To deliver a better student (and facilitator) experience

Why Use a Modern flat-file CMS?

As an open source modern flat-file CMS, Grav offers a distinct set of advantages to Web-savvy educators looking to move beyond their institutional LMS:

  • Modern means…
    • Use of current standards (i.e. Markdown, Twig, YAML, etc.)
    • Modular/customizable content chunks (i.e. reuse of content)
    • Further separation of content (i.e. files) from presentation
  • Flat-file means…
    • No database means less (or no) IT involvement needed
    • Content stored in text files rather than in a database
    • In many cases, this translates into faster page access times
    • Takes full advantage of the collaborative ecosystem now available (i.e. GitHub, GitLab, etc.)
    • Increased portability, as moving a site now only requires simply copying files to another location

Course Companion Features

  • A complete ready-to-run Grav package (open source)
  • Blog-format, with important reminders & preparations areas
  • Site pages can be easily added/removed/changed
  • Sidebar is a simple markdown file, which can also contain HTML
  • URL flag to only display page content (for display within LMS). For example, http://demo.hibbittsdesign.org/grav-course-companion-bv/blog/week-03/onlydisplaypagecontent:true
  • External links are automatically opened in a new Tab/Window
  • Built-in support for entire site to be collaboratively maintained on GitHub
  • Since everything is built with Grav it can be entirely customized

Quick Install (Web server only)

Pre-flight Checklist

  1. Confirm Web server PHP version (PHP 5.5.9 or higher)
  2. Web server login credentials (username and password)

Installation Steps

  1. Download the latest release (source code available on GitHub)
  2. Unzip the package onto your desktop
  3. Copy the entire Grav Course Companion folder to your Web server
  4. Point your browser to the Web server folder
  5. Create your site administrator account when prompted
  6. And you’re done! (press the icon in the Admin Panel to preview site)

Recommended Install (Desktop + Server)

With the flat-file (no database) nature of Grav, there are lots of benefits of installing Grav on your computer and then having your site files mirrored onto a Web server:

  • Always have access to your site, regardless of Web server status
  • Develop and test changes to your site privately without any downtime of the live site
  • Store your site files on a Git service (i.e. GitHub) to better track your development and enable anywhere, anytime editing of your site
  • Enable others (i.e. students, fellow instructors, colleagues, etc.) to collaboratively contribute to the site, including both site content and code

Grav recommended install using Grav, GitHub, and Deploy to support a flipped-LMS approach Figure 2. Grav recommended install using Grav, GitHub, and Deploy to support a flipped-LMS approach.

Pre-flight Checklist

  1. Confirm Web server PHP version (PHP 5.5.9 or higher)
  2. Web server login credentials (username and password)
  3. Download and install MAMP (https://www.mamp.info/)
  4. Git server account (e.g. GitHub (https://github.com/) or local GitLab or Gogs app, etc.)
  5. Download and install GitHub Desktop (https://desktop.github.com/)
  6. Automatic deployment service (e.g. Deploy (https://www.deployhq.com/), FTPploy(https://ftploy.com/), etc.)

Desktop Installation Steps

  1. Download the ready-to-run Course Companion Skeleton Package
  2. Unzip the Grav package onto your desktop
  3. Create a folder called ‘MAMP Websites’ in your ‘Documents’ folder
  4. Copy the entire Grav folder into your ‘MAMP Websites’ folder
  5. Launch MAMP
  6. Change the ‘Document Root’ MAMP preferences setting to the ‘MAMP Websites’ folder (within ‘Documents’)
  7. Press the MAMP ‘Start Servers’ button
  8. Enter ‘localhost:8888’ as the URL in your Web Browser
  9. Choose the displayed Grav folder name
  10. Create your site administrator account when prompted
  11. And you’re done! (press the icon in the Admin Panel to preview site)

Once you have confirmed that Grav is running locally on your computer, the final step is to create a Git server repository to store your site files and setup an automatic deployment service to push any changed files to your Web server. An example step-by-step walkthrough this process is available in the article Using Grav with GitHub Desktop (and Deploy).

Grav for Educators Workshop Slides

If you are new to Grav, you might find these in-progress workshop slides helpful:

Course Companion Page Templates

  • Blog template (blog.html.twig)
  • Important reminders template (important_reminders.html.twig)
  • Weekly preparations template (preparations.html.twig)
  • Blog item template (blog_item.html.twig)
  • Item template (item.html.twig)
  • Page template (page.html.twig)
  • Sidebar template (sidebar.html.twig)

Site Structure

/user
  - /pages
    - /01.blog | blog.html.twig and blog_item.html.twig
      -/_important-reminders | important_reminders.html.twig
      -/_preparations | preparations.html.twig
      -/week-01 | item.html.twig
      -/week-02 | item.html.twig
      - etc..
    - /02.resources | page.html.twig
      -/page.md
    - /03.syllabus | page.html.twig
      -/page.md
    - /sidebar | sidebar.html.twig
        -/sidebar.md
    - /footer | default.html.twig (Course Companion Bones Vanilla theme element)
        -/default.md
    - /logo | default.html.twig (Course Companion Bones Vanilla theme element)
        -/default.md
    - /mobilemenu | default.html.twig (Course Companion Bones Vanilla theme element)
        -/default.md

Configuration

The ‘site.yaml’ file located in the ‘/user/config/’ folder contains the following default values:

title: CPT-363
metadata:
    description: 'A short description of your course would go here'
displaymenuentries:
    enabled: false        # display of additional menu entries
menu:                     # menu entry for adding external sites/tools
    - text: Grav
      icon: arrow-circle-right
      url: http://getgrav.org/
icon:                     # default font awesome icons for preparation and post entries
    preparations: check-circle
    posts: calendar-o
github:
    location: none         # menu | page | none
    tree: https://github.com/hibbitts-design/grav-skeleton-course-companion-bv/edit/master/
rssbutton:
    display: true
Setting Child Setting Description
title The course number/id, to be displayed at the top of every page.
metadata description The short description of the course companion site
displaymenuentries enabled Can be set to true or false. When set to true, all defined menu items are added to the navbar.
menu text Text label for external links to be included on navbar
menu icon Font awesome icon code for external link (optional)
menu url URL for external link
icon preparations Change the default font awesome icon for the preparation area on the home page.
icon posts Change the default font awesome icon for the weekly blog posts (i.e. weekly summaries).
rssbutton display Can be set to true or false. When set to true, it displays RSS buttons on the sidebar for each page.
github enabled Can be set to true or false. When set to true, it generates the Edit this page link to GitHub for each page.
github tree Sets the tree by which your site’s content is based. Generally the repo your site’s content is pulled from.

Frequently asked questions

How do you create a new page?
The recommended method is to copy an existing page (such as’Resources’) using either the Admin Panel or if working directly with files copy the page folder ‘resources’ and then add the numeric prefix (e.g. ‘04.’). Once an existing page has been copied then modify as needed.

What is an ‘early release’?
As part of a highly iterative development process, early versions of the Course Companion will be made available for evaluation and comment. These releases are believed to be free of major bugs, however they are still works-in-progress.

Questions or comments? You can find me on Twitter at @hibbittsdesign.

comments powered by Disqus