I had this personal project because I saw the self-made blog my coworker made is awesome. Then I was lucky to have a predecessor to teach me how to do this project. However, trust me, node is hard, it's really pain in the rear. It almost killed me several times. Fortunately I made it, and to be honest once you set up everything for node.js, it can provide you with lots of awesome useful functionalities. I am sure if you want to learn something about node.js, you will suffer from it, but after you are done it, you will be very proud of yourself.

I try to be a nerd every month(try to post a new technical related passage every month). I should have posted this blog last month, I was so busy with my new semester. BTW, I miss my summer so much!!!

Check my personal blog website with http://myblog.hanbingyan.net/

First of all, I have to say there are lots of ways you can use to make your personal blog which means you can definitely find another approach to generate static site for blog. I might choose the hardest way cos it's related to node.js, and most important is, I am generally a nerd, you don't need to be lol. I will try my best to introduce how to use this dumbest way.

Actually node.js has very rich content and powerful function, metalsmith is just very small part of it. At very beginning of your project, you need to install node in your computer. It's better to develop this project within Linux or Mac. A simple tutorial to play with node.js if you didn't have any experience for it:

All of the logic in Metalsmith is handled by plugins. You simply chain them together. Just like the previous picture I showed .use(xxx), xxx represents the tool you want to use. Let's go into some detail of metalsmith:

• You are using Metalsmith, so of course first you need to have something like this:

  Syntax:

    Metalsmith(__dirname)
      .use(markdown())
      .use(templates('handlebars'))
      .build(function(err) {
      if (err) throw err;
    });
  

• Markdown syntax: .use(markdown()) which helps translate any markdown file inside src folder into .html file.

• Templates syntax: .use(templates({engine: 'handlebars', directory: 'templates' })) which goes to src/templates to get a template .htb about how the html structure is when anything in markdown file defines metadata using template: xxx.htb

• Collection You can classify your .md file with the name of collection. For example, inside src folder I have another folder called blog. Collection helps me give a metadata of collection: blog to all the .md files in the Blog folder. In this way, you can simply write down a .md file for each blog in the blog folder, so later when the system tries to find any of your post, it can easily traverse your blog collection.

  Syntax:

    .use(collections({
        blog: {
            pattern: 'blog/*.md',
            reverse: true,
            sortBy: 'date'
        }}))
  

• Permalinks You can get separate folders for each blog html file with the name of post title. See collection plays an important role here cos you only give permalink for those with metadata of collection which means all the .md files in src/blog.

  Syntax:

    .use(permalinks({
      pattern: ':collection/:title'
      }))
  

• Tags You can use tags to find the post you are interested in. Click any tag, it will take you to the page which shows all posts related to that tag.

  Syntax:

    .use(tags({
      path: 'topics/:tag.html',
      template:'/topics.hbt',
      sortBy: 'date',
      reverse: true
      }))
  

Metalsmith has rich material. I recommend you should check http://www.metalsmith.io/, it shows all the plugins you can use in metalsmith and each one has tutorial of how to use and source code which can help you understand.