Devfolio is a production-ready personal portfolio and blog template for GatsbyJS, styled with TailwindCSS, that turns a single gatsby-config.js configuration into a static site with projects, experience, skills, and a Markdown blog.
What is Devfolio?
Devfolio is an open-source, MIT-licensed GatsbyJS starter created by Ryan Fitzgerald. It consumes your personal data — name, title, description, projects, work experience, and skills — defined in the siteMetadata section of gatsby-config.js and outputs a fully static portfolio website with a homepage, an optional blog listing page, and blog post pages. The template ships with sample content and a live demo link so you can preview the base layout before editing anything.
Key Features
- Zero-config content editing — Change your personal info, projects, experience, and skills by editing plain fields and arrays in
gatsby-config.js; no React knowledge is required to get a personalized site. - Markdown blog with syntax highlighting — Blog posts are Markdown files with front matter for title, date, and description; code blocks get syntax highlighting, and the homepage displays the latest five posts.
- TailwindCSS styling — All styles use TailwindCSS, with minor custom CSS in
src/css/index.css; PurgeCSS removes unused Tailwind classes at build time to keep the bundle small. - Customizable React components — The template is built with React components under
src/components, and pages insrc/pages—index.jsx,blog.jsx, and404.jsx— can be edited or extended using Gatsby APIs. - Mobile-friendly responsive layout — The default template adapts to any screen size without extra work.
- One-click deployment — Includes Netlify and Vercel deploy buttons; you can also use GitHub Pages or any static host after running
gatsby build. - Sample content included — The repo provides example projects, experience entries, skills, and sample blog posts that demonstrate the expected data format.
Who is Devfolio for?
- Software developers who want a personal portfolio to showcase projects and work history without writing HTML and CSS from scratch.
- Technical writers and bloggers who prefer writing in Markdown and need a clean, code-aware blog with minimal setup.
- Job seekers who need a professional online presence with sections for about, projects, experience, and skills in one page.
- Gatsby learners who want a small, commented production starter to study and modify.
What can you do with Devfolio?
- Publish a personal homepage — Set your name, title, and a one-paragraph about text, then list projects with optional links, add work experience entries with dates, and group skills by category.
- Maintain a blog — Drop a new folder with an
index.mdintocontent/blogto create a post at/blog/your-slug; the homepage's latest-posts section updates automatically based on the front-matter date. - Deploy to free hosts — Use the included Netlify or Vercel one-click deploy, or run
gatsby buildand publish the generatedpublic/folder to GitHub Pages or any static file host.
How does Devfolio work?
To customize Devfolio, clone the repo and open gatsby-config.js, where the siteMetadata object contains your site URL, name, title, description, and optional GitHub, LinkedIn, and Twitter links. Below that, the about, projects, experience, and skills keys hold your content in simple arrays. For the blog, create a folder in content/blog containing an index.md file with title, date, and description in front matter. After editing, run npm install then npm run develop for local preview, or npm run build to generate static assets.
FAQ
Is Devfolio free?
Yes, Devfolio is open source and released under the MIT License, so you can use, modify, and deploy it without cost.
Do I need to know React to use Devfolio?
No. The template is designed so all personal content is edited through gatsby-config.js and Markdown blog posts. React knowledge is only required if you want to change components, pages, or styles beyond what the configuration supports.
Can I remove the blog section?
Yes. Delete the sample posts inside content/blog while keeping the folder itself (Gatsby still expects it to exist). With no posts, the Blog link and the latest-posts section on the homepage disappear automatically.
Where can I deploy Devfolio?
Because Devfolio builds to a fully static site, you can host it on Netlify, Vercel, GitHub Pages, Gatsby Cloud, AWS Amplify, or any static hosting service. The template includes one-click deploy buttons for Netlify and Vercel.
