Let's Build a Portfolio!

Gatsby + Netlify + NetlifyCMS

WWCode Colorado Puppies and Portfolios

Speaker: Jordan (@mjordancodes)

Note:

Normally, I would do all of this from the command line, but it can be a huge time suck during a workshop to get all the tools running on all different platforms for everyone.

 

We will (hopefully) be using codesandbox.io to avoid all the personal environment setups during the workshop.

 

We will be looking at a lot of different pieces tonight and I won't have time to explain all the code we are writing in depth.

Note:

I want you to be able to follow along, but different local setups will run differently for everyone and I won't have time to troubleshoot for everyone during the workshop.

 

So... I have opened up several 1-on-1 mentor sessions over the next week where you can sign up and we will troubleshoot together and get you up and running.

 

Go to my calendly page to schedule a session:

https://calendly.com/mjordancodes/puppies-and-portfolios

Note:

Go to my calendly page to schedule a session:

https://calendly.com/mjordancodes/puppies-and-portfolios

 

You can also reach out:

WWCode Colorado slack: @mjordan

Email: jordanbrady@womenwhocode.com

Workshop Overview

  • Generate a basic blog with Gatsby
  • A Quick Tour of Gatsby
  • Deploy site to Netlify through GitHub
  • Create files required to connect NetlifyCMS to Gatsby site
  • Turn on Netlify Identity and Git Gateway
  • Create a New Post in NetlifyCMS
  • Run NetlifyCMS on LocalHost
  • Create a New Post Type in Gatsby
  • Configure New Post Type in NetlifyCMS

Generate a basic site with Gatsby

On your own machine

Generate a basic site with Gatsby

Setup Your Gatsby Development Environment

  • Install Node/NPM
  • Install Git
  • Install GatsbyCLI

Generate a basic site with Gatsby

Create a Gatsby Site

  • Pick your starter. For this example I am going to use the gatsby-starter-blog
  • Create a new Gatsby project:
    • gatsby new cms-blog https://github.com/gatsbyjs/gatsby-starter-blog
  • Once it finishes its thing, open the project in a code editor of your choice.
  • Run develop command to build project and view in browser:
    • gatsby develop

Generate a basic site with Gatsby

With CodeSandBox

Generate a basic site with Gatsby

  • Create a CodeSandBox Account:
    Recommend using GitHub for sign-in to keep all the things connected.
  • Pick your starter. For this example I am going to use the gatsby-starter-blog
    • From this page, select the link to "Try this starter: CodeSandbox"
  • Once the sandbox loads, click the blue "Fork" button to create your own copy that you can play around with.

A Quick Tour of Gatsby

A Quick Tour of Gatsby

  • src/pages/index.js is your home page / blog roll
  • You can update the data being pulled into the bio component in the home page in the gatsby-config.js file
  • All the blog posts live in content/blog/
    • Each post is a markdown file
    • Up at the top in-between the dashes is some frontmatter
      • Frontmatter is basically a set of predefined variables that you use on each post

Deploy site to Netlify through GitHub

Deploy site to Netlify through GitHub

  • Select the GitHub tab in the far left of the screen
    • Follow instructions to add GitHub as an integration
    • Under the "Export to new GitHub repository" section, type in a name for the repo and click "Create new repository on GitHub"
    • Make sure to also click the link button so that changes can go both ways
  • Use the command line to commit your changes
  • Create a new repo on github.com
    • Copy the commands to "push an existing repository from the command line" and paste them into the command line.

Deploy site to Netlify through GitHub

Now that your project is on GitHub...

 

  • Create an account on netlify.com
  • Click the "New site from Git" button
    • Select the "GitHub" option
      • Authorize as needed
    • Select the repo you want to use
    • All the build options should be auto-set for you.
  • If everything looks good, click the "Deploy Site" button at the bottom.

Create files required to connect NetlifyCMS to Gatsby site

Create files to connect NetlifyCMS to Gatsby site

Add NetlifyCMS to your Gatsby Site

 

  • Add the required plugins: netlify-cms-app and gatsby-plugin-netlify-cms
  • Under the Dependencies tab, click the "Add dependency" button
  • Search for both plugins
  • Select each to add them to the projects.
  • Run npm install
    • npm install --save netlify-cms-app gatsby-plugin-netlify-cms
  • Add the plugin to the gatsby-config.js file.
 plugins: [
   `gatsby-plugin-netlify-cms`,
]

Create files to connect NetlifyCMS to Gatsby site

  • Create a config.yml file in static/admin/config.yml
  • Copy the following base configuration into the newly created file.
backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: 'blog'
    label: 'Blog'
    folder: 'content/blog'
    create: true
    slug: 'index'
    media_folder: ''
    public_folder: ''
    path: '{{title}}/index'
    editor:
      preview: false
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Body', name: 'body', widget: 'markdown' }

Turn on Netlify Identity and Git Gateway

Turn on Netlify Identity and Git Gateway

Netlify Identity:

  • Full suite of authentication functionality
  • Allows you to manage / authenticate users on your site or app
  • Used for gated content and site admin

