About this site

I have been blogging hobby projects for about 10 years now. Back then I chose a blogger site because it seemed like the quickest way to get some content online. I also chose that route as I knew basically nothing about webdev work. Well, fast forward 10 years, and I still don't know much about webdev work, but since then the internet and community software has really come a long way. So much so that even I was able to bang together this site just following tutorials and googling.

So, i'm writing this not so much as a tutorial, but as inspiration. If you're like me and are interested in what webdev has to offer, but have been intimidated by the vast and wild world of modern web frameworks, jargon, and even UI/UX, I recommend you dive right in - you might even find you love it. In my case, I was pleasantly surprised by the acceptable outcome.

A Static Site

This page is built with a framework called Gatsby. Gatsby is a static site generator meaning that I can write blog posts in markdown and Gatsby will pull those at at build time to generate the HTML for the site. This is the "generator" part. The "static" bit comes from the fact that this site only changes when you rebuild it - it is the same fixed site served to all visitors. When I learned about static site generators it sounded like the perfect solution. For me, markdown is a lot easier to write than HTML, and I don't post all that often.

So, I selected a Gatsby starter page, and got to work poking around the source and trying to modify things.

UI

One of the first things I did was to change the color theme of the site. Not because it was bad to start with, but because it is a simple task with dramatic results. First, I googled some HTML color pallets and found a one I liked. Then, I started plugging in the hex codes and rebuilding the site to see how the effects took place.

Next, I set about designing a logo. I tend to not think of myself as artistic, so the logo I made is actually just the schematic symbol for a Cathode Ray Oscilloscope. Probably not something you're going to be seeing many of these days, and to me it looks like the first letter of my last name - "M". So I drew it up in Inkscape using colors from the color pallette I previously selected and called it good.

I also added some link icons in the footer, but I still haven't figured out how to change their color...

Layout

Out of the box, Gatsby was displaying the most recent 6 posts on the front page. I wanted to change this behavior so that I could manually select which posts are displayed on the front page. So, I snooped around the code to figure out how Gatsby was doing this. I found that if I added a featured: true tag to each post's markdown file and modified the GraohQL query to return only posts that are "Featured" and "Published" I was able to achieve this. For the Blog page the GraphQL query still returns posts that are published: true to display all posts - even those that are not featured.

Hosting

I am hosting this site on https://pages.github.com/ - for free. It's basically just a repo with an index.html. Since i am using a custom domain name I also have a cname file with the domain name in it. Now it's just a matter of generating the site with gatsby, and pushing the resulting site up.

I have 2 repos. "PeteMillsDev" for the gatsby source, and "PeteMillsDevPub" for the github pages. When it is time to publish, from "PeteMillsDev" repo I run gatsby build. Then in PeteMillsDevPub I rm -rf !(CNAME) to remove all content except my cname file. For this to work shopt -s extglob must have been set. Next, I copy the contents of the built site to the public repo with cp -a ./petemillsdev/public/. ./petemillsdevpub/. Then commit and push and the new site will be available shortly.

https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/