Getting started is always the worst part of a project for me. There are so many possibilities when starting a new project, and so many choices to be made. When working on a job for work, it's easier to get started; I've got deadlines. But for a personal project you've got all the time in the world. To get over this paralysis I've adapted the same methodology in both my job and my personal projects.
How I like to approach my projects these days is to simply get started and assume some mistakes will be made. But to code my projects that mistakes are easy to correct. That the overall architecture of the project can and will remain regardless of changes to libraries, plugins or changes to the web. It's been my experience that the web changes, but good coding practices stay (mostly) the same.
That all being said, any new project does require that you make some decisions up front. So for this project, I've come up with a few requirements:
- The site should be hostable anywhere
- Extremely fast loading time ( <200ms )
- Be able to post from all machines I have access to (including mobile)
- Should use the most modern standard(s) possible for all things possible
- Have a blog
- Allow for 1-off templates easily
- Work on all social platforms (yes that's a tall order)
- Be responsible to the web community (more on this later)
- Be complicated enough to remain interesting
Not all of the above requirements need to be fulfilled during the first step of our project. So let's get started.
Part 1: The Basics
With respect to points #1 and #2 the easiest and in my opinion best way to achieve this is to generate a static website. Plus it's cheap, hosting with amazon S3 at just 3 cents per GB for storage and 9 cents for transfer; you can't lose. Additionally these points cover everything I need to know to get started.
Now a truly static website is, as the wikipedia describes, a pain to manage. So what we need is a tool that generates a static site using dynamic data. From one or two projects I've written for clients in the past, I've found Metalsmith to be one of the best. It's simple enough that you can read the source code yourself and understand all of it; And it's very very easily extendable once you understand the concept.
Under my first commit for this project I've started with the simplest form of using Metalsmith as a Gulp task. In the below file, I use a variant of metalsmith called gulpsmith with a few basic plugins for markdown, templates and permalinks.
Note: I am intentionally going to gloss over the styling, html and deployment of the project in this part of the tutorial for later.
The important part task in the above Gulp file is the "metalsmith" task (lines 52-74). Within this task we first populate the gulpsmith task with all of the markdown files in the src folder. Gulpsmith in turn uses the regular Metalsmith plugins to first add collections to all the files for pages and posts, secondly to parse the content as markdown, thirdly to parse those contents into templates and lastly set the file structure for the output using the permalinks collection; Gulp finally outputs all of these files into the build directory.
It's as simple as that. In part 2 we will setup templates and markdown files to output a simple starter blog.