mrogers.dev

Mike Rogers' personal blog.

🚀 Features

• Built using the GatsbyJS framework
• Full TypeScript integration
• Terminal CSS used as a CSS framework
• Dark/light themes - user preference persisted
• Netlify used for rapid deployments and easy hosting
• GitHub Actions for PR builds

App overview

Post sources:

• https://medium.com/@mikerogers1357
• https://medium.com/@mike.rogers.jet

The posts are retrieved using the gatsby-source-medium-feed plugin. The key thing to note is that requests to retrieve posts is not made on load, but only when the site is built. The end result is that this site is completely static (no API requests or page loads when navigating between pages), giving better performance and overall user experience.

🚀 Quick start

1. Set up your development environment.

   Install the necessary dependencies on your machine:

   • Git Windows | macOS | Linux
   • Node.js you’ll need to have Node.js version >=14.15. Installation instructions here
   • Gatsby command line interface (CLI) install globally via: npm install -g gatsby-cli

   The Gatsby docs have a very detailed guide on this as well - https://www.gatsbyjs.com/docs/tutorial/part-0.

2. Clone the repo.

   Using your preferred terminal, choose what directory you'd like the code to live in, and navigate to it. Then clone the repo:

   git clone https://github.com/mikerogers123/blog.git

3. Start the site.

   Navigate into the new directory and start the site:

   cd blog/
   npm run build
   npm run develop

   The site runs at http://localhost:8000. Edit any file to see updates in real-time (unless you change gatsby-node.ts - then you will need a fresh build).

🚀 Continuous Integration/Delivery

PR builds are triggered via GitHub Actions. Netlify integration is enabled on PRs as well, so you can see deployments against a branch.

Site is deployed and hosted with Netlify.