Creating a Portfolio Blog Site using Gatsby and NetlifyCMS
Creating a portfolio and blogging site using NetlifyCMS and Gatsby in about 15 minutes.
<em>Published on <b><a href="https://blog.usejournal.com/creating-a-portfolio-blog-site-using-gatsby-and-netlifycms-f263326ed06b" alt="Alex Beciana - Creating a Portfolio Blog Site using Gatsby and NetlifyCMS" target="_blank">Noteworthy - The Journal Blog</a></b></em>
Depending on where you are in your coding journey it’s never not a good time to think about creating a portfolio to show off what you’re capable of accomplishing. Anyone can create a website using one of the major players, like Squarespace, Wix, or Webflow. But let’s get comfortable using GitHub more and turning your portfolio into an actual project as well!
Read along or code along — by the end of this article, you’ll have a website that you can start promoting yourself and projects with!
<a href="https://www.netlifycms.org/" alt="NetlifyCMS" target="_blank">NetlifyCMS</a> is an open-source content management system created by Netlify as a means to breathe life into a static site. The CMS is built on Git workflow and allows you to use GitHub (and other sites, like GitLab, or Bitbucket as your backend) that allows you to manage your blog post writing similar to WordPress.
<img src="https://miro.medium.com/max/1400/1*bcCK7arP7sIOvOIsoVVFOg.png" alt="NetlifyCMS - Posts"> <img src="https://miro.medium.com/max/1400/1*_PHpJSOoDHgSZW_eomxHnQ.png" alt="NetlifyCMS - Editorial Workflow">Let’s navigate to the NetlifyCMS website and click the “GET STARTED” button.
<img src="https://miro.medium.com/max/1400/1*pNmWUCl9JMTN7sA9G-w3sA.png" alt="NetlifyCMS - Get Started">Next, you’ll be taken to a new page and asked to choose a template from a site builder. On a whim, I chose Gatsby. However, you can pick any of these site starters.
<img src="https://miro.medium.com/max/1400/1*SHRk2Hhk9sXjeM0V0X_Tww.png" alt="NetlifyCMS - Starter Templates">After clicking on the “Deploy to netlify” button below the Gatsby logo, we are taken to this screen asking us to connect to GitHub and create a repository.
<img src="https://miro.medium.com/max/1400/1*RUT8s_zbIuANZ3QI4YulbA.png" alt="NetlifyCMS - Connect to GitHub">The next step in this process is to change the repository name to anything that you would like and then click the “Save & Deploy” button.
<img src="https://miro.medium.com/max/1400/1*UFyoF4pj8K2uaCOXiec09A.png" alt="NetlifyCMS - Configure Site">After this, we’ll be taken to a new page and see a log of our site being deployed. Here is a gif of my deploy log:
<img src="https://miro.medium.com/max/1200/1*PsMYiakvrWUpiQs4P8uDHg.gif" alt="NetlifyCMS - Deployment Log">Bada bing bada boom! We have a website with sample posts and information.
<img src="https://miro.medium.com/max/1400/1*71tCdaoh4dxXco8wnSnsCg.png" alt="NetlifyCMS - Starter Site">Now let’s create a new blog post!
First, we’ll need to check our email with a body similar to this one:
<img src="https://miro.medium.com/max/1400/1*Xu0N08M5q6RHl8KPBZ3cPg.png" alt="NetlifyCMS - Email Invitation to Edit">When we’re on the site, we just need to navigate to /admin to create a password and signup and then we can create a blog post by clicking on the "New Blog" button!
<img src="https://miro.medium.com/max/1400/1*SbvE_vOcOtat0b7JCc0Xaw.png" alt="NetlifyCMS - Posts">And here we are, coming full circle!
<img src="https://miro.medium.com/max/1400/1*ddj4nCnfDMFtg-2SlYe5Jg.png" alt="NetlifyCMS - Create A Blog Post">You can find this blog post on the live site <a href="https://pensive-kare-bc3453.netlify.app/blog/2020-09-26-creating-a-portfolio-blog-site-using-gatsby-and-netlifycms/" alt="Live Site Demo" target="_blank">here</a>.