Using markdown in static sites made with webpack

When creating static sites with webpack, long articles can be a hassle.

Well, since it’s a static site, it’s natural to have such use cases. So this time, I’ll make a note about “using markdown in static sites made with webpack”.

What I use is pug. Personally, I recommend pug. Not only does it make markup easy, but you can use variables and share components, which is super convenient. Also, it’s technically stable, so in the ever-changing frontend world, it’s a reliable tool.

If you’ve never made a static site with webpack, check out this article. It’s made with pug.

How to create a static site layout with webpack

Enable markdown

Use pug’s Filters feature.

Install jstransformer-markdown-it

% npm install --save jstransformer-markdown-it

After installing, just write the following in your pug file. This way, pug will read the markdown file and compile it. Even long articles in markdown are no problem!

include:markdown-it text.md

• JavaScript: My First Syntax Check
• How to run JavaScript locally
• All About Webpack Image Bundling
• Creating Static Site Layouts with webpack
• JavaScript: How to Add onclick to Dynamically Generated Inputs