Michael V. Colianna

Author / Web Developer

Developer/Author Site

Work / 2022-04-25

Colianna

The main page of this site, as viewed on a laptop/desktop computer.


A few months earlier, I grew tired of having to maintain the WordPress instances running my personal (author) and professional (developer) sites. So I found a template I liked and converted it for use in a Laravel project. Since my company is looking to expand its offering, I've been researching different CMS and front-end options. I already had familiarity with Contentful, and figured it was time to link it up with some of the Javascript-based frameworks.

  • Colianna: Contentful model fields

    A list of content model fields in the Contentful web interface.

  • Colianna: Work pages

    The Contentful dashboard, on the "content" tab, showing a filter by "work" content type.

I took the information from the Laravel site, created matching content models in Contentful, and migrated the data in.

Then I created a Gatsby project and proceeded to rework the Laravel components into their equivalent React siblings.

  • Colianna: Page template

    Code snippet of a React page component utilizing some Contentful data from a GraphQL query.

  • Colianna: External link component

    Code snippet of a React component for an external link.

After that I utilized the Gatsby source for Contentful to pull in the data and create GraphQL queries for it.

Colianna: GraphQL result

The GraphQL query used to pull in the "page" content models.

And, rather than write multiple pages for the different areas, I utilized the Gatsby Node API to create them dynamically.

Colianna: Gatsby Node

Code snippet from the site's Gatsby node config file, showing a loop through "work" pages and generating pages for them.

Lastly, I set up a Netlify deploy for the site.

Colianna: Netlify Dashboard

A Netlify site dashboard showing the deploy for the site.

For the future, I plan on either locating/paying for a better design and implementing it into the project. Unlike my professional work, this source code is viewable on GitHub (new tab).