This content originally appeared on Go Make Things and was authored by Go Make Things
A few months ago, I shared some tips and tricks for working with static site generators (or SSGs). It was primarily focused on creating and publishing content, and the mechanics of day-to-day use.
One of the most common questions I’ve gotten in response to that article is how I actually build a website with an SSG. Specifically, how do I compile and bundle my CSS and JavaScript, and reload the site to test how it looks.
Today, let’s talk about that!
Build tools
I use my Build Tool Boilerplate to compile Sass files into CSS and bundle JavaScript modules into a single file. It also handle minification for me.
(Aside: if you want to learn how to create your own build tools setup, I’ve got a course all about that.)
When I’m actively doing development, I use that.
Sometimes, I set it up to watch for changes to my Sass and JS files and automatically run a build. But more often, I make a bunch of updates and then manually run npm run build. I don’t know why I prefer to manually run it, but I just do.
Hugo, my SSG of choice, now includes tools that will process Sass and compile JS files, but I run an older version that doesn’t do those things. And even if I had a newer version, I prefer the flexibility of running my own system.
Eleventy, another popular choice, does not currently have any compiling tools baked in.
Watching for updates
With a static site generator, you will have a folder that you can put static assets. These are files that should be copied over as-is.
I tell my build tool to compile all of my files into that directory.
Hugo and Eleventy both have a built-in server you can use to view a local version of your project. They also both have commands you can run to watch for changes in your project and recompile the site.
In Hugo, I run hugo --watch.
Eleventy has a similar --watch command, but requires a bit of configuration about which files to watch. You might also want to add a delay to Eleventy’s build to make sure your CSS and JS finish compiling before it runs.
That’s it, really
Just to recap, I use my own build tool to compile my CSS, JavaScript, and more.
Then I use my SSG’s --watch command to detect when the build tool generates new files, and load them into a local server.
There are probably more sophisticated systems, but in my opinion, simpler is better, even if it involves just a touch more manual work on my end.
Liked this? Get 15 FREE self-paced JavaScript projects. Each one includes a few short lessons and a template to get you started. Click here to get started.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2022-10-04T14:30:00+00:00) A workflow for building a website with a static site generator (or SSG). Retrieved from https://www.scien.cx/2022/10/04/a-workflow-for-building-a-website-with-a-static-site-generator-or-ssg/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.