Tech Stack | Setup | Development | Deployment

Jon Gear's Website And Blog

Thanks for checking out my site. This is the complete code for my website and blog, featuring articles on distributed systems, machine learning, and brain-computer interfaces.

Tech Stack

• Framework: Gatsby v5
• UI Library: React v18
• Content: MDX (Markdown + JSX)
• Styling: styled-components
• Syntax Highlighting: Prism React Renderer
• Deployment: Netlify
• CI/CD: GitHub Actions
• Node.js: v20.x

Setup

Install dependencies:

npm install

Or use clean install for CI/CD:

npm ci

Development

Start the development server:

npm start

The site will be available at http://localhost:8000

Other Commands

• npm run build - Build the production site
• npm run lint - Run ESLint
• npm run serve - Serve the production build locally

Deployment

My site uses a comprehensive CI/CD pipeline with GitHub Actions and Netlify:

CI Pipeline (GitHub Actions)

Every pull request triggers automated checks:

• Linting: ESLint checks for code quality
• Build Verification: Ensures the site builds successfully
• Node.js: Tests run on Node 20.x

CD Pipeline (Netlify)

• Preview Deploys: Every PR gets a preview URL for testing
• Production Deploys: Merges to master automatically deploy to production
• Static Generation: Gatsby builds optimized static HTML/CSS/JS

Why GitHub Actions?

While Netlify handles builds and deploys excellently, GitHub Actions provides critical quality gates:

• Linting enforcement ensures code adheres to consistent standards
• Build verification catches issues before deployment
• Automated testing maintains long-term stability and cleanliness
• Required status checks prevent broken code from reaching production

This dual approach ensures both deployment automation and code quality.

Powered By

This website was originally based on gatsby-starter-minimal-blog by LekoArts, and has been extensively customized and modernized.