Menu

Zero Cost, Zero Maintenance, High Value

on website, projects

This website has been up and running continuously for over four years at this point and somehow I never got around to actually showing off how it works. The good news is the projects haven't stopped-- I just have a problem marking things as "done" when there isn't a hard deadline and thus never get around to publishing them. I've been working on a couple of posts on and off for a while and will be working to get those out soon since I have some more downtime at the moment.

new website screenshot the website you're using right now

My goals for a portfolio site was to be a set and forget place to publish writeups, and have the capability to add some flashy stuff if desired. After a bit of research I settled on using Gatsbyjs to help me meet these goals. Since there haven't been any issues I've had to fix outside of the general node.js problems I figured it was worth the effort to bring everything up to date now 4 years later and trim any extra features/dependencies that I haven't been using. A nice side effect of this is everything is fresh in my mind and I'll take the opportunity to review how choosing this architecture has helped me reach my goals.

Zero Cost

"Zero" is a bit of a lie, I do have to pay for domain registration but the 15ish dollars per year is one of the cheaper expenses I have. One alternative if absoloutely zero cost is your goal is to use github pages and Jekyll as having a github domain is generally pretty accepted in the software world. I've personally used github pages in the past to create a very similar splash page as a placeholder until I got around to building out this current setup.

old website the old website

But ignoring that minor exception so far my costs to deploy and host this have been absoloutely zero. The biggest contributor towards this is taking advantage of the generous free tier offered by Netlify which includes Hosting/CDN, full CI/CD capabilitites, and hosted DNS. There's a few tradeoffs with this, mostly that the site has to be statically served which with modern tools really isn't that big of a limitation. I'll leave the sales pitch for "JAMStack" to someone else, but by using Gatsby I'm able to take advantage of all the power of a React frontend and still have everything served through a CDN.

Zero Maintenance

One nice side effect of using a static site is that generally if your site works properly on deployment it will keep working for esentially eternity in internet time as long as you aren't using some off label legacy or experimental browser features. No servers also means not worrying about uptime, scaling, security patches, or dealing with any of the other headaches that would unintentionally give you the title of "SysAdmin". Sometimes there is no better (or cheaper) option than to set up a bunch of servers for a project, but those cases are getting less and less these days in the web world and it's certainly not anything I would want to deal with unless it's actively paying the bills.

netlify screenshot netlify is a nice all in one Hosting/CI/DNS solution for small scale websites

There was one thing on the site that broke eventually, and that was the old version of google analytics, mainly because I ignored the numerous emails months ahead of time telling me that it was going to break. I can't remember where this originated from but I remember reading that "good software should be like an escalator, even when it's broken it still kinda works", and so unless you were poking around in the javascript you would have never known something wasn't working. I expect half the people using my site block most tracking anyways so losing the GA tag wasn't really a huge loss and I just pulled it out completety for the updated site. It is a good reminder that any time you're making Cross Origin requests that's an extra liability in terms of keeping up to date and protecting against XSS attacks.

High Value

Writing good content in general already takes a lot longer than you might expect. I wanted to make sure that publishing it to my own personal site would be just as easy as writing up something on Notion or Medium with all the extra bonuses that come from self hosting.

So here's the part where Gatsby gets really cool, whenever I want to write a blog post all I need to do is create a new folder in my git repo with a markdown file and dump any other related files in there. With the help of some plugins the site will automatically convert that to a web page using one of my react templates. For example here's what the source file for my first post looks like.

---
title: "The New Website"
cover: "https://images.unsplash.com/photo-1581276879432-15e50529f34b"
author: "labusaid"
date: "2020-05-26"
category: "website"
tags:
- website
- projects
---
The new website is launched! Still JAMStack but with a lot more features, and a React frontend!
I'll do a full writeup on it some time in the future so keep an eye out for that.

Gatsby uses GraphQL to shovel data around which is an extremely powerful tool. Using plugins called transformers you can convert various files into nodes in your graphQL database and then query them from any Component on build. The transformer I'm using for this example is gatsby-transformer-remark which uses remark to generate html from Markdown.

Here's what the GraphQL query for the main post content looks like in my React template.

/* eslint no-undef: "off" */
export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!, $next: String, $prev: String) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      timeToRead
      excerpt
      frontmatter {
        title
        cover
        date
        category
        tags
        author
      }
      fields {
        slug
      }
    }
  }
`

You can see here along with the html from the main post body I'm able to access all the metadata specified at the start of the file using the frontmatter node and it means I can skip having to add an additonal json file for every single post.

For basic text only blogs this would cover pretty much everything you need, but programmers demand more and for that we have plugins for our plugins. Here's my config for the Gatsby remark plugin.

{
    resolve: 'gatsby-transformer-remark',
    options: {
        plugins: [
            'gatsby-remark-responsive-iframe',
            'gatsby-remark-prismjs',
            'gatsby-remark-copy-linked-files',
            'gatsby-remark-autolink-headers',
        ],
    }
}

These meta plugins give me linked headers, custom syntax highlighting, correctly formatted iframe embeds, and the ability to dump any files I want to host on the site in the same folder as the blog post. There's also a whole host of other plugins I'm skipping over which help out with site performance, SEO, and pretty much everything else that goes into getting a respectable lighthouse score.

Thoughts on GatsbyJS

Overall I've been very happy with Gatsby for this site and don't see any reason to redo it, but many other static site generators have gained features and popularity since I originally built this. NextJS is probably the most well known among these and starting from scratch I would probably lean in that direction. NextJS has the capability to do either client side or server side rendering and has had tons of enterprise takeup so it will likely be around for a while. Really my biggest takeaway from this project is GraphQL is an excellent tool if you're working with really complex data sets or APIs. If you have no idea how your API is going to be consumed or you're often writing REST endpoints that only ever get used in one place than consider looking into GraphQL for your project.