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- For more information on
gulp-markdown, check out https://www.npmjs.org/package/gulp-markdown/
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 msIf 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'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.