Exploring and Building Open [Source] Software for Learning Ecosystems

Experience Design / Education / Multi-device / Grav CMS

I’ve been further refining my sustainable approach of an open design practice for my experience design work in the education field, and (bravely or foolishly) I’ve attempted to craft a working definition of the phrase:

(1/3) What is a”sustainable open design practice”? My first attempt of a definition is “where the creation of an open product and it's

When mapping out the design of the Grav Course Hub Skeleton, it was important to support the two most popular responsive Web frameworks (Bootstrap and Foundation) so that educators could choose the framework best suited to their multi-device presentation needs.

The above three examples just scratch the surface with what is possible when using the Gravstrap shortcodes plugin along with the Course Hub Bootstrap theme (or any other Grav Bootstrap-based theme for that matter). Explore the full range of available components on Giansimon’s Gravstrap page.

Oh, and if you are wondering why interactive examples were not included on this page, the Grav theme this site uses (HPSTR) is not Bootstrap-based - you win some, you lose some.

In this article, we will look at how to use Grav with GitHub Desktop and Beanstalk (which has automatic FTP deployment built-in) to provide a highly efficient workflow when updating your Grav site, and source control to boot. While GitHub only offers private repositories for paid plans, Beanstalk offers a free plan to store one single repository privately.

You will be required to enter a few commands into your Mac or PC command line interface (CLI) during this the process, so get comfortable and let’s get started.

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

Download the GitHub Desktop client for your computer (Mac or PC), and once it is installed launch the application. Since you will be using Beanstalk, and not GitHub, you can skip the setup process at this time.

Figure 1. GitHub Desktop setup welcome.

Once the GitHub Desktop application is installed, you will need to install it’s command line tools. This option can be found in the GitHun Desktop’s ‘Preferences’ dialog on the ‘Advanced Panel’ - look for the ‘Install Command Line Tools’ button and then press it.

Head over to Beanstalk and sign-up for a free account (one user private project plan with 100MB of storage).

Figure 3. Beanstalk homepage.

Once you have signed up and are signed-in, create a new repository by pressing the “Create a Repository” button.

Figure 4. Beanstalk welcome page.

Next, enter the name of your new repository. Consider the name of the Grav project you will eventually be storing when choosing the name. Once you enter the repository name press the ‘Next Step’ button.

Figure 5. Beanstalk new repository.

You will next need to make the initial commit to your newly created Beanstalk repository. Launch the command line interface for the Mac OS, which is the ‘Terminal’ app, or if you are on Windows launch the ‘Git Shell’ app which would have been installed along with GitHub Desktop (within the same application folder).

Figure 6. Mac OS Terminal application.

To streamline the need to navigate directories during this process, I would suggest you place your previously unzipped Grav Skeleton folder to where you wish to eventually maintain it (e.g. in your ‘Documents’ folder). For this operation you will be using the ‘cd’ command, which is for change directory. In your CLI enter ‘cd’, press the space bar, and then drag-and-drop the folder that contains your Grav Skeleton folder (not the actual Grav Skeleton folder) onto the CLI window. With the full path to the folder now after the ‘cd’ command press the ‘Return’ key.

To make sure you are at the correct directory level, you can use the ‘ls’ command, which is for listing the files stored in a directory. In your CLI, enter ‘ls’ and press the ‘Return’ key. You should see the name of your Grav Skeleton folder in this list (e.g. within your ‘Documents’ folder).

Figure 8. Mac OS Terminal application with ‘ls’ command entered.

Now you are ready to link your Grav Skeleton folder to your Beanstalk repository by copying the hidden ‘.Git’ folder from the cloned repository to your actual Grav Skeleton folder. Return to your Browser and copy the ‘Git repository URL’ field which should be displayed on the current Beanstalk site page.

Figure 9. Beanstalk repository, with Git URL.

Return to your CLI window, and type ‘git clone’, plus a space, and then paste the Git repository URL you have just copied to your clipboard, then a space, and finally the text ‘temp’. This command will clone your Beanstalk repository to your computer within a folder called ‘temp’. Press the ‘Return’ key to run the entered command. You may also be prompted to enter your Beanstalk username and password for this step.

After a short period of time a message should be displayed about the status of the Git clone command, such as ‘done’.

Figure 11. Mac OS Terminal application git clone command completed.

