A couple weeks ago, I remembered how awesome GitHub pages is. I also had been playing around with gulp for a few days, and I had the idea to redesign my website and host it on GitHub pages. In order to do that, I knew I would have to make the site static (i.e. no back end technologies like PHP running things).
gulp, Twig, & Markdown FTW
Setting up some static pages is easy enough, but I wanted to be able to easily add blog posts without needing to manually copy and paste excerpts onto the homepage of my site. I know there are things like Jekyll out there, but I really wanted to just roll my own solution so that I could use what I like: gulp, Twig, and Markdown.
I found a nice plugin that allows you to use Markdown inside of Twig templates, so I added that to my gulp setup. That was step one.
Next, I needed to figure out how to pull information from each blog post (specifically the excerpt, the post date, and the URL) and display that on the index page of my site. I almost gave up on this before I even started, but it turned out to be pretty simple. I wrote a function in my gulpfile which looks through all available blog posts, creates an array of objects with the data I need from each of the posts, and then sorts the array and returns it as a variable that can be used in my Twig templates (i.e. on the homepage template). From there, I can loop through the posts as you would any other array variable in Twig. With all that out of the way, I was ready to build my site.
Static = fast (but not fast enough)
I figured that making a static site would mean making a fast site, but I was pretty surprised by how fast it actually turned out. Even, so, there were things that I could do to make it faster. Using Google’s PageSpeed Insights tool, I found that I could really improve things by using a CDN and caching my resources. Lucky for me, CloudFlare offers both free of charge.
I was able to quickly add my domain to CloudFlare which automatically provides a CDN. Caching also comes straight out of the box, but I found that in order to appease Google, you need to really turn up the cache time (I set it to 24 days).
There are a couple of things keeping me from getting a perfect score from PageSpeed Insights, but I’m not sure if I want to mess with addressing them:
The first is loading my styles from an external file up in the
<head>. My master stylesheet is pretty small, so I could probably just inline my entire stylesheet up there, but at this point I don’t really want to deal with that. Maybe I’ll do that a few months down the road when I know I’m not going to be tweaking CSS.Secondly, I’m using Google Analytics. Google, for some reason, doesn’t follow their own rule and they only cache the Analytics script for 2 hours.
Whatever. I’m happy with a 97/100 for now.
CloudFlare is neat
Aside from providing caching and a CDN, I found that CloudFlare also offers free SSL which is great because I’m using deviceMotion to add a tilt/parallax effect to my banners. I randomly found out last week that deviceMotion is going to be deprecated for non-secure connections. Since I was already using CloudFlare, all I had to do was make sure all traffic gets redirected to the https version of my site.
Code
I debated writing a really long technical post about how I actually built my site, but then I figured nobody would care. Plus if anybody does care, they can just look at the repo which would probably be more informative than a blog post with random code snippets sprinkled throughout.