I created this site for two reasons:
- as a place to share some of my technical projects (programming, electronics, etc.) and maybe even regale you with some tales of my exploits
- as a reason to learn more about Jamstack websites and, specifically, Sapper (I have been using Forestry, Hugo, and Netlify for several years now) [Update: Sapper has been deprecated and will be replaced by SvelteKit. I will continue with Sapper until SvelteKit is ready.]
Under the Hood
This site is built with Sapper, which is a framework for Svelte (in much the same way that Gatsby is a framework for React). All of the pages (with the exception of the actual posts) are written in Svelte.
For the posts, themselves, I wanted to use Forestry as the CMS. Forestry only knows how to edit Markdown and JSON files (in JSON, YAML, or TOML format). Forestry is a headless CMS (it is decoupled from the hosting, it just pushes changes to GitHub). A post is edited on Forestry and when saved, it sends a commit to GitHub. Images are saved on Cloudinary.
Doing the posts in Markdown is not without its issues: if I create a nice component in Svelte, how do I get the Markdown processor to use it? This site is still very much under development as I learn more about Sapper.
As mentioned, the content is hosted in a repository on GitHub with images hosted on Cloudinary. GitHub is just a repo, while Cloudinary is also a content delivery network for the images.
When changes are pushed to GitHub, Netlify is notified. Netlify pulls the changes and runs the node.js build script to create the static site. If the build is successful, Netlify distributes the site to its content delivery network. Thus, I do not need to run a web server — Netlify handles that for me.
Diagram of this site's Jamstack
The site consists of markdown, Svelte, Sass, HTML, and javascript files built on the Sapper framework that are processed into HTML, CSS, and javascript and then distributed to a global CDN.
Design
I have always maintained that designers and programmers are at opposite ends of a spectrum. No one has ever been able to prove me wrong. Though, I did work with one designer who also programmed. He was it: the magical unicorn that every job listing is looking for — designer and programmer. At least it seemed like it until I had to modify some of his code. OMFG, no, just no, no, no… He is not a programmer; rather, a designer who knows how to write a little code, big difference.
What is the point of my rambling? I am a programmer who did the design for this site. I know that it isn't great. I just try to keep it from being awful.
The CSS for this site is written in SCSS. I use Clarion as the scaffolding to create ITCSS (inverted triangle CSS) files. And since this is Svelte, I also do SCSS inside of Svelte components (where it makes sense to do so) — keeping the code, styles, and markup in one file. I have pushed the envelope a bit when it comes to using new (and sometimes experimental) features of CSS. Older browers may not display this site correctly. I have attempted to make it fully responsive (working on the smallest to the biggest screens) and accessible to those using assistive technology.
Credits
I have to thank Luis Sanz for my avatar. He drew me as a character in a comic strip he wrote. He said that I always gave him the best material. I also have to thank Virginia Odien for converting my avatar to SVG. My talents end before the art line.