Coding Tutorials Blog

Create Your Dev Portfolio with this Gatsby Template

December 30, 2020

create-markdown-blog

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
  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!

© alexmercedcoder.dev 2020