Building a website with Prismic
My old website was a static HTML site with two pages; the home page and the playground, where I showcase some of my work.
Every time I made changes, I had to upload files over FTP. Remember FTP?
My main server is a MediaTemple DV, which I've meant to do away with for a while now. Between Digital Ocean and Heroku and Media Temple, I'm paying a considerable amount in monthly fees for my personal sites/projects.
The long-term plan is to have Flynn on a Digital Ocean box for APIs, or even go serverless with Vercel, and use Firebase more. This site is also hosted on Vercel right now!
Let's talk about what went into building this and why I chose Prismic as my headless CMS.
Choosing a CMS
Initially, I was building a new blog for my dad. He's currently on a WordPress blog that I'm running on my MediaTemple DV. But it's costly in terms of resources to run and doesn't leave much room for other things.
At my day job, I've used Contentful extensively. It's pretty great but also costs a pretty penny.
So I set out to find one that gave me the most control, had a well-designed dashboard, was easy to implement, and free.
I went over to headlessCMS and looked at the top options. I tried Strapi, Publii, Directus, and Cockpit. I hoped to self-host but eventually decided against it—one less element in my serverless end goal.
I eventually stumbled upon Prismic and loved it instantly. There were some data model and UX annoyances, but I loved the editor. Most other options I checked really lacked there, but Prismic has a solid content editor.
Choosing the frontend
I love React. I've built so many apps with React and React Native over the last couple of years. But I'm not a fan of Redux and general state management in React apps. And the fact that we have to bootstrap the whole thing ourselves, from state management to SASS. Because of the open nature of React, everyone has their own way of setting up their project structure.
I love Ember even more. It's very opinionated but still open. It comes with a fantastic router and data library built-in. While I do like JSX better, Handlebars is all right in my book.
The choice came between the two, and eventually, React won. Prismic has a kit for React but doesn't for Ember. I figured it would make things easier.
Managing the blog state with React was tricky, but it worked out in the end.
Building the app
It's been a while since I've worked on a web app. At my day job, I've been doing a lot of serverless backend with Node and Azure. For my personal projects, I usually build mobile apps with React Native, and lately, Firebase.
I really missed building things for the browser, so I dropped everything and started building this. I took some code that I wrote for my dad's blog, changed it to suit my needs, and I was done in less than a day. I worked crazy hours until I was finished.
Most of my time was spent designing and tweaking the data models in Prismic. Going back and forth between React code and Prismic to see the best approach for things. I've added a few fields to my models that I haven't added to the frontend, saving them later.
I started with an idealistic version for both the blog and the playground but started cutting things to make it easier. I had hero images for playground items but realized if I had to spend a lot of time creating those, it would prevent me from posting often. Blog posts also had hero images. I think they still do. Just not implemented. I plan on writing more this year, so I went with what would be easiest and fastest.
Learnings
- Aim for maximum reusability for faster turnaround. Old me would've tried to build a custom CMS, so I had complete control over everything.
- Explore and try new things. I love the power and freedom that headless CMS gives you. I probably wouldn't have taken this approach unless I had used Contentful in the past. Gotta explore more!
- Ship sooner. I usually like to take my time building things, polishing them before shipping. But with this website, I built it fast and shipped before my content was even ready. I'm writing this post a day or so after I published the site.
- Write more. Forget imposter syndrome, forget sounding stupid. Just write more.
- Have a great year.
It's all open source
I love open-source things. So most of my personal projects are also open source, including this new website. You can find the source on my GitHub.