In January 2022 I decided it was about time I revamped my personal website. I previously had a basic Jekyll blog, that was set up some time ago. The problem with it was, that it felt just like what it was: a blog. What I wanted instead, was an actual personal website, that would give the viewer an idea of who I am.

Technology

As always, with any web project, there are limitless possibilities when it comes to deciding how to build the page. I decided to use Next.js, as I previously enjoyed using it for a university project, where me and my fellow students had built a highly interactive application with it. I had also wanted to dive in deeper into topics such as server-side and static rendering, which this relatively simple and static site would be perfect for.

As far as building the actual React components goes, I decided to use Chakra UI. This also meant that Framer Motion was already bundled, so it made sense to use it for animations.

When it comes to hosting, I'm a fan of just running it on my own server. The plan was to build a docker image and run that behind my Nginx reverse-proxy.

CI/CD

I had also wanted to try building a CI/CD pipeline myself. This project seemed like a good candidate, as it would stay up for the foreseeable future, and continually deploying changed versions myself seemed like a chore.

I had previously had some experience with Jenkins at my job, and decided it would be the best system to learn for me, as I am likely to run into it again.

Home Page

I used create-next-app to quickly create the basic outline of the project files. The example with-chakra-ui-typescript comes with Chakra UI already configured, which saved me from writing all the boilerplate code required.

From there, I blocked out a basic layout, which used cards to display different bits of information. Originally, it included two more cards than it does currently, but I have yet to figure out what to show on those. In my mind, they are reserved for future projects I might want to link to.

I decided to put a picture of myself on the top card, along with some introductory text. Below that, there are some links to profiles on other sites and my email address on a card I decided to separate into smaller individual ones. Then, next to that, is the link to the blog section, which shows a preview of my latest post.

For the final two cards, I decided to include some more personal content. I feel like what a person reads and listens to, paints a picture of who they are. So I decided to display just that. The music card uses the Last.fm API to get the top three albums I listened to during the last seven days. The data for this is scrobbled from Spotify.

The last card shows what books I'm currently reading and have recently finished. This is hooked up to Oku, which I update manually.

Notes

For the block section, I wanted a solution that would integrate seamlessly with the rest of my site, yet was nice to use. I had previously tried Ghost, which I had really liked for editing and managing the content. It can be used headlessly, so that is what I did. The overview page was relatively straight forward. I just needed to grab a list of all posts from the Ghost API and render the information out.

The pages for the posts were more complicated, as the API could only deliver either plaintext or HTML. Plaintext was unusable for my application, while HTML did also not really fit in with my React.js/Chakra UI based frontend. To use the HTML, I had to render it out directly and then style it using actual stylesheets. This worked, but was complicated even more, when I realized I also needed to include code highlighting. For this, I used highlight.js and included custom stylesheets, that take into account the whether the page is in dark mode.

Jenkins

For the CI/CD pipeline, I set up a Jenkins instance on my server. The pipeline is configured for two branches: dev and main. Both of them lint, test and build the application. Then it is packaged into a docker image. Depending on pipeline parameters, the image is then deployed either into the development or production environment. This allows me to develop locally, then test the changes in the development environment and finally, once everything works, deploy into production by only using my version control as I would anyway. With this system in place, deploying small fixing has become trivially easy.