Rebuilding with Eleventy

For this simple site, I’ve been hosting a minimal markdown to html application to manage this personal site. As my professional software development career has moved on I haven't programmed in PHP for years so it was time for this site to follow this transition and move away from PHP too. While I wanted to rebuild the site code, the underlying data for this site is managed in markdown. So ideally I would like to keep this data in markdown and only replace the html generation and also refresh the styling at the same time.

After some research, I decided to work with Eleventy, which will be able to build a static site from my markdown files and also provide a quick preview mode when working on the files. With a small .eleventy.js config file in the root directory it can even run without installing the package itself, meaning we don't even need a bloated node_modules directory, by using npx.

After reading the documentation and watching a short ten minute tutorial, my final config file looks like this:

module.exports = function (cfg) {
cfg.addWatchTarget("./src/**/*.css");
cfg.addPassthroughCopy("src/**/*.{css,jpg,png,gif}");
return {
dir: {
input: "src",
output: "build"
}
}
};

This configuration sets input and output directories — source files are in src and the finished website is output at build, as well as identifying that we want the styles and images *.{css,jpg,png,gif} copied to the website too.

Previewing the website is achieved by running eleventy with the --serve parameter, which runs a webserver hosting the output directory and monitors the input files for changes, which will then rebuild the website and refresh the browser. Both of these can be added to package.json too.

npx @11ty/eleventy --serve

The website files can also be generated without reloading and previewing with:

npx @11ty/eleventy

Once the website is ready to be released, the static files can be copied from the output directory to a web server and the hard part is done.

After this, there is opportunity to explore integrating the build and publish steps into a CI/CD pipeline to be triggered by changes to a code repository, when adding or editing an article or other page.

This turned out to be extremely simple with Netlify’s Wizard for GitHub integration and deployment for static sites. It detected my use of Eleventy and the only adjustment required for my setup was to specify that I'd changed the output directory to /build.

Formatting dates

After the initial rebuild I have explored some additional configuration options to improve the experiences of managing and reading the articles. Firstly was adding a custom formatting filter for dates to truncate the time from the ISO date format.

With this filter added to the configuration, displaying the dates in my preferred YYYY-mm-dd format can be achieved by applying the filter within the liquid template.

Originally published at https://brd.mn.

--

--

--

He/him. Interested in how things work; breaking things and fixing things. Hobbies include cooking, coffee, coding, music, and learning to surf. https://brd.mn

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Build Tools

React.js docker: A 20 minute weight loss exercise — 1.3GB to 25MB

Java Script and JSON for newbies

Configure Redux with React

Workshops warm-up #2 is here!

Making instagram.com faster: Code size and execution optimizations (Part 4)

Tailwinds CSS, Jetstream and oh Baby, LIVEWIRE. Add-ons Overhall. Yaml and more

JavaScript + Art Supplies

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
Philip Boardman

Philip Boardman

He/him. Interested in how things work; breaking things and fixing things. Hobbies include cooking, coffee, coding, music, and learning to surf. https://brd.mn

More from Medium

Creating an Instrument and Documenting a Moment

Install TOPO Maps on Garmin 530

How to Create A local Host in Windows?

Geocoding