When I set out to build this website, I already knew a few things about what technologies and frameworks I was going to use. I knew I was going to use Next.js, and I also knew that I wanted to use a CMS-as-a-service to power the content and backend for this website. I just did not know which one I wanted to use yet.

Additionally, I decided that I wanted to use Typescript. Using Typescript for this website is probably overkill, however, I had only used it on Node based tools but never on a frontend website. I think that personal websites are a great playground for trying out different and new technologies, and I have now used some tools in work projects that I first tried out here.

Here is an example of a Next.js page using Typescript :

import s from "styled-components";
import { PostsResponse } from "lib/types";
import PostList from "components/PostList";

interface IndexPageProps {
  posts: PostsResponse;
  greeting: text;
}

export default function IndexPage(props: IndexPageProps) {
  return (
    <Content>
      <Text>{props.greeting}</Text>
      <PostList posts={props.post} />
    <Content>
  );
};

const Content = s.main`
  width: var(--content-box-width);
`;

const Text = s.p`
  color: var(--text-color-base);
`;

Each root level page also uses getStaticProps to statically fetch data at build time. Using Incremental Static Regeneration built into Next.js, I'm also able to periodically check for new changes and statically regenerate just that specific page.

As I started playing around with building out the structure of my site, I also tried out and tested a number of different CMS options. There were a couple of key features that I was specifically looking for:

1. An easy to use API for fetching posts
2. Support for hosting images (the ability to process images would be nice)
3. Native support for Markdown
4. Something that was free or relatively cheap

Some options I looked at were DatoCMS, Prismic, Sanity, and the one I went with: GraphCMS. While each of these CMS options had their own set of benefits and drawbacks, GraphCMS was the best fit for what I was looking for.

I do currently use the GraphQL API that the CMS provides, however, I am not using any third party GraphQL libraries; I am simply using fetch to get the data directly from the API as JSON. I have found this to be a very suitable method for my use case since I do not need anything complex.

Since I am using Typescript, I did manually create matching type definitions to match the schema I created in GraphCMS. I suppose I could have used a type-generation tool for this, but I only have a few types that in total are less than 100 lines of code.

Another place I spent a lot of time was in handling the Markdown that I get from the CMS. There are a number of Markdown renderers built for React, but I chose to go with react-markdown. I did however build a number of custom components that the renderer reaches out to in order to render some custom blocks like the 2-column photo layout in my photo pages. I was always inspired by Paul Stamatiou's Photo Pages, but I still wanted my photo galleries to be primarily driven by Markdown.

I have always had fun looking at and exploring personal websites and portfolios, so I wanted to create my own. I am sure that over the years this place will change and evolve, but for now, I am happy with it.