Skip to content

Commit

Permalink
feat: blog post about the tech stack of this website
Browse files Browse the repository at this point in the history
  • Loading branch information
celsopalmeiraneto committed May 31, 2023
1 parent c9e330b commit 0d2b9b2
Show file tree
Hide file tree
Showing 4 changed files with 51 additions and 0 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"slug": "about-this-website",
"title": "About this Website",
"summary": "Why I chose Next.JS for this building my personal website.",
"postId": "HLGL2c2C7-B1",
"locale": "en-US",
"availableLocales": ["en-US"],
"postTags": ["Miscellaneous"],
"tags": ["JS", "Next.JS"],
"writtenAt": "2023-05-31T23:19:00+01:00",
"assetsPath": "assets-about-this-website"
}
35 changes: 35 additions & 0 deletions data/posts/about-this-website.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
## Context

A personal website is one of the few ways people can express themselves on the Internet without having to conform to a format conceived by someone else.

You probably are part of the billions of people that use social media, if so, in any of those platforms you post only things that are relevant to that audience (as you should). You also must adhere to the terms and conditions of the platform and the platform has control over who sees you and so on.

Those "constraints" are not issues themselves, as most of the time, they are just the rules of the game. Let's not get into the discussion (in this post) of those rules.

The point is: Having a personal website gives you the freedom to express yourself the way you want. Your design, your rules, your responsibility.

## Problem

After years of having just an "About Celso page" I also wanted to have a Blog. The question was put: What tool should I use?

Tools for building a personal website are plenty. From the good and old [WordPress](https://wordpress.com/) through [Jekyll](https://jekyllrb.com/) and [Wix](https://www.wix.com)/[Squarespace](), all of them would allow me to build a website with a couple of pages and blogging capabilities.

Apart from Jekyll, all other options would require me to work around plugins and platform limitations. Not to mention the need to host the website in a "living" server. Wix/Squarespace also brings the added issue of being products owned by private companies and therefore, they set the rules of the game.

I also had in mind a constraint: I wanted to write my blog posts in [Markdown](https://en.wikipedia.org/wiki/Markdown). I always saw Markdown as a useful tool for writing low to medium complexity texts. You focus on the content and the representation of the content is the responsibility of another component of the system. Just like good, loosely coupled systems. Jekyll got a little bit more attractive at that point.

However, there was another option, one that would allow me to use Markdown for the blog posts but the freedom to use other tools for the rest of the website. That option was combining [NextJS](https://nextjs.org/) + Markdown.

## Solution

I have always been an admirer of NextJS. It reminds me of the days when building a Web Application was as simple as connecting to an FTP and dropping in files. I do not mean to say that this is the best approach for building Web Applications. Of course, NextJS hides a ton of complexity under the hood, but still, developing software with NextJS almost always makes me smile.

Using a NextJS "exportable" website, I manage to not depend on any (traditional) server running, just dropping the files in a [S3 Bucket](https://aws.amazon.com/s3/) is enough. The website has a path called "posts" which in turn uses NextJS's `getStaticPaths` and `getStaticProps`.

The parsing of the Markdown files was done using [Marked](https://marked.js.org/), the code blocks are styled through [highlight.js](https://highlightjs.org/) (it even has a VSCode theme!!!).

## Takeaway

Personally, putting some different pieces of technology together is something that excites me a lot. I could have gone to WordPress, and I would have had a website + blog running in minutes. If my sole focus was the content, I should have gone that route. In my case, I not only wanted to have content but to build something. To explore a technology I like in unique ways.

You can find the source code for this website on [GitHub](https://github.com/celsopalmeiraneto/personal-website).
Binary file added data/posts/assets-about-this-website/cover.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions data/posts/assets-about-this-website/cover.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"alt": "Ruler over a blueprint",
"sub": "Photo by <a href=\"https://unsplash.com/@christiankaindl?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Christian Kaindl</a> on <a href=\"https://unsplash.com/photos/xnUQO2DwXOo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText\">Unsplash</a>"
}

0 comments on commit 0d2b9b2

Please sign in to comment.