Generate static sites easily with Parcel

Photo by freestocks.org on Unsplash

Since FTP based flows started to slow down and the rise of git flows, we are generating more static sites than ever. We now have access to tools that are both easy, cheap and performant, be it CDNs or CI/CD toolchains. This gave birth to a whole new phenomenon called the JAMStack and a new approach to web development.

The static site builders behind the JAMStack are getting better and better, but I find them sometimes overkill for simple websites. If you take a simple personal website, it just contains basic contact info and nearly never changes. Tools like Hugo or NextJS can be a bit tedious to use for such a small task. Neither the less they also provide some really important optimizations out of the box: extended CSS, JS and HTML minifying, image optimizations…

So what if you want a really easy to setup, fast and powerful static generator? Here enters Parcel 📦.

Parcel-bundler: Taking the complexity out of web bundling

The time was a website were a simple string of HTML markup is long gone. Nowadays, a website uses multiple different languages and should be able to run on widely different browsers, displays, and devices at blazing speeds. To do that we need to bind together all our source files, and process them to allow compatibility, minification…

To do that we now have tools that allow us to take care of that instead of doing it all the wiring by ourselves. These tools are called bundler. The most used one is called webpack. It is a really powerful tool that allows complex modification and bundling with fine-tuning. But for a lot of cases, it’s kinda overkill and can be really complex to configure. This steep learning curve was one of the reasons for the creation of Parcel.

Parcel is aiming to do the same job as webpack with close to no configuration. You actually could use it without any configuration and it would take care of most of the required steps for optimizing your bundle. In our case, we want to create a simple static site, like an online resume. To quicken our development we can add a few capabilities to Parcel that will help us.

HTML on steroids 💪

Writing HTML markup can be tedious, even with tools like Emmet. Unfortunately, Parcel only takes default HTML as an input (also JSX if you are working with React). To get things done faster, I like to use the Pug (previously Jade) templating language. This also gives us access to includes and thus partials. Code reusability is also a thing in HTML.

We can add the file posthtml.config.js at the root of our project (with the package.json file) to enable PostHTML after adding its dependencies. This allows us to parse and transpile Pug into HTML:

npm i --save posthtml-pug

We can also add other posthtml plugins later on like posthtml-md or posthtml-schemas. Parcel minify HTML by default so that’s all that we required for taking care of our markup.

Choose your CSS flavor 🍰

By default, Parcel supports CSS, LESS, SASS, and Stylus. But I am a fan of PostCSS and CSSNext. Its fast and more importantly allow us to all the features of CSS while still be compatible with the desired browsers. Even more interestingly, when the CSS specifications you are using are being added by browsers, you won’t have to change anything for your CSS to work even better.

To add support we just drop a configuration file in there postcss.config.js at the root of our NPM project.

And then also its dependencies:

npm i --save postcss-cssnext

Modern JS for everyone 🚀

It became a standard to use modern JavaScript for development and to transpile it into a more broadly compatible flavor of JS. For this, Parcel includes Babel. It uses the default env preset for compiling JavaScript. We can modify it by adding a .babelrc file at the root of our project, but that is not necessary for our simple static website.

Let’s put it all together 📦

Now that we configured everything we can build our site. For keeping things tidy, let’s add a start and build command to our package.json

"scripts": {
"build": "parcel build src/index.pug",
"start": "parcel serve src/index.pug"
}

This way we can just type npm start for development purposes. This will spin up a development server with hot reloading enabled for instant feedback on your modifications. npm build will build an optimized bundle for production. This way we can even integrate this through a Continuous Deployment process directly to some hosting solution like Netlify. This way we can have an always up to date, blazin fast and free website.

I put up a small boilerplate repository with all the modification talked above to allow you a really quick start on my Github profile. Feel free to download it.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store