I JAMStacked my portfolio

A few weeks ago I got the idea to update my portfolio site as my current one is about two, almost three, years old. I put it together pretty much after I started at my current job and only applied minor updates.

The motivation to update my portfolio came about as I wanted to write down my experiences and everything I’ve been doing recently, in terms of work. I feel like I’ve found a completely new gear when it comes to learning, researching and trying new concepts, patterns, stacks and tools.

I also wanted to write down the things I went through on some of my showcase projects, the decisions we made with the customer and options we had. Two of those showcases are pretty much ongoing projects and it’s really fun to look back at what I did back in 2013 and how I approach these kinds of projects now. I myself see a lot of growth in my skill.

Anyway, I kind of hit a roadblock after I’d completed my portfolio’s design, because I couldn’t decide what CMS or framework to use as my back-end. Two things that popped to my head immediately were Wordpress and Laravel. Both are written in PHP, a language I’m most comfortable with. Wordpress is a CMS while Laravel is a framework.

I didn’t want to use Wordpress due to it’s outdated architecture and code style, but that would mean I would have to spend a good amount of time writing an administrative panel for Laravel (or copy an already existing one from a previous project). I got stuck as I didn’t want to spend too much time on this project.

As I was browsing Twitter…

… I happened to run into Strapi . Someone had developed their portfolio with Angular and Strapi, so I decided to have a peek at the platform. I’d recently been working with headless Wordpress for my client projects, which I don’t really like, so an alternative to that?

From strapi.io I ended up at JAMStack.org . I’d heard the term JAMStack before, but never really familiarized myself with it. With today’s market of tools and services, JAMStack seemed like a truly interesting concept, performance and security wise.

So what is JAMStack?

JavaScript + API + Markdown. Many people consider it a rebranding for SPAs (Single Page App), but there are very small differences. You can read a more extensive description on jamstack.org or if you like videos more watch his one where Netlifys CEO Matt Biilmann explains it.

Basically you deliver as much markup as you can from a static website that lives in a CDN. The results is a super fast website, with some minor trips to an API for dynamic content, or perhaps no trips at all. It’s just HTML and JavaScript that can run in your browser with no server in the background.

This website? Next.js, Strapi and Vercel

This portfolio has been built using Next.js and Strapi (API), while deployed to Vercel . You can find the source code for both the front- and back-end apps on my Github page. They are nothing really special.

Vercel offers great integration for Next.js because, well… they created the framework. The platform contains the ability to generate a webhook for your deployment project, where you can send a simple HTTP request to trigger the redeployment of your site. Strapi contains a feature that allows you to set up such a webhook when ever you make changes to your content. So this website simply gets redeployed each time I make changes to any content.

The performance is really amazing. But that doesn’t mean you should pick Next.js and Strapi. You can use pretty much any CMS that offers an API and you have a selection of front-end frameworks to pick from. You can deploy your site pretty much anywhere as it’s just static HTML and JavaScript.

So, back to Strapi

I wanted to take Strapi for a test drive, so I did my research. It seemed like Strapi was relatively popular on Github. They seem to have impressive company logos on their website and multiple user stories. I took a look at the features and immediately liked one thing: content type management without the need to code. This sounds a lot like what Contentful does, but on-premise and simpler. Goodbye Wordpress!

But how did it perform? What was it like? What did the API responses look like?

It only took me 15 minutes to install and get it up and running. Really good start. I immediately started building content types in the administrative panel.

While I’m not a real fan of the UI, it’s really simple to use. You can even extend admin features to your liking.

The API is incredibly simple to consume, sort and\or filter and doesn’t contain a complicated localized object structures like Contentful does out of the box. It seemed to fit my needs. Strapi also provides GraphQL as a query language for that API.

The one big difference that I noticed compared to Wordpress, or even Ghost , is the fact that it doesn’t extend a single Post model. Each content type generates its own model, which can easily be shaped inside the dashboard to any shape you like.

This means your database consists of a table (relational databases) for each content model, instead of one big, extended, model. Which in my opinion is much clearer, if you ever need to take a look there.

You can even go poking around the endpoints and make controllers return data you like. That’s what I did when I wanted to return my Medium.com articles RSS feed from an endpoint. This way I didn’t have to include XML parsing in my front-end and I could cache the results so visitors don’t make repeated calls to Medium.

I immediately started building the front-end with Strapi as my API. It took me 2 days to develop the skeleton for the site and after that I spent a week fine tuning the content, showcases and performance.

I really like this stack and hopefully I can use it again on some other project.