I’ve been flipping the LMS for a while now using Wordpress as my forward-facing LMS, linking back to Blackboard through it. It took Paul Hibbitts to really bring some things into focus for me and get me to think about what I wanted out of my front-facing course presence. What follows is a review of my workflow around building a space outside the LMS for my literature class (on digital culture no less). What I am laying down here is pretty much my way of doing things; how I add content to course. You might want to take a good look at all the stuff Paul’s laid out about Grav, and Flipping the LMS before you come wandering back here. I’m offering a look at how I use Grav and the Flipped LMS, not really a universal setup–though you could totally do this!! This isn’t a philosophy, it’s how I load the files that make the site.
As I note above, I use Wordpress to manage my face-to-face and hybrid (or mixed-mode as some call it) classes. I tend to treat the classroom as a workshop space, so my course websites have a lot of lecture materials, assignment prompts, and other whatnots that students can check in on–in short, content. My course websites do not need a lot of interactive ability. At their root, my course websites are repositories that store and present information while pushing students elsewhere to do the work, be that in the institutional LMS or outside in the world.
Sometimes, for me, Wordpress is a hassle. One issue is the need to be online in order to upload, write, or otherwise engage with the backend. I’ve yet to find a sufficiently simply way to manage Wordpress offline. This leads to a lot of cutting and pasting from files on my computer, which are then inevitably tweaked inside Wordpress leading to different versions, etc. At the same time, I really don’t like the database model for storage. One can never be positive about where the SQL database is, and the .xml file format is difficult to parse out for backups, etc. Sure, I’m being totally picky here, but so it be.
As much as I love Wordpress then, I have been looking for a way to speed up my workflow, manage my files in my computer (locally, as the kids call it), and work offline in a productive way. This got me on to Jekyll, which is a great flat file CMS (content management system–the website you’re reading is built on it) and then I saw Paul talking about Grav and decided to give it a whirl. It’s a little more robust than Jekyll and with Paul proving a skeleton template, how could I not jump in, just to see?
Paul’s done the heavy lifting here and his work makes the initial install pretty straightforward. That said, a few things before I get into my workflow:
1) You’ll need some server space of your own. If your institution can give you .ftp access to some space and a domain, awesome. If not, go with Reclaim Hosting or some other provider. If you’re in British Columbia, and planning on having students interact with your website using sign-ins, or identifiable markers, make sure you get servers that are located in Canada (be sure to ask where the hosting company backs up its servers–that needs to be in Canada too). 2) Once you get hosting, they should provide you with some “scripts” that will help you automate the install process. Grav is a popular piece of software, so most hosting companies have something such as “Softilicious” that will walk you through installing the base Grav software on your server. If not, refer to Paul’s walkthroughs or Grav’s. 3) I’m pretty comfortable in Markdown. You might not be. That’s okay. But, you’ll need some kind of text editor to imitate my workflow. I use Byword, Text Wrangler (Mac only) is good. There’s tons of text editors out there for cheap or free, go and get one if you don’t like using Notepad or Textedit defaults. Markdown is great. It allows you to work in basic text so that your files can be imported into most word processing software without formatting issues. There’s a great tutorial from The Programming Historian.
Ok, now that’s over, let’s roll:
Step 1: Mirror the Content
While you can use GitHub to mirror your entire website, like Paul does, I like just mirroring the folder I will use the most–the “pages” folder that holds everything content-wise for the Course Hub. To this end, I only build the shell of the Course Hub once. From then on, I’m just uploading the content files. So, I installed Paul’s awesome install kit, which includes a plug-in that allows you to make adjustments inside the CMS like Wordpress would, online, and all the files you need with handy examples. The best course of action here if you’re really new is to flip back and forth between the inside of the CMS and the outside, getting a feel for how Paul has set things up. To be honest, with the plug-in installed the Flipped LMS looks and runs a lot like Wordpress, but without the database file.
Next, I go onto my server, into the Grav install and pull down the “pages” folder onto my computer. The “pages” folder can be hard to find in the morass of files that is a Grav install. Go to your main directory, where Grav is installed, then “users” and then “pages” is in there.
The advantage of just cloning the “pages” folder is that now all I have to upload and manage from my computer is the content. I don’t need to re-process the whole site, or even deal with it. I just leave that alone and work on the content.
Next, I turn in on my computer, and wherever I downloaded that “pages” folder, is a copy of all the content I have on the website.
Step 2: GitHub
You can skip this step if you want. I do it because it provides me with a backup space and a way to access files if disaster strikes my computer and because I like to work in the open. On GitHub–and you’ll need an account to do any of this–I create a new repository and load in the files for my course and that “pages” folder you just downloaded. I rename the folder to “pages-inside-grav” so I don’t get all confused. I only want the files inside that folder so I can rename the containing folder and be okay. Don’t rename the stuff inside. That’d be bad. At least at this stage it would be.
Moving right along, I then clone (or sync) this with the Github Desktop app and I have a nice local setup with everything I need for the course in one place.
Now I have a local copy of what’s on the website to work with and a copy of that local stuff on Github. When I am done working with it, or whenever I have an internet connection, I just sync the folder to Github and I have a backup of all the content files I need for the course and I can track the changes, or rollback, if I need to. What Github gives me is a way of keeping track of when I added new stuff to the Course Hub.
I don’t have a backup of the whole Course Hub, but I don’t want one. Remember, I just used Paul’s skeleton course template and I haven’t made any changes to it fundamentally (I will be changing the content, but not the functionality). If I needed to reinstall, I would just re-load Paul’s skeleton. Then upload the contents of the “pages” folder from my computer–or Github–to the re-installed skeleton. Done. This makes cloning a site, or making another one somewhere else, dead easy. Thanks Paul!!
Step 3: Making and Designing
To begin actually producing content and putting it where it belongs, let’s look at the structure of the “pages” folder and the stuff that’s in it.
As you can see, there is an “item.md” or “blog.md” or whatever file inside the folders. These “item.md” or “blog.md” files are where you’ll change Paul’s examples, or add stuff where it’s blank. The folders are your guide to what’s actually in there. So, “week-01” has week one’s materials, etc. As with most flat-file systems, the file / folder naming conventions are important. Make sure you keep it all lower case and use hyphens not spaces.
The other important thing of note here is that a number and period in front of the folder means that the folder is visible on the navigation line of the website.
The number on the folder corresponds to the order it appears in the list up top on the navigation bar. The “Grav ->” link is there by default–we can give a shout out to Grav, right? The only maybe confusing thing is the “Home” = “01.blog” folder, but once you know that–easy-peasy. If you want to add a new navigation header, just make a folder with a number in front of it and add an “item.md” file like in the other folders and go.
To get a start with the actual content, I’ve opened the “sidebar” folder, which unsurprisingly corresponds to that sidebar on the website. Then open the “blog.md” file that sits inside the folder–remember, it’s the files inside the folder that matter. You can see that info is the same.
From here, you can change that information, add a few new headers if you like, switch the Twitter stuff around (you can just change the info in Paul’s example, or consult the Twitter info to change that. Or, just delete everything and start over with whatever suits you.
Save the new file and move on to the next. Making changes, adding content, hacking through. You can figure this out on your own. Essentially, open a file inside one of the folders, make some changes, save the file. Repeat as desired. You can set out the whole course or just change the odd thing.
One thing: with the files inside the “01.blog” folder, particularly the ones that correspond to the weeks in the course, you need to know about the “published” markdown file header. File headers are important in markdown because they tell machines the details of what’s about to be loaded. If you don’t want the file to show, you need to put in “false”; if you want it to show, you need to put in “true.”
There’s lots of stuff like this you can add to headers in markdown. Google it; it’ll be fun for you.
One of the areas of maintenance in the Course Hub then is to make sure and change that “publishing” head to “true” when you want it to be seen. Don’t forget!
Step 4: Redeploying
Now, you don’t need to do all this every time you make a change. You can make all your changes and just upload everything at once. This is, to my mind, the real beauty of the flat file system. I can make all the changes and add all the content offline, using files on my computer. And then, when I am ready to go, I can deploy the whole mess to the website. So, instead of incremental changes in Wordpress, where I work page by page, post by post, reloading and online all the time, I just have to deploy / upload once.
I use Cyberduck, but you can use whatever .ftp client you like. Could be FileZilla or the always handy FireFTP add-on for Firefox. Doesn’t matter. What you’re gonna do is upload the files on your computer–in your “pages” folder, the one you have in Github–to the “pages” folder on the server.
Make sure you overwrite the files on the server–find the “pages” folder the same way you found it when you first downloaded it to your computer about 2500 words ago. Worried about overwriting? Don’t be too worried, we’ve got a copy of that folder fresh as daisies sitting on Github, remember. Any issues, or outright disasters, we can rebuild from that.
Once you’ve finished uploading and overwriting, your site is ready to look at anew. Go for it and bask in the glory of your awesomeness or weep at the feet of your failure. If there’s issues, go back and have a look at what you added and fix it, then redeploy.
Once you’re satisfied with everything you’ve done, go to the Github app–or the online repo where the everything is–and commit and sync the changes you made. And remember, Github has a change history, so if you want to roll things back for some reason you always can. You can also write in a description of what you did to help remind you of when you added things.
What you’re left with is as follows:
- A full copy of all the content on your Grav Course Hub sitting on Github, change historied, and backed up; accessible to anyone who might want it. Hey, work open or go home, okay.
- If you have others who want to help out, they can–just invite them to contribute to the Github repo and you can integrate their changes, or not. There are rules, even in the open.
- All the files for your course on your computer. You can make changes, add stuff, change stuff, whatever anytime you like without an internet connection or even access to the site. You can do the uploading later.
- A smooth and easy workflow that doesn’t involve databases, cutting and pasting, or a bunch of weird .php protocols.
Once you get the hang of things, you can change only specific files and learn that one folder can contain pictures relevant to that file–keeping everything nice and together. There’s plenty of room to grow.
In any event, that’s my Grav Flipped LMS Course Hub workflow. Maybe it won’t all work for you, but maybe you can take something from it of use. Like everything else in the world, working this way is about control over your content, where it is and what you can do with it. Thanks again to Paul Hibbitts for providing the template and the impetus for me to do something. Oh, and here’s the sandbox site if you want to look: http://watchtheedge.org/flipped-lms-sandbox/.
Share this post:
Licensed under Creative Commons Attribution-NonCommercial-ShareAlike 2.5 Canada