I released my personal website!

vypxl — Sat, 09 May 2020 18:36:06 +0000

This article was originally published on my blog: https://vypxl.io/blog/post/about-my-website

Hey! Welcome and thank you for visiting my first blogpost. Here, I want to talk about all the things that went into developing my personal website.

What you can see on vypxl.io is actually my fourth(!!) attempt on creating a website and blog for myself, the first three attempts remain unfinished though. Also, I won't talk about the great programming practices I used back then. But now I can proudly say that I have a personal website, one thing I always wanted to have since I started programming. Now then, how did I accomplish what you can see there?

Tech Stack

This website is built on top of a so-called JAMstack.
JAM stands for Javascript, APIs and Markup. JAMstack websites are static, generated pages that are hosted on a static website hosting service.
I'm using the static site generator Gridsome. It uses the Javascript framework VueJS under the hood, which makes it easy for me to extend the site with additional content.
For the API part, I'm using Sanity, a headless Content Management System. 'Headless' means, that it does not provide a frontend like Wordpress but you have to create a frontend yourself and pull the content from the CMS via its API.
The markup part has two sides. First, there is the obvious HTML Markup. I write most of the Markup in Pug (an HTML preprocessor) though, as it is more enjoyable to me than writing raw HTML. The second part is what I write my blogposts in. This would be Markdown. I use markdown because it is easy to write in and easy to convert into beautiful HTML. In addition to that, my custom Markdown renderer I made with the library Unified makes fancy adjustments like

rendering("Code").snippets;

or automatically linking headings.
For writing styles, I use Sass or, more specifically, SCSS. It allows for some niceties when writing styles I don't want to miss by relying on standard CSS.

Development and Deployment

I used Visual Studio Code for developing my website. In my opinion, it is the best code editor currently available. Gridsome, my static site generator, relies on NodeJS and Yarn, so I used both these tools. For hosting, I use Firebase Hosting. I chose it over other hosting providers because it gave me the most freedom in configuring my website and the most value for a free plan.

Instead of manually rebuilding and deploying the website every time I change something, a Github action takes care of the redeployment. When I push a commit to my master branch or when I publish a new post in my Sanity dashboard, Github actions rebuilds the website and deploys it to firebase.
I actually had to create a firebase cloud function to relay my Sanity webhook to Github, because Sanity does not allow sending customized HTTP requests.

TL;DR

NodeJS, Gridsome, VueJS, Pug, Sass, Unified, Sanity, Firebase. You can find the source code of the website over on Github

Thoughts

I am satisfied with my website. As I said, it was always something I wanted to have at some point in my career as a programmer. Now that I finally released it, many more ideas come to my mind on how to extend it.
I want to do an RSS feed, a /uses page, host my old projects here, and much more. When I find the time, I might implement all those things, but maybe I won't. It was a fun journey learning new tech and developing good practices while creating this website. 10/10 would recommend.

If you have questions regarding my website or anything really, just ask me via my email or in the comment section.

Thank you for reading ☺️

DEV Community: vypxl

I released my personal website!

Tech Stack

Development and Deployment

TL;DR

Thoughts