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: v22.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

Makefile Commands

For convenience, common tasks are available via Make commands. Run make help to see all available commands:

make help

Quick Reference

Development:

make install      # Install dependencies
make dev          # Start development server (alias: make start)
make build        # Build production site
make serve        # Serve production build locally

Code Quality:

make lint         # Run ESLint
make lint-fix     # Auto-fix linting issues
make test         # Run all tests (lint + build)

Maintenance:

make clean        # Clean build artifacts (.cache, public)
make clean-all    # Clean everything including node_modules
make fresh        # Fresh install (clean-all + install)
make rebuild      # Clean rebuild (clean + build)

Dependencies:

make audit        # Run npm security audit
make audit-fix    # Auto-fix security issues
make upgrade      # Update all dependencies

Utilities:

make version      # Show current version
make info         # Show project information

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 22.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.