Jack Keller

#BLACKLIVESMATTER

As a human being, and developer, I stand with the Black Lives Matter Movement and you should too.

Unintentionally Crafting a Framework

Let’s talk about the “framework” I used to build this website, along with a few more. I think that you’ll really like this overview!

 

Okay, so, I’m a Frontend Engineer working Remotely for a huge international company. You’d assume that I’d use something like React, Vue, or Angular for development in my spare time; but you’d be wrong.

So what am I using, and why

I’ve been a longtime fan of Static Sites because of their speed and near non-existent security risk. The issue most times with this is that a client may not have the technical know-how to keep something like this up and running.

Let’s examine the how, and touch upon the why I build websites the way I do. We’ll talk Tech, Limitations, and finally Wins.

A long time ago, in a galaxy far, far away

I used to develop sites in WordPress for my freelance clients because it was free and pretty easy. The issue was that it’s designed to be a Kitchen Sink, the “Everything to Everyone” model. This renders the final product as a Bloaty Pizza Hog #amiright?

I knew there was a better way using tools like Jekyll but the downside was that there is a slight learning curve to folks who do not develop websites for a living, I tried to teach my wife how to write Markdown and she said that it was dumb. What seemed natural for me, wasn’t the case for everyone.

For the most part, I would update clients’ websites for them using a monthly retainer model, but not all clients had a really deep set of pockets and desired the ability to edit their website, themselves. What a novel idea, right?

A bit over a year ago I started seeing a ton of information about Netlify popping up in repository after repository; deploy to Netlify was all the rage! When you start seeing that sort of trend, you logically want to check it out for yourself. So I did, and boy was that a great endeavor! I quickly learned that Netlify had a “CMS” that is basically a git-gateway allowing one to edit their site but not save things to a database; instead, it fires off git commits to a repo. Then using git hooks, it will redeploy the site to the server, which is free at a base level!

I began using this for a few of my personal sites, until I realized that I had been unintentionally building a framework of sorts that I could use for other projects/clients. I started a new repo and began building this framework for reals! GitHub also provides a really neet template thing so you can use a repo as a boilerplate for a new repo!

Great, so what about the Tech

I mentioned Jekyll, and Netlify, but what else is there, what makes this framework outstanding to me? Well, it’s everything I enjoy using and nothing I don’t!

The concepts I’ve used could change drastically for you, but that’s why I’m so excited, you can build your own boilerplate using the technology you prefer! Below are the technology bits I’m using:

  • Pug for markup/templating
  • Jekyll-Bliss to integrate/convert Pug
  • Sass (the dreaded .sass syntax others don’t like as much)
  • Netlify CMS as a CMS, but not a CMS, it’s using a git-gateway

Yay, you built a Jekyll site

Yes, well, it’s aggregate. By leveraging different bits and pieces I was able to build a framework for rapid development. This site, for instance, took me a total of 2 hours to develop and deploy, sure I had created the initial design concept in a Codepen a few days ago, but to release an entire site in that amount of time sure seems impressive, no?

Sounds cool, how about Limitations

Current limitations are that I’m tied to Netlify, there are a few efforts online that are working on getting this CMS to be able to host on AWS. You need to incorporate a 3rd Party solution if you need something like membership functionality.

You spoke of “Wins”

Performance is a huge win in my mind, it’s just not enough to make a visually appealing website with killer content, people still need to be able to use it. Perhaps the biggest win is just how fast you can get up and running in this type of framework.