After graduating from Flatiron School recently, I wanted to create a personal portfolio site. With a desire to keep my skills sharp, I decided to see how I could make up a portfolio site using React. As I was poking through the React documentation, I found that it recommended trying out Gatsby for static content-oriented sites. This seemed right up my ally for making up a MVP portfolio website… and onward the learning journey continued!
So what is Gatsby? According to gatsbyjs.org, “Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps… Gatsby.js builds your site as “static” files which can be deployed easily on dozens of services.” Cool. So far, Gatsby has been pretty easy to pick up – when they say it only takes a few minutes to get up and running, they’re not joking! Gatsby has a multitude of what they call “starters” or template sites you can use to get up and going fast. You can have a look at them here. After looking through some starters that I wanted to use for my site, I picked this one by John J Kerr for its clean and beautiful look (nice work John! Thanks for sharing.) In this post, I’ll describe the process so you can follow along too!
Toward the bottom of the Gatsby starter’s page, you’ll see it even gives you the Gatsby CLI command to get going with that specific starter! We’ll be using that in just a second. But before we do that, we’ll need to make sure we have Gatsby’s CLI installed first on our local machine. Simply use npm from your terminal to install it globally
npm install -g gatsby-cli
Well, that was easy.
Then we’ll go ahead and run the command found at the bottom of the Gatsby starter page. You can chose to name the project folder something else besides the default that is given. In my case, I replaced gatsby-creative with roddendev-brand. Also, if you selected a different starter, be sure to replace the github repo link (https://github.com/JohnJKerr/gatsby-creative) with the appropriate repo link for your starter.
Default command at the bottom of the Gatsby starter page:
gatsby new gatsby-creative https://github.com/JohnJKerr/gatsby-creative
What I used:
gatsby new roddendev-brand https://github.com/JohnJKerr/gatsby-creative
Now, cd into the new directory - in my case roddendev-brand:
cd roddendev-brand
Alright, now we can start our development server
gatsby develop
Sweet. Now we can navigate in our internet browser to http://localhost:8000 and we’ll see the starter site. Piece of cake!
You can then proceed to open up the project folder with your favorite text editor (I use VS Code so from the terminal with the roddendev-brand opened, I can simply type code .
We definitely want version control so lets put this on Github. (You can open a terminal in VS Code using Ctrl + ` on a Mac or go to the View menu then select Terminal. You also can just use another regular terminal window.) To prep the new project folder for Github, run these three commands one right after the other.
git init
git add .
git commit -m “Initial Commit"
Next open up your browser and navigate to github.com/new (If you are logged in, this will take you directly to the Create New Repository page; otherwise, login and then go to the + button next to your avatar in the upper right and select New Repository)
Go ahead and give your repo a name. I typically like to call it the same as what the project folder name is, so in my case I set it to roddendev-brand and then click on “Create repository”
Github will now give you instructions. You’ll want to copy the commands from the “push an existing repository from the command line” section.
Keeping with my example, the two commands to run would be:
git remote add origin git@github.com:jrodden1/roddendev-brand.git
git push -u origin master
Go back to the same terminal window you were entering in the git commands before and run those two commands.
If all is well, you should be able to run git remote -v and see
origin git@github.com:jrodden1/roddendev-brand.git (fetch)
origin git@github.com:jrodden1/roddendev-brand.git (push)
(except it will be your repo name in there now)
Alright, then we’ll push our initial commit to github using
git push
Awesome! Now, let the customization begin! At this point go to town personalizing your starter. In my case I customized this starter fit my personal brand needs.
In conclusion, Gatsby is pretty neat! They also have really good tutorials on their site. If you are not as inexperienced with coding, I suggest you start with this tutorial and for the more experienced, this tutorial. Once you are ready to publish, head on over to the Deploying & Hosting section of Gatsby’s documentation. I ended up using their Heroku directions, and it was easy peasy to get it running. Feel free to have a look at my repo here.
May this post help you in your journey of being a growing coder!
Jeremiah