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?
This website is built on top of a so-called JAMstack.
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
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.
NodeJS, Gridsome, VueJS, Pug, Sass, Unified, Sanity, Firebase. You can find the source code of the website over on Github
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 ☺️
Top comments (6)
Checked your website at vypxl.io
Thanks for your feedback!
What browser are you using?
<at>, I have not tested other browsers, but in chrome, it seems to work?
A screenshot for your reference.
That looks as I intended.
What's up with the cookie dialog though?
Figured it out, has to do with how I enable cookies after 'Accept' was clicked.
Will fix that now.
Your first link is broken, missing L