We now need to make the Grav Skeleton folder the location of the repository on your computer, rather than the empty temp folder we just created. To do this, we enter ‘mv temp/.git’, plus a space, then the name of your Grav Skeleton folder, plus a space, followed by ‘/.git’. This operation will by copy the hidden ‘.Git’ folder from the cloned repository to your actual Grav Skeleton folder.

Figure 12. Mac OS Terminal application move folder command entered.

Figure 13. Mac OS Terminal application move folder command completed.

Now that you have your Beanstalk Git repository as your Grav Skeleton folder, you can use GitHub Desktop to easily and quickly send any updates back to the repository on Beanstalk with just a click of the button (no more CLI commands are required!).

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

Figure 14. GitHub Desktop add repository dialog.

Figure 15. 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 16. GitHub Desktop first commit.

Since this is your first commit to your repository, the “Publish” button (upper-left of main window) may need to be also pressed to perform the actual file updates.

With the files for your Grav Skeleton now uploaded to Beanstalk, the final step is to enter the FTP credentials for your automatic deployments in Beanstalk. Return to the Beanstalk site, navigate to your repository page, and press the “Deployments” button.

Figure 17. Beanstalk Deployments page.

Press the ‘Create environment & server’ button and then name your environment. Choose ‘Automatic’ deployments (since you will be doing your development work/testing on your local computer and only commit working versions of your site to Beanstalk).

Figure 18. Beanstalk Create Environment and Server Page.

Choose the type of server you are adding (most likely FTP or SFTP), press “Next Step”, enter in the needed server address and credentials on the following screen, and then press “Next Step” again. You can skip the ‘Optional Settings’ page when it is shown.

Figure 19. Beanstalk Add Server.

Figure 20. Beanstalk Add FTP Server.

Figure 21. Beanstalk server setup complete.

Congratulations! 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 Beanstalk private repository and have them automatically pushed to your Web server. In my experience, I can make an update to my Grav site and sync changes to Beanstalk for automatic deployment to my Web server in as little as 30 seconds.

If you are interested in providing a way for other course facilitators and students to collaborate with your Grav site then you should use a GitHub public repository instead of a private Beanstalk one - read the article Using Grav with GitHub Desktop (and Deploy) for step-by-step instructions.

1) Web Only

Install Grav on a Web server and maintain the site using the Admin Panel, and when needed an FTP text file editor.

While this is the quickest way to get a Grav site up and running, this approach means that all development is performed on a live website (requiring user authentication).

2) Desktop and Web server (one-time deployment)

Develop the Grav site on your desktop using MAMP, and then deploy the entire site folder to a Web server using an FTP app once the site design is complete. Use the Admin Panel to then maintain the site as needed.

Educators can safely develop and refine their Grav site on their own computer, and once ready for the start of term deploy the site using an FTP app. During the term only page editing is done on the live website (requiring user authentication). If you want to periodically deploy your site during development, I recommend using Cyberduck’s FTP app which includes a ‘Synchronize’ feature.

3) Desktop and Web server (with on-going automatic deployments)

Both of the following approaches use Git. While there are many benefits of using Git when developing a website, the most crucial one is that it provides very fine control over what (and when) changes are pushed to your live website.

Private Git Repository

Install and maintain the Grav site on your desktop with MAMP and then use GitHub Desktop to quickly sync the site to a private Git repository service as needed for later deployment. If you are looking for a free option to start with, Beanstalk offers a one user private project plan with 100MB of storage and includes automatic site deployment to an FTP Web server.

With a single press of a button, an educator can quickly deploy any updates of their local Grav site to a Web server. Any text editor can also be used to directly modify Grav files locally, as well as the Admin Panel with user authentication.

Public (Collaborative) Git Repository

Install and maintain the Grav site on your desktop with MAMP and then use GitHub Desktop to quickly sync the site to a public GitHub repository (free public projects plan) as needed. Updates are automatically deployed to your FTP Web server via a deployment service and ‘edit this page’ links (via GitHub) can be easily included on site pages (provided with several Grav skeleton packages, including Course Hub and RTFM).

The use of a public GitHub repository is my preferred approach, as in addition to quick automatic deployment of site updates all course materials are public and course participants can collaborate on both the content and behavior of the site.

Course Hub Overview

The Course Hub skeleton is intended to accompany a face-to-face, blended or fully online university course. It supports a flipped-LMS approach using the modern flat-file (no database) Grav CMS as an open and collaborative Web platform.

If you would like a more detailed step-by-step guide to the above desktop installation process, please see the article Running Grav Locally with MAMP.

Now that you have a Grav site running on your computer you need to sync those site files to your Webserver. My preferred method is to use a public GitHub (Git) repository (to enable contributions by course participants) and an automatic deployment service, as described in the post Using Grav with GitHub Desktop. If you want to keep your source files to yourself, then using a private Beanstalk repository would be a no-cost option as described in the post Using GitHub Desktop and Beanstalk with Grav.

Now that you have a Grav site present on your computer you can sync those site files to your server in the future, as described in the post Using Grav with GitHub Desktop (hibbittsdesign.org/blog/posts/2015-12-11-using-grav-with-github).

This is something I can definitely speak to, as in fact just over a year ago I tried out each of the above CMSs (and a few others) for use as a new course website platform. Here is a little trip down memory lane…

I even went ahead and purchased a single user Statamic 1.0 license, as there was no free trial available at the time. As you can see from the above, I also checked out OctoberCMS and Bolt during my evaluation phase.

For each CMS I tried to modify either a default site and/or start a new simple project site. I was able to do this with each CMS easily enough, but found the CraftCMS had the most feature-rich editing environment and a very strong modular content approach as well. Statamic was also quite promising initially, but I soon ran into several difficulties including getting the available Foundation theme handling dropdown menus. Overall, I found that things work the easiest for me with OctoberCMS, Kirby, Bolt, and Grav.

All of the above CMSs are also “modern” in general terms, but as I learned more about what a flat-file CMS could specifically provide I decided to focus on that aspect.

Some key benefits of flat-file CMSs, especially for educators:

No database means less (or no) IT involvement needed

Increased portability, as moving a site now only requires simply copying files to another location

Takes full advantage of the collaborative ecosystem now available (i.e. GitHub, GitLab, etc.)

Once I decided that a flat-file CMS was the best fit for my needs, then OctoberCMS, CraftCMS, and Bolt were all eliminated from the running. I also wanted to use an open source platform, so that then removed Statamic from the running.

So why did I choose RocketTheme’sGrav over Kirby given my initial analysis? After a bit of thought, I would say the main reasons were:

Speed/responsiveness was also an important consideration, but based on my initial experiences Grav and Kirby seems pretty evenly matched on that issue.

It’s just over a year later and I am feeling really good about my choice. Grav v1.0 has now been released, and both its capabilities and the community keep growing. A public roadmap for Grav in 2016 is available which also includes Gantry 5, RocketTheme’s theme framework available on Joomla and soon on Wordpress. From everything that I’ve seen so far Gantry will bring some really easy-to-use but powerful theme customization features to Grav.

As a side-note, I’ve also used other platforms such as WordPress, Concrete5, and Moodle to create my course hubs in the past, but with Grav I’ve been able to achieve a much higher level of customization than ever before. With only basic HTML/CSS knowledge, coupled with the incredible ease of use of the Twig language, Grav has enabled me to design and deliver much better experiences for my students and fellow educators. I’ve even been able to create my own open source Course Hub project to help other educators get started with Grav, which I plan to also release as a self-contained Grav skeleton package.

I am putting together a very brief presentation about flipping an LMS with an open + collaborative platform. Here is what I’ve got so far:

Flip it Good! Flipping the LMS with an Open + Collaborative Platform
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 preparing his Fall 2015 CMPT-363 (User Interface Design) course at Simon Fraser University, instructor and interaction designer Paul Hibbitts faced these same challenges. His solution was to ‘flip the LMS’ by designing and developing an alternative front-end to the institutional LMS Canvas (http://paulhibbitts.net/cmpt-363-153/). In this approach, the LMS was used only for elements it was best suited for (i.e. student records, grades, etc.) with all other elements handled by an open extensible platform completely under his control.

Based on the positive feedback of his students and his own experience, he decided to create an open source course hub built with the CMS (Content Management System) Grav to help other instructors get started in flipping their LMS with an open + collaborative platform.

In this presentation Paul will share his flipped-LMS approach and introduce his ready-to-run open source Grav Course Hub for use by other educators.