Side By Side Markdown Editing with Grav CMS

Edit your Grav site's content like a boss with side-by-side editing that automatically reloads when you hit save. This article will show you how to set up an awesome markdown editing workflow for Grav CMS in just a few minutes.

Currently Grav CMS doesn't include side-by-side markdown editing in the admin plugin when creating or editing pages. Luckily there is a great work around for anyone with a text editor.

Prerequisites

Installing Node and NPM If you don't have Node and NPM installed, head over to the website and get the latest stable version of node. After that, I recommend installing gulp globally. The docs have more info about installing and using Gulp if you run into trouble.

Install Gulp CLI

npm install --global gulp-cli

Navigate to your /user folder

cd ~/Code/gravproject/user

Generate a package.json for your project

npm init

This will ask you some questions and generate a package.json file for you. See docs here

Install BrowserSync + Gulp in your project's dev dependencies

npm install browser-sync gulp --save-dev

Create a gulpfile.js in your user folder

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;

// Watch the pages directory for markdown changes
gulp.task('default', function() {

    // Initialized BrowserSync to your site's local domain
    browserSync.init({
        proxy: "yoursite.dev" // Change this line to your local URL
    });

    // Watch the themes directory for *.twig changes and reload
    gulp.watch('themes/**/*.twig').on('change', reload);
    // Watch the pages directory for markdown changes and reload
    gulp.watch('pages/**/*.md').on('change', reload);
});

Run gulp from your project's user folder

gulp

Assuming everything is setup correctly, your browser should automatically open a new tab with a url like localhost:3000 with your site. Try saving one of your page's markdown files and it should reload automatically in a few seconds!

What We Did
To review, firstly we've installed Node and NPM, then created a package.json file to track node dependencies. Then we installed gulp and browsersync, and created our gulp file to monitor markdown (and .twig) files for changes. Now when we run the gulp command, browsersync automatically opens a new tab that live reloads our changes to page and theme files.

Next Post Previous Post

Blog Comments powered by Disqus.