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

Recently I’ve been exploring online (aka “cloud”) IDE’s for use with my various Grav sites and to also recommend for other educators who use Grav with GitHub (as I do). Yesterday I happily discovered SourceLair, which provides a straightforward online environment to develop and test a variety of Web project types all within your Browser (or in my case on my Chromebook). Other noteworthy highlights about SourceLair include a full-screen Terminal and a public URL which can share with others to view your in-development work.

I’ve been pretty impressed so far with how SourceLair lets me remotely work on my Grav sites, preview/debug them using the built-in PHP server, and then push the resulting changes to GitHub (which are then automatically deploy using a third-party service such as Deploy or with SourceLair’s built-in support for git-ftp) - all within my Web Browser! SourceLair also provides university professors and students with access to one free project, along with several paid plans for Web developers - just contact them for details.

Step-by-step instructions

  1. Sign-up for a trial SourceLair account by choosing “Sign up with GitHub” and then provide the requested GitHub credentials and other required account creation information.

    SourceLair sign up page
    Figure 1. SourceLair sign up page.

  2. Once you’ve signed up for SourceLair press the “Start a project” button on your account welcome page.

    SourceLair welcome page
    Figure 2. SourceLair welcome page.

  3. Press the “Clone a project” button to clone a GitHub project to your SourceLair account.

    SourceLair begin a project page
    Figure 3. SourceLair begin a project page.

  4. Choose the GitHub repository you want to clone to SourceLair.

    SourceLair clone project page
    Figure 4. SourceLair clone project page.

  5. Choose “PHP” for the project type.

    SourceLair project type page
    Figure 5. SourceLair project type page.

  6. As Grav is a flat-file (no database) CMS, choose “None” on the Database page.

    SourceLair database page
    Figure 6. SourceLair database page.

  7. Name your SourceLair project (a default name will be provided).

    SourceLair name project page
    Figure 7. SourceLair name project page.

    At this point SourceLair will complete the installation of your project. If your GitHub repository only contains your Grav site “User” folder you are all done so you can skip to the bottom of this article. If your GitHub repository is an entire Grav site (i.e. including PHP files, etc.) then one more step is required so that the automatically updated Composer installs (indicated in the included “composer.json” file) are not included in your initial GitHub commit/push.

    SourceLair initial project display
    Figure 8. SourceLair initial project display.

  8. Press the “Terminal” tab located on the bottom part of the current SourceLair project page.

    SourceLair terminal panel
    Figure 9. SourceLair terminal panel.

  9. Enter the following Git command in the Terminal panel and then press the “Return” key.

    git checkout . && git clean -f -d

    SourceLair terminal panel with Git command entered
    Figure 10. SourceLair terminal panel with Git command entered.

    I would suggest you test everything out by making a small edit in one of your Grav page files, and then preview the files to be committed to your GitHub repository. To perform a commit in SourceLair using the left-hand toolbar, press the “Commit” (checkmark) button to preview/commit your changes and then the “Push” (up arrow) button to push all of your committed changes.

    SourceLair commit dialog
    Figure 11. SourceLair commit dialog.

    You are now ready to edit your Grav site using SourceLair, and if you have an entire Grav site stored in your GitHub repository you can also preview your site in-progress by pressing the “Preview” (eye) button on the left-hand toolbar.

    SourceLair site preview using the built-in PHP server
    Figure 12. SourceLair site preview using the built-in PHP server.

    If you just have your Grav ‘User’ folder stored in your GitHub repository, you might find SourceLair’s built-in Markdown file preview as a helpful alternative to a full site preview.

    SourceLair markdown file preview
    Figure 13. SourceLair markdown file preview.

    I hope you find SourceLair as useful as I have, especially when used with GitHub!

comments powered by Disqus