Markdown

Learning Gulp : part 17 of 22 published on Aug 10, 2015

Now for something atypical. We are going to use gulp + Handlebars to create our own Jekyll-like CMS system.

First, we want to be able to process markdown files and create html files.

SURPRISE! gulp plugin.

$ npm install gulp-markdown --save-dev

We will read all the markdown files in the contents/pages folder and generate html files.

// /gulpfile.js
...
var markdown = require('gulp-markdown');
...
gulp.task('generate_pages', function() {
  return gulp.src('content/pages/**.md')
    .pipe(markdown())
    .pipe(gulp.dest("build/pages"));
});

Now to test our task, lets create our first page.

<!-- /contents/pages/first_page.md -->
# Isn't markdown great!

Yes, it makes a **bold** statement.

When we run our gulp generate_pages task, we will take the markdown and convert it into html and place the files in the build/pages directory.

$ gulp generate_pages
Using gulpfile ~/js/gulpwalkthru/gulpFile.js
Starting 'generate_pages'...
Finished 'generate_pages' after 22 ms

If we look in our build/pages directory, we should see our new html file.

<!-- /build/pages/first_page.html -->
<h1 id="isn-t-markdown-great-">Isn&#39;t markdown great!</h1>
<p>Yes, it makes a <strong>bold</strong> statement.</p>

And if we visit http://localhost:8000/pages/first_page.html we should see our generated webpage.

Next: Handlebars