Reworking Drafts in 11ty
I have had some difficulties working out how to do draft posts in 11ty and went with a standard solution that has worked well over the past few years. However there was one big drawback for me.
Last year I decided to reduce deployment times to the various hosts that I use. This was reasonably easy to do by dropping the build process on the hosting service. The downside of this is that I cannot use a web interface for posting or updating a site. I did test out some online cms solutions, which were fine, but I really had no need for them as its just me and I don't get out much. Additionally I had a couple of issues with versions of node having to be upgraded on the hosting platforms which wasn't a big pain but I have cut that oout completely but not doing a build. When I synchronise with git it triggers a file deployment without any build. Its really fast too!
11ty Draft solutions
So what's that go to do with drafts? Well the process I had meant that when I ran NPM Start the files would be built in public, my dist directory, and served locally for me to review. I'd set the new post to draft so that when I came to do a build it wouldn't be included and pushed up. Sometimes a post would site for a while while I mulled over it and another post or note would need to go up and in doing so the the files associated with the post, such as images, would be, and the way I had it set up the actual page could get deployed though it was orphaned and not in the sitemaps so would not be found. But that was too messy for me. I needed another solution.
Staging server
For many years when working in a Global Corp running their primary web presence we had a range of servers for different purposes.There was the content server where we would manage and build the sites content, a dev server for the devs to the dev things using the content from the content server. Then there was a UAT (User Acceptance Testing) server where we could see new things the devs had finished building with our content, and the staging server where we would push our content up to and check it before switching the live servers to it. So lots of ways to test before content and features got deployed. My 11ty setup wasn't really doing that. I need an intermediate server.
11ty draft function
I already had a function for drafts to only generate the files for local serving and changed this to:
export default function (eleventyConfig) {
eleventyConfig.addPreprocessor('drafts', '*', (data) => {
if (data.draft && process.env.ELEVENTY_ENV !== 'stage') {
return false;
}
});
}
This means the files marked in the formatter with draft:true only get written to the stage folder.
11ty NPM scripts
So I set up my NPM scripts to build out to a stage directory instead of public when I ran Start. The 11ty server delivers the local site to me for checking from the stage server. When I run the NPM Build script it rebuilds the files to the dist folder missing out any pages marked as draft and their contents. THis is all native in 11ty I just had not realised how I could do it.
My build NPM scripts
These are the two NPM scripts in package.json
Start
"start": "ELEVENTY_ENV=stage eleventy --serve --output=stage"
Build
"build": "rm -rf public && eleventy --output=public"
Issue's with this process that I had to fix
I did have a couple of instances where I was using a hard coded public path in some templates so that had to change to
I added stage to the .gitignore file asI really don't need all those files going up to git!
Disk space - it's an extra websites amount of space used on the hard disk but that's a price I am happy to pay.
Conclusion to reworking my 11ty Drafts process
I did have a couple of additional hiccups on the way but they were all my fault so will not mentioned them here. What I was surprised about was the 2k files deleted from the build that were not actually being used any more - mostly from a while back when I refactored my src sets for better efficiency.
I understand there will be a new Drafts process available in the new Build Awesome when its delivered (Eleventy v4) and look forward to migrating this site over to that next year. in the meantime I can now happily craft loads of notes and posts that I may never actually finish and i don't need to any more! Sorted.