Gatsby Material Portfolio Starter is an open-source Gatsby starter that scaffolds a responsive portfolio website with a built-in blog, built on TypeScript and Material-UI. It consumes a site configuration file and Markdown blog posts as content inputs, and produces a static site with blog pages, a contact form, and SEO metadata, all ready to deploy to Cloudflare Pages.
What is Gatsby Material Portfolio Starter?
Gatsby Material Portfolio Starter is a free, MIT-licensed Gatsby starter created by Manpreet Singh. It combines the Gatsby static site generator with TypeScript and Google's Material-UI component library, generating a mobile-friendly portfolio with an integrated blog. The starter reads its configuration from config/siteConfig.js and processes Markdown files into blog posts, outputting a fully static website that can be served from any hosting platform, with Cloudflare Pages explicitly documented as the hosting solution.
Key Features
- TypeScript support — The entire starter is written in TypeScript, including pages such as src/pages/index.tsx, giving developers type safety during Gatsby development.
- Material-UI styling — UI components are built with Google's Material-UI, offering theming and dark theme support out of the box.
- Netlify CMS integration — A static/admin/config.yml provides Netlify CMS configuration, and the src/cms directory contains CMS-specific code, enabling content editing through Netlify CMS with a GitHub backend.
- Blog with Markdown posts — Blog posts are authored in Markdown and support code syntax highlighting, HTML, headings, images, and Unicode emojis; Disqus comments are integrated at the end of each post, with a suggestion feature at post end.
- Contact form via Cloudflare Workers — The contact form submits data to a Cloudflare Worker, with a companion repository (cloudflare-github-oauth-with-form-handling) providing the backend implementation.
- SEO support — Site metadata is configured in gatsby-config.js and siteConfig.js, enabling standard SEO practices for the generated site.
- Responsive design with header section — The layout is mobile-friendly and includes a header with logo, name, description, and social network links.
Who is it for?
The starter is aimed at developers and designers who need a quick, clean portfolio site with a blog. Specifically:
- Developers — who want to bootstrap a personal portfolio site using Gatsby and TypeScript without building from scratch, and customize components and theming.
- Freelancers and creatives — who want to showcase their work and write blog posts, using Netlify CMS to manage content without touching code.
- Designers — who want to leverage Material-UI components and theming to create a consistent, responsive interface with dark mode support.
What can you do with Gatsby Material Portfolio Starter?
- Launch a portfolio site in minutes — Use the Gatsby CLI command
npx gatsby new my-blog https://github.com/ManpreetSingh80/gatsby-material-portfolio-starterto scaffold a new project, then runnpm startto develop at localhost:8000. - Publish blog posts with rich formatting — Write Markdown posts that render with code syntax highlighting, images, and emojis, and add Disqus comments for reader engagement.
- Manage content through Netlify CMS — Configure the GitHub backend in static/admin/config.yml to let non-technical users edit site content via Netlify CMS.
- Deploy to Cloudflare Pages — The README documents hosting on Cloudflare Pages, and the contact form is designed to work with Cloudflare Workers for serverless form handling.
How does the template work?
The starter follows a standard Gatsby workflow. First, create a new site using the Gatsby CLI command pointing to the repository. Then run npm start to launch the development server at http://localhost:8000, which also exposes a GraphQL playground at http://localhost:8000/___graphql for querying data. Finally, edit the source files under src/components, src/pages, and src/templates; the browser hot-reloads changes in real time. Content lives in Markdown files that Gatsby processes into blog posts via gatsby-node.js, with the folder structure including directories for CMS components, styles, and templates.
FAQ
Is Gatsby Material Portfolio Starter free?
Yes, the starter is free and open source, released under the MIT License. There are no license fees or restrictions beyond the standard MIT terms, allowing personal and commercial use.
What technology stack does it use?
The starter uses Gatsby as the static site generator, TypeScript for type-safe code, Material-UI for styling and theming, and Netlify CMS for content management. It also integrates Disqus for comments and Cloudflare Workers for the contact form backend.
How do I customize the site?
Most site-wide settings live in config/siteConfig.js and gatsby-config.js. For visual customization, edit the Material-UI theme and component styles under src/styles and src/components. Blog content is added as Markdown files, which you can author locally or through Netlify CMS.
How do I set up the contact form?
The contact form uses Cloudflare Workers to upload form data. For setup details, the README points to the companion repository cloudflare-github-oauth-with-form-handling, which provides the worker implementation and OAuth configuration.
