New Site

One of the issues this new site solves is trying to preview CMS content before publishing on a static site. Historically, viewing live preview content on a pre-rendered site was never something that was readily possible. This was due to the inherent nature of a static site--everything is already built as HTML pages. Depending on how your site was built, shoehorning preview content was really difficult to automate and sometimes not possible given the CMS you’re using and how your static site generator builds your site.

The good news is that problem is over. Thanks to Birkir from Ueno and the Prismic team, you can now preview Prismic content with your Gatsby site. This functionality brings the best of both worlds--dynamic content and a static site.

The plugin works by making a GraphQL request to Prismic with a preview reference. Once data is received, it updates the data prop with merged data from Prismic preview and re-renders the component. It’s a simple concept but was something that was never seen as a critical feature.

It was always a bummer to not be able to use a static site with a CMS and get that sweet preview functionality. Especially when the site is for a client, it’s almost a guarantee that they will want a previewing feature--which makes sense because it can become daunting publishing content without previewing first. All you can do is cross your fingers and hope that the content looks correct. Publish anxiety brings up questions like, “is my headline going to fit on one line?”, “is my image cropped correctly?”, “will these set of components look correctly on the page?”.

The old way of previewing content on a static site usually included having a save/preview web hook from the CMS that triggers a new build of your site (usually on a subdomain) with the preview content. Depending on how big your site is and how fast your static site generator can build your site, this could take anywhere from 30 seconds to 2 minutes. That wait time isn’t totally bad, that is unless you get the content right the first time. If you made a punctuation error or cropped an image incorrectly, then you have to re-build and wait again. This doesn’t make for a great publishing experience.

So if anything, this site serves as a proof-of-concept for this type of stack and serves as a playground to try out some new techniques. I wanted to get this site out the door as soon as possible because I knew if I didn’t publish it now, then I would never get around to it. Expect updates to animation/transitions, interaction, and styles.

Technology: React / Gatsby / Prismic / Netlify

Typography: Authentic Sans