Welcome to the new website!

So why didn't I do a WP install someplace like Digital Ocean? I graduated from a coding boot camp earlier this year, and I wanted to show off my skills. And doing a little bit of styling on a Wordpress blog didn't seem like enough. I wanted a challenge.

Since I was trained on the MERN stack, I decided I should build my blog with React.js. And then I learned about a static site generator for React called Gatsby. When looking at the options for deployment in their tutorials, I learned about Netlify. I push my code to a Git repository (this site's repo is a private GitLab, but I do have a testing version of the page with dummy posts on a public GitHub repo), and Netlify builds and deploys the site. At the moment the features I'm using (deployment, DNS, CDN, CMS) means I'm not having to pay anything other than the annual registration fee to my domain registrar to have this site online.

As for website features, the search function uses gatsby-plugin-elasticlunr-search. I chose it over the lunr plugin, because I found lunr sluggish even on localhost, and I didn't like not being able to run 'gatsby develop' because lunr generates a search index on build. Unless you need multi-language support, stick with the elasticlunr plugin. I could have implemented full-text search, but I chose to stick with merely indexing title, path, and tags because full-text returned some counterintuitive results.

And another component on the sidebar you'll notice is for loading my recent Instagram posts. I first wrote that component using the Gatsby plugin for Instagram, but then I realized that the behavior I wanted for the component (each page reload shows the newest post and current like/comment counts) wasn't static, but rather dynamic. So instead of using that plugin, I had to use a componentDidMount() call to fetch the Instagram data. I learned that the public API wouldn't work, and looked back at the Gatsby plugin and realized that the version that didn't use an API login worked by scraping with cheerio.

I used Bulma for styling in part because it was included in Netlify's starter for Gatsby. If you're not familiar with Bulma, imagine Bootstrap with no bundled JavaScript, and with an emphasis on Sass. At first I was considering switching to another framework, but after doing a bit of experimenting with another framework, I got annoyed with how little customization the framework that shall remain nameless would let me do, and gained a better appreciation of Bulma in the process. (The other framework isn't bad, and if you need to pull together a slick website in a hurry with no time to do fine-grained customization to your styling, it'd be great.)

Choosing Disqus for comments might seem like cheating, but I had my reasons. I could have done Staticman, but I didn't like the idea of each comment being a pull request, which means the site has to be rebuilt for every new comment. And I didn't want a comment system that requires an install on a server, because I'm on a 'serverless' setup here. Paying x amount a month solely for comments is ludicrous. I've got my eyes on commento, and might migrate to their hosted free plan when it becomes available.

There is one noteworthy disadvantage to my current stack...images in blog posts. Netlify's CMS puts images in a folder that gatsby-image-sharp can't use, which is bad from a perspective of responsive images. You'll notice that image heavy posts like the fifth grade poetry book load slowly. I might consider moving images to an image CDN to improve loading.

The main feature I have left to implement is a patterns page that pulls data from Ravelry's API to show all of my designs. I'm planning on the component being dynamic rather than static.

Okay, if you're not a developer, the above probably read like this gif of static.

I've historically been terrible about writing blog posts with any kind of regularity, but I'm going to commit myself to writing three more blog posts by the end of this month. The posts I plan to write are:

• A tutorial on how to do the increases on Alfareria. Yes, I know it's kinda odd how I did them, but I do have sound reason for why I did them that way. And I think it'll be easier to understand how to do them with photos.
• The story of taking three cats from Texas to Kansas by myself.
• Recipe for my cornmeal waffles. Along with a serving suggestion involving Thanksgiving leftovers.

Tags

• coding
• design thinking
• react.js
• gatsby.js
• search
• cheerio.js
• bulma
• sass