GatsbyJS Series — Setup project and deploy site automatically (Part 1)
About this series
So that in this series, I hope that can help you a little bit about how to build a personal blog for yourself with the power from GatsbyJS. Moreover, you will see how easily we can manage content/backend/cms headless thank for Contentful service, then we can totally focus on the frontend side.
This series includes:
- Setup project and deploy site automatically
- Configure useful plugins and organize project
- Layout with mocked data
- Integrate CMS headless easy for everyone
- Create blog details page dynamically
- Seo basic and add custom domain (namecheap)
A quick introduction about GatsbyJS
Now let’s start to the first part of this series: Setup GatsbyJS project.
First, we need to install Gatsby CLI (current version is 2.7.0) to our local machine by running this command in terminal:
npm install -g gatsby-cli
Create your first gatsby project:
gatsby new mr-leo-dev https://github.com/gatsbyjs/gatsby-starter-hello-world
Note that https://github.com/gatsbyjs/gatsby-starter-hello-world is a starter project with some default configuration to help you get moving faster on creating a blog.
It will take some time to fetch starter project and install dependency libraries. After that process finish, we can move to project folder:
Now check our site at http://localhost:8000
Don’t forget first commit
We’re using github for git repository this project.
git remote add origin firstname.lastname@example.org:leo-le-07/mr-leo-dev.git git push -u origin master
Note: Source code of this project will be published at this repository email@example.com:leo-le-07/mr-leo-dev.git
Project structure in the beginning
We’ll use VS Code as editor for this project. Let’s take a look at project structure in the beginning. We have 3 main folders:
.cachean hidden folder that contains only in Gatsby internal (listed in
.gitignore). It caches some configurations when we build project. Nothing we should change right now.
publicwhich contains the resulting website after we build it.
srccontains all our source code for blog.
staticwhich will contain the static resources.
In case you want to investigate more about Gatsby project structure, we strongly recommend to their official document here.
Go live our blog
I know that someone will have a question: What? We don’t even write a line of code. Why do we need to publish blog so soon?
As my experience, go live our project: website, blog, etc. as soon as possible is one of the best practice I’ve learned. We don’t build a blog that only works on our local machine, we build the real thing can be used by the internet. You can consider it as ending user testing for our blog.
We’ll use one of the popular services can help us deploy our site automatically in this field: https://www.netlify.com/.
Access netlify dashboard https://app.netlify.com/ to create new site from git
We have several options to connect with Netlify service, here, we’ll connect to our Github Repository. At the first time using Netlify, we have to authorize netlify app with our github account to access our repository later.
After authorize successfully we can select our project repository:
In last step, netlify allow us to adjust build options. We’ll keep it as default and start deploy site.
Now we are able to see our deployment request in Netlify queue.
After deploy successfully, we can access our site at address https://vibrant-mcclintock-5a849d.netlify.com/. It’s a random address by Netlify. We don’t need to worry too much about it now because we’ll buy nicer custom domain later in this series for our blog.
Awesome. Great start for our blog. In the next part in this series, we’ll dive into Gatsby configurations in order to work with typescript, styled-component, image handling, typography, etc.