One Black Voice

Like many of us, I decided I wanted to become a blogger. However, as someone who can build and design websites, I only felt comfortable building this project on my own.

Using Gatsby to build the front end, Prismic as a headless CMS, and GraphQL for querying data, One Black Voice was created, giving my written ramblings a home.

The first step was to create a new Gatsby/React project and a Prismic repository. After that, I had to set up a couple of configs:

• gatsby-config.js: set up Gatsby plugins and site meta data. This is also where I set up my environment variables.
• prismic-config.js: connect my local project to the Prismic repository via the project's unique API endoint

For the next step, I needed to build my custom page templates. Prismic offers an easy way to build unique CMS templates. I built a single-page template for the /home and /about pages and repeatable templates for blog posts. I also created a repeatable type for categories that could be linked to posts. This way, one day I can create a page with a list of all blog posts associated with a selected category.

After creating all of my basic content in the Prismic custom CMS builder, I returned to the React project to build the front end. From there it was pretty straightforward: building components for each page, pulling data from the Prismic project API, and rendering the data.

The final step was to deploy the project once I felt it was ready to be published to the world. I already had a custom domain so I went to Netlify to set up continuous deployment. I connected the GitHub repository so that every time there is a push to the main branch, a production deployment is triggered. That's it! Now every time I added a new blog post, I could review it locally, trigger a deployment, and within minutes the post would be published.

Click here to view project - GitHub