Junior Web Developer

How to Create a Minimal Metalsmith Blog

December 10, 2016

I've been experimenting with static site generators for a few months now. I first started with Ruby-based Jekyll, before moving to Go-based Hugo, and now (2017) Metalsmith.

Metalsmith is built with Node.js (Node gives you the ability to run JavaScript in your computer, something that in the past you could only do on your browser). I searched around for a good tutorial to build a basic, minimal blog in Metalsmith, an increasingly popular static site generator built with Node. The best one I found is this Metalsmith tutorial by Parimal Satyal.

I am not going to repeat the instuctions here because you will be better off just checking out the tutorial. I am just going to summarize the main steps:

  1. Download Node.js and npm.
  2. Create and navigate to a directory for your project.
  3. Create a src folder, where all your content and templates are going to be.
  4. Create a package.json file where the meta information about your site is going to be.
  5. Download and install Metalsmith.
  6. Create a build.js file, where the flow of instructions to create your site are going to be.
  7. Update package.json to "tell" it to run build.js every time Metalsmith is run.
  8. Test-run your installation by typing npm start from the command line.
  9. If everything is OK at this point, download all the Metalsmith modules you need, one by one, updating your build.js each time, to add them to the build flow.
  10. Create some templates and place them in a folder named /layouts.
  11. Write some blog posts.
  12. Run Metalsmith by typing: npm start
  13. Go to localhost:8082 in your browser, and you should see your site there!

Aside from the instructions in the tutorial, I threw in a link to Bootstrap to give the files some minimal styling.

Don't try to follow the instructions above; they are just notes-to-self to remember the basic steps to create the site. Go to the tutorial instead, and follow the instructions carefully.

I have placed the source files of my newly created Minimal Metalsmith Blog in Github. You can also see a Live Demo here.

tech javascript metalsmith

© 2019 Crafted with Metalsmith and deployed to a DigitalOcean VPS.