August 8th, 2016

Hello World, Let's Do This Thing!

Ok! Let's try this again. It's about time I had a proper website. I mean, it doesn't need to be fancy, or anything too complicated. No, it doesn't even need to be built on a complex content management platform, or even query a database. Right? I mean, content is king, and most people really don't care whats going on behind the scenes. Regardless, you're here. I thank you for this. You have a vast array of options out there and you're here reading these words. What you'll get here is a collection of ideas, ramblings, photos, and my overall perspective. If that matters to you, then you're in the right spot.

hello world

I confess. While I'm having a lot of fun creating and maintaining this site, I have one pretty basic goal. This site is meant to act, primarily, as a means for personal expression. A happy side-effect of this expression is that I connect with like-minded, genuinely interested people. This blog is in no way meant to be a platform from which I can cast my influence. This is an experiment, which I enjoy. It is safe then to assume I created this blog for my own selfish reasons, and to pacify any inner desire to externalize my thoughts, feelings, or other aspects of my own very human experiences.

Interested in how this site was made? Maybe? Here are some tools I used:

metalsmith : my static site generator

metalsmith - similar to other build systems, like, if you've ever used grunt, gulp or webpack, you're well on your way to working with metalsmith. Like these other build systems, you can create a 'pipeline' that is used to process a series of targeted files. In my case, markdown (.md) files were the render targets.

The cool thing about metalsmith is a) it's all JavaScript and b) that it's pretty easy to write plugins use can use to further customize your data (posts, etc) for rendering. For example:

EXIF data = metadata

You may have seen the images on my homepage have a series of data points below that represent aspects of the picture. These data points, exif, are gleaned from the photo itself right before rendering the HTML view. I used an npm package called node-exif. Basically, this package looks at a bunch of images (jpeg), processes them, and extracts all the exif data imprinted when the photo is taken. I then wrote a lightweight wrapper around the exif extraction so that I could feed the output data into the metadata used by metalsmith when rendering HTML. Then, I wrote a very simple function that takes the incoming metadata, looks up images by file name, and renders it along with the image. There are plans to open-source, if you're interested, let me know. I'd be happy to share details.

Server Side React Templates (sort of)

First, let me prefice that title by saying this site is not actually rendered on the server. There is no server. And secondly, I, like love React.js for rendering user interfaces. It took some getting used to, but I'm sold on the approach, and have rediscovered a genuine enjoyment for writing front-end code. In the case with metalsmith, all the rendering happens 'server-side', if you will. There is not, currently, any react code babel 'transpiled' code being executed after the browser loads the HTML document. React is used in conjunction with metalsmith-react-templates, which is an adapter so metalsmith and react can play well together, to generate fully rendered HTML. You get all the power of React components inside of your metalsmith pipeline. It's actually pretty great.

Development Experience

Once the pipeline for metalsmith is fully operational, it's pretty much like running on auto pilot. Granted, you'll need to add some handy plugins to get some of the basic blog functionality (i.e: permalinks, excerpts, markdown parsing, asset management, etc). This alone can get you pretty far. However, I like a good development experience as well. For this site I leverage npm scripts to execute a series of 'watchers' that look at my files and then rebuild the HTML when changes are detected. This is especially handy when writing React components. To accomplish this, I used the infamous nodemon to watch my files and re-trigger the build. This is super handy.

Amazon S3

One of the benefits of running a simplified system like this is that hosting is a breeze. Check out the docs on how to get going with hosting a static site with S3. You'll be happy to notice a significant decrease in your hosting cost as well. Remember, I don't have a database. My file system is my database. I'm using Amazons S3 technology to serve the static HTML files built by metalsmith, which means -- I don't have to write the server. Sure, I supposed I could just drop these static files in any old FTP location and be done with it, but the advantages of working with Amazon S3 are pretty clear.

  • caching
  • versioning
  • image and asset hosting (think, CDN)
  • performance
  • storage (couple GBs for pennies)
  • uptime / availability
  • scaling up is easy

2017 : James Walton : Digital Carpentry