I released my personal website!
Tags: webdev
Published: 2020-05-09 18:36:06

> This article was originally published on my blog: [https://vypxl.io/blog/post/about-my-website](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](https://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 **J**avascript, **A**PIs and **M**arkup. JAMstack websites are static, generated pages that are hosted on a static website hosting service. 
I'm using the static site generator [**Gridsome**](https://gridsome.org). It uses the Javascript framework [**VueJS**](https://vuejs.org) under the hood, which makes it easy for me to extend the site with additional content.
For the API part, I'm using [**Sanity**](https://sanity.io), 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**](https://pugjs.org) (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](https://unifiedjs.com) makes fancy adjustments like

```js
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](https://nodejs.org) and [Yarn](https://yarnpkg.org), so I used both these tools. For hosting, I use [**Firebase**](https://firebase.google.com) 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](https://github.com/vypxl/website)

## 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 :relaxed: