HomeBlog
Jade for GitHub Pages : Polyvia - 羡辙杂俎
2015.04.14 20:42:36
Jade for GitHub Pages

Series: Polyvia

What will you learn in this post?

This post talks about setting up Jade environment on GitHub Pages.

Why Jade?

GitHub Pages uses Jekyll for static HTML generating, which is how this very blog be hosted. You may probably find Jekyll lovely, after some period of adapting. However, Jekyll is more suitable for generating blogs than some random Websites. For a more general Website, we usually need to save ourselves from writing tags after tags.

And Jade is what we needed.

Jade for GitHub

For sure, we can use npm install jade to install Jade locally and run $ jade afterwards to use it. But can we just upload *.jade files to GitHub and have GitHub Pages generate and serve the static HTML for us, as we do with *.md files with Jekyll?

Unfortunately, the answer is no.

Those who are familiar with Jekyll must know that we shouldn’t upload _site folder since GitHub Pages will generate the Website from markdown and other files for us. This design idea is clean and clear, that we should only provide the least necessary source file, rather than with files that can be generated from these source file.

But, no, GitHub won’t generate Websites from *.jade for us.

So, uploading both *.jade and the generated *.html files could be a solution, if not an elegant one.

Adding Gulp

This is not a post on Gulp, so you may have some basic idea of it before reading the following section.

With Gulp, we can have the HTML files generated instantly when we change the Jade file.

Include gulp-jade in package.json and ddd the following code to your gulpfile.js at suitable position.

gulp.task('jade', function() {
    gulp.src('*.jade')
        .pipe(jade())
        .pipe(gulp.dest('.'))
});
gulp.run('jade');
gulp.watch(['*.jade', 'js/*', 'css/*']);

I would also recommend jekyll-gulp-sass-browser-sync, which synchronizes the Web pages in the Browser once the watched files had changed.

Conclusion

With gulp-jade, we can generate the HTML files from Jade files locally and upload them to GitHub.

博文对你有帮助吗?如果有的话,要不要送我一本书呢?:heart_eyes:

Series: Polyvia


微信公众号“羡辙部落格”(xianzheblog)提供本站优质非技术类博文推送。

Creative Commons License
Every blog post in this site by Wenli Zhang is licensed under a CC 3.0 License, based on a work at Github. You can see the source code of this blog site at github.com/Ovilia/blog.

Comments

comments powered by Disqus