Hey ho, it's SmokeyFro!

It's been a long time coming, but I finally got around to creating a personal site that I'm proud of. This a complete rebuild of my tired (and somewhat half-arsed) version, which lived over at devignerforhire.com for a couple years.

The motivation behind the rebuild was multi-fold...

Firstly, I was never really happy with the old site. It was somewhat rushed and never finished and has been a thorn in my side for way too long. The story of the cobblers shoes comes to mind.

Second, I have a bunch of side projects which have been sitting stagnant gathering dust and rather than bouncing between them, bring the relevant stuff like my themes, tutorials, design resources, videos, photos under a single roof will allow my to continue to iterate and improve.

Third, I wanted to setup the ability for people to sponsor tutorials, as a way of generating some revenue through the site.

Lastly, I wanted a project where I could test out different components of the JAMstack and showcase my skills as a designer and front-end developer.

What's under the hood?

Now that's taken care of, I'm guessing you're wondering what is powering this badboy. I'll be writing a full rundown in the new year, but in the meantime, the basic components include:

  • Gridsome, a Vue.js based static site generator that consumes content from different sources.
  • Static site hosting on Zeit Now.
  • The themes, portfolio and side-projects content is generated from Markdown files, the blog and tutorials are coming from Ghost (where I'm writing this post), the upcoming tutorials list is coming from Google Sheets and lastly my resume and experience pages content is saved as a haml file.
  • The code is hosted on Github and is set to auto deploy when new commits are made to the master branch. There is also a deploy hook setup to rebuild when any public content is changed or added in Ghost.
  • I have Ghost installed locally (enabling my to write without an internet connection) and exposed to Zeit using Ngrok. I tried a few other port-tunneling services, but Ngrok seemed the most stable. I'll write more on that in another post.
  • For the search I decided on Flexsearch, which works nicely with Gridsome thanks this plugin. I extended my markdown files with a frontmatter field for search term grouping, so if you search for themes, it shows you all the themes or by content type or topic.
  • I'm using PostCSS, along with Nested and Imports and PurgeCSS to strip out any unnecessary styles.