Choosing a new CMS

When thinking about the new design for Robo House and the direction I wanted to take. Blogging and general content authorship was on my list of things to have... But I didn't want the bloat of a headless Wordpress site, the templating troubles of Ghost, or the clunk of Contentful. I didn't want to spend a whole lot of time working to get plugins in order or building out my API to source posts. And I sure as hell didn't want to have to spend the money hosting any of these.

I wanted something lightweight and extremely fast to get started with. Something without a ton of bells and whistles that could distract me from writing. I knew I wanted to build it in Nextjs and so I began my search.

Thats where I found Sanity.io - and it checked all the boxes. Setup was almost instantaneous. Authorship was simple and quick to get working in. And being able to source the content for static site generation in Next was out of the box from their client. They bring a unique touch to running a CMS where the authorship lies on your local machine. So part of my development workflow involved standing up a studio platform to write my content on a local websever.

From there the content is uploaded to their systems, and then sourced back to my Nextjs application. Allowing me to build my site and author all in one repo.

Another perk that I enjoy with using Sanity is that since it's all built and running locally, it gives me access to the code here. Which means I can add plugins or even change or add features as I see fit. Already out of the box Sanity gives the option for you to customize the schema, and from that, it build's the UI around it. If I want a post to have a tagline, I can simply add that as part of my post schema:

{
  name: "tagline",
  title: "Tagline",
  type: "string",
}

And thats it. Now Sanity's studio will automatically give me a new input field for adding a tagline. Which can be read from Nextjs when I source my posts.

Another thought that came to mind was code highlighting. This was something I needed to be able to add on the authorship side as well as in the frontend of React. In came a Sanity plugin @sanity/code-input which allowed me to create on the spot code injection to my authoring experience.

Sanity comes out of the box with some pre-defined schemas. One of them being blockContent.js which essentially sets up the various text formatting a few other additional options like inline images. Similarly like adding a tagline, in here I am able to add a code block like so

{
  name: "code",
  title: "Code Block",
  type: "code",
}

And on the frontend side of things. I'm using another tool provided by Sanity, PortableText which allows me to easily define how to wrap various blocks of text and other content coming from Sanity.

<PortableText value={post?.body} components={ptComponents} />

And from here I can define what a code block looks like, using react-syntax-highlighter to easily wrap my code content

code: ({ value }: { value: any }) => {
  return (
    <SyntaxHighlighter language={value.language} style={darcula}>
      {value.code}
    </SyntaxHighlighter>
  );
},

Neverminding that any type this gave me all the syntax highlighting I needed to get my point across to you folk.

As I build the new Robo House website I plan to make a lot of customizations to my studio's platform. Allowing more and more content to come through in a unique state. The idea of being able to share more infrastructure work will be interesting to see unfold.

Robo HousePostsContactAbout

© 2022 Kevin Wynn, Robo House, LLC