Git Gateway:

  • Connects site to Git provider's API
  • Work with content, branches, PRs, and such by allowing admins to edit site content without having accounts on GitHub (provider)
  • In Netlify, go to Settings > Identity > Overview
    • Click the "Enable Identity" button
  • Under Registration switch from "Open" to "Invite Only"
  • Under Services click the button to "Enable Git Gateway"

Turn on Netlify Identity and Git Gateway

  • In Netlify, go to Identity
  • Click the "Invite Users" button
  • Enter your own email address and click "Send"
  • Open your email and click "Accept the Invite"
    • Set a Password

Turn on Netlify Identity and Git Gateway

Create a New Post in NetlifyCMS

Create a New Post in NetlifyCMS

 

  • If you look in Netlify now, you will see that a new production deploy is being built.
  • You can also look in the repo on github and you will see a new commit
  • Make a pull in your local repo (if using your own computer) to pull in the new post

Run NetlifyCMS on LocalHost

Run NetlifyCMS on LocalHost

  • Run `gatsby develop` to build your project locally.
  • Check the output for a link:

Run NetlifyCMS on LocalHost

  • Follow the URL and click the button to login
  • Enter the URL that you have set up to view the live site on
  • You should then be able to enter the email and password you previously set up.

Create a New Post Type in Gatsby

Create a New Post Type in Gatsby

  • Create new folder for projects posts
    • content/projects
  • Add a folder for 'project-1' and an 'index.md' file inside it.
  • Create some front matter at the top of the file for things you might need to display projects.
---
title: Project 1
date: "2020-05-01T22:12:03.284Z"
description: "My First Project"
link: "https://mjordan.codes"
code: "https://github.com/mjordancodes"
---
  • Add some filler content (Lorem Ipsum or such) below the frontmatter.

Create a New Post Type in Gatsby

  • Create a new page that will display a list of projects (like the home page shows a list of blog posts)
    • src/pages/projects.js
  • For ease (and because I haven't regularly written React in almost 2 years) copy all the content from index.js into the new projects.js file.
  • Most of the layout code can stay the same for now.
  • Update plugins in the gatsby-config.js file:
    • copy one of the things used for 'gatsby-source-filesystem' and replace the info with the new projects folder we just created.

Create a New Post Type in Gatsby

  • Update plugins in the gatsby-config.js file:
    • copy one of the things used for 'gatsby-source-filesystem' and replace the info with the new projects folder we just created.
  • If you re-run the project now, you will see that the blog is pulling in the blog posts and the new project post.
    • We will need to update the graphql query to specify which types of posts we want on which page.

Create a New Post Type in Gatsby

  • Add a "posttype" frontmatter line to each file so far (blogs + projects) and set it to the correct type
  • You can play around in the GraphiQL playground to rework the query to filter by 'posttype'
allMarkdownRemark(
  filter: {frontmatter: {posttype: {eq: "Blog"}}}, 
  sort: { fields: [frontmatter___date], order: DESC }) {
      edges {
        node {
          excerpt
          fields {
            slug
          }
          frontmatter {
            date(formatString: "MMMM DD, YYYY")
            title
            description
          }
        }
      }
    }

Create a New Post Type in Gatsby

The last part we have to do inside of Gatsby is create a template that will be used to display the project posts.

 

  • Again, we can copy what exists in the src/templates/blog-post.js file into a new file: 'project-post.js'
  • In the new file, we need to update the graphql query
    • Need to bring in the new frontmatter fields we created.
    • Need to update the query to only work if the posttype is "Projects"
  • Also add some HTML (JSX) to display the links

Create a New Post Type in Gatsby

Finally, we need to update the gatsby-node.js file so that the correct template gets loaded for the corresponding posts.

 

  • Pull in project-post component(Template)
  • Create 2 new variables: blogPosts and projectPosts. (Filter array on allPosts)
  • Copy and update the forEach for blogPosts to run something similar for the projectPosts so that pages are created.

 

Configure a New Post Type in NetlifyCMS

Configure a New Post Type in NetlifyCMS

Open the config file for NetlifyCMS: static/admin/config.yml

 

We need update the collection for blog posts so that when we work in the CMS, it adds the new frontmatter type we added: 'posttype'

  • Create a new line under 'fields':
- { label: "PostType", name: "posttype", widget: "hidden", default: "Blog" }

Because we always want this field to be the same for every blog post, we can use the hidden widget with a default of 'blog'

Configure a New Post Type in NetlifyCMS

Create a new collection and configure it for the new projects post type

 

You will use most of the same fields as in the blog collection that already exists. You can copy it all as a good starting point.

 

You will need to create additional fields for the extra frontmatter fields we created.

Checkout the Widgets page in the NetlifyCMS docs for more options.

Let's Build a Portfolio

By mJordan Brady

Let's Build a Portfolio

Puppies and Portfolios: Let's Build a Portfolio with Gatsby + Netlify + NetlifyCMS

  • 63
Loading comments...

More from mJordan Brady