DEV Community

Cover image for Create Your Dev Portfolio with this Gatsby Template
Alex Merced
Alex Merced

Posted on

Create Your Dev Portfolio with this Gatsby Template


I recently created a tool called, "create-markdown-blog", that allows you to generate a markdown blog with Gatsby, Next, Nuxt, Sapper, Scully, and Gridsome. I encouraged using it as a starting place for a developer portfolio because a markdown blog offers many benefits to a developer.

  • Practice writing markdown
  • Posts also count as GitHub commits for GitHub heatmap
  • Better SEO and Speed from Static Site Generation

Although a developer portfolio could also use a page to display development projects so I have made a new template that has a little more built-in with the developer in mind.

  • some initial styling to get you started (still bare-bones, so it's easy to work in your style without having to fight pre-existing styling)

  • gatsby offline plugin so the site works offline and qualifies as PWA

  • JSON file for listing information about your projects with a page that renders data from JSON file

How to use it

  1. Create a copy of the template
npx create-markdown-blog gatsbyportfolio portfolio
Enter fullscreen mode Exit fullscreen mode
  1. Head over to the src/json/portfolio.json and enter the data of your projects

  2. Head over to src/mark and edit the existing blog post, copy and paste this file to make new blog posts

  3. Edit src/pages/index.js to edit the main page

  4. src/layout/Layout.js is where the header and footer and the overall template is designed

  5. You can style the page using styled-components out of src/styles or with CSS using src/styles.css

  6. deploy to Netlify and set the build command to "gatsby build" and the publish directory as "public"

  7. You now have a portfolio website ready to go!

Top comments (1)

vsevolod profile image

Good article! I would like to add that there's a number of options to choose from portfolio templates: