Mike Rogers' personal blog.
- Built using the GatsbyJS framework
- Full TypeScript integration
- Terminal CSS used as a CSS framework
- Dark/light themes - user preference persisted
- Gatsby Cloud used for rapid deployments and easy hosting
Post sources:
The posts are retrieved using the gatsby-source-hashnode plugin and gatsby-source-medium-feed plugins. 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. This was a key reason for choosing Gatsby; the pages for each blog post are generated during the build process.
-
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.
-
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
-
Start the site.
Navigate into the new directory and start the site:
cd blog/ npm run developThe 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).
Site is deployed and hosted with Gatsby Cloud.