January 05, 2021
I've updated my website to build using GatsbyJS on GitHub Actions with Tailwind CSS. It should look quite a bit nicer now!
It's fairly ironic that I design websites for other people, but before now, my website has looked simply awful. I actually started to rewrite my website using GatsbyJS a little more than a year ago, but then I ended up working on several other projects and it's sat on my hard drive for quite a while. In particular, I've added this "blog" system, which I hope will give me a location to provide some reference in use of my software, such as the AnchorLogoot project once that matures a bit. I'm also hoping that I could use this as a location to document some of my engineering projects and what I've learned from them since I suppose it's a good idea to keep a public record of some of that work.
Though I find Gatsby to be quite useful, especially on a site with lots of images, I've encountered a fair number of problems with it. For example, Gatsby has suffered from performance issues.. In the case of a friend's website, it took hours to build a website with hundreds of images. Furthermore, I've often encountered issues where updating an official Gatsby package by a minor or bugfix version only causes breakage. This is not to say that you shouldn't use Gatsby: I'm aware of these issues yet I still use it. It's just good to keep in mind that the site doesn't maintain itself.
Gatsby does build an insanely fast website for your visitors. In my view, the occasional slow build and dependency issue is worth the super fast website, especially since my images are properly scaled and given a sourcemap. Plus, I can write my blog in markdown and have it generate HTML. If you are comfortable dealing with a few problems here and there, I would certainly recommend Gatsby.
I decided to use TailwindCSS for styling. For areas
like the navbar, it's quite a bit easier to have the styles right in the HTML,
though I did have to use plain CSS for some pseudoelements. For the actual style
itself, I decided on something similar to the Glow theme that I wrote for Matrix
Notepad, but with sharper corners. In particular, I used clip-path
to create
rectangles with slanted corners, which you can see with the blog tags and the
projects. Unfortunately, these don't work on Internet Explorer, but IE is slowly
disappearing and the fallback is just a normal rectangle, which I'm fine with.
There's still a fair number of CSS bugs to work out, but nothing too horrible.
Overall, the code styling is a bit weird, too, since I'm not using ESLint, but
that's not at the top of my priority list.
I'm still running my website off GitHub pages, but I'm looking into IPFS-based solutions as well. However, I have my concerns with the speed and reliability of IPNS, and I don't want to use my DNS to point directly to the content address if I plan on updating the site frequently.