Gatsby Minimal Portfolio is a JAMstack portfolio blog starter built with Gatsby JS, React, and Bootstrap that generates a minimal, content-focused personal website from Markdown files and a JSON metadata file, ready for continuous deployment to Netlify.
What is Gatsby Minimal Portfolio?
Gatsby Minimal Portfolio is an open-source Gatsby starter by Brian Ruiz (GitHub user BrianRuizy) for a blog-style portfolio website. It takes Markdown files in the _data folder and a site-meta-data.json file as content input; Gatsby's GraphQL data layer and the Remark transformer compile them into a static HTML site. The output is an installable Progressive Web App (PWA) designed for Netlify hosting with CI/CD from a Git repository.
Key Features
- PWA ready — The site is installable on Android and iOS and works offline, giving it app-like behavior.
- Blog ready — Add blog posts as Markdown files in the
_datafolder; Gatsby, GraphQL, and Remark automatically render the Markdown to HTML. - Toggleable dark mode — Implemented with the
gatsby-plugin-dark-modeplugin, letting visitors switch between light and dark themes. - Mobile-friendly navigation — Includes a nav-dock and a bottom drawer built with
react-bottom-drawer, plus a responsive layout usingreact-bootstrap. - Netlify contact form — A built-in form that connects to Netlify Forms; setup follows Netlify's documented form process with no backend code.
- SEO ready — Supports adding meta descriptions per page for search engine visibility.
- Syntax highlighting — Code blocks are highlighted using
gatsby-remark-prismjs. - Icon and font support — Icons come from
react-icons, and fonts from Google Fonts with therfsresponsive font-size package.
Who is it for?
- Freelance developers and designers — Showcase projects and write blog posts on a personal portfolio site without needing a CMS.
- JAMstack enthusiasts — Get a working example of Gatsby file routing, GraphQL queries, Markdown processing, and Netlify deployment.
- Bloggers wanting a fast, simple publishing workflow — Write content in Markdown, push to Git, and Netlify rebuilds and deploys automatically.
What can you do with it?
- Add project entries — Place a Markdown file for each project in
_data; the portfolio renders those entries automatically. - Customize global site content — Edit
site-meta-data.jsonto change your name, bio, and other metadata across the site. - Deploy with one click — Use Netlify's "New site from git" flow, set the build command to
npm run build, and get a live URL with automatic redeploys on each push.
How does the template work?
The quick start requires Node.js v13 (installable with nvm install 13) and the Gatsby CLI (npm install -g gatsby-cli). Scaffold a new site with gatsby new gatsby-minimal-portfolio https://github.com/BrianRuizy/gatsby-minimal-portfolio, then run gatsby develop to see it at http://localhost:8000. Content editing happens entirely in Markdown in the _data folder and the site-meta-data.json file; Gatsby queries these files through GraphQL and renders them to HTML.
FAQ
How do I add my own blog posts or projects?
Create a Markdown file in the _data folder following the syntax examples in _data/readme.md; Gatsby, GraphQL, and Remark will convert it to HTML and include it on the site.
What are the prerequisites for using this template?
You need Node.js v13 and the Gatsby CLI. The README recommends installing Node.js with nvm install 13 and installing the CLI with npm install -g gatsby-cli.
How do I set up the Netlify contact form?
The template includes a form that works with Netlify Forms. Follow Netlify's official form setup documentation; the form will collect submissions in your Netlify dashboard without a custom backend.
How do I deploy this portfolio to Netlify?
Log in to Netlify, click "New site from git", connect your Git provider, and choose the repository. Leave the build command as npm run build and select the branch (default is master). Netlify builds the site and gives you a live URL, then redeploys on every push.
