How to create and deploy a blog website with Gatsby and NetlifyDivyam RastogiBlockedUnblockFollowFollowingApr 17Even though I’m a Software Developer who works with HTML, CSS, and Javascript all day, about a month ago, I thought that it was way too hard to develop and implement a website.
It turns out; it’s not.
Gatsby LogoAccording to their website, Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.
Gatsby offers a variety of features out of the box — JAMstack, static PWA and much more.
So, here we go.
Step 1: Sign up for NetlifyFor developers, they need to sign in to Netlify using Github.
If you do not have a Github account, you could create one in just a few minutes.
Netlify Home Page.
Sign up on the top right.
Step 2: Decide a starter templateDecide upon a starter template.
You can do that here.
The community has put up a lot of starter templates.
For our purpose, we’re going to use the Personal Blog starter by Greg Lobinski.
This starter is by far the most extensively featured Gatsby Starter I could find.
You can check out the features of this starter kit on the Github repo.
Step 3: Clone or Download the starter templateYou can either download the repository or use the starter template via the Gatsby CLI.
Greg has already described these steps in his starter README.
md.
Install the Gatsby CLI using this command:npm install –global gatsby-cliDownload the starter kit using the Gatsby CLI:gatsby new [NEW_SITE_DIRECTORY_FOR_YOUR_BLOG] https://github.
com/greglobinski/gatsby-starter-personal-blog.
gitReplace the [NEW_SITE_DIRECTORY_FOR_YOUR_BLOG] with your directory name.
Navigate to localhost:8000, and you should see something like this:Running the starter will open this page.
Step 4: Run the application on your local machineJust run the following command in your terminal to get your application to run on the local computer.
cd [NEW_SITE_DIRECTORY_FOR_YOUR_BLOG]gatsby developI am running gatsby develop on a local machine.
Step 5: Edit the content/meta/config.
js fileThis file contains information about, siteTitlesite, description and manifestName — the name of your installable PWA.
You can also modify the social links in the file, describe the manifest information for your PWA.
Step 6: Add content using Markdown syntaxNow comes the critical part.
Markdown syntax is super-easy to use.
Here is the cheat-sheet for Markdown syntax.
Greg Lobinski has described this step in detail in this blog article.
Add content incontent/posts, content/pages, folders and in parts folder, theauthor.
md, footnote.
md, info.
md files.
Make note that the folder structure should always be of the format index–title for pages and yyyy-mm-dd–post-title for posts.
Delete the other example posts and pages you deem unnecessary, and you should be able to see the changes in the application on your machine.
In case you don’t, shut down the app from the terminal by using Ctrl + c and restart by running gatsby develop.
Step 7: Build the static websiteBefore you build, you’ll need to configure a .
env file in your project’s root directory.
The application will not work until you set Algolia.
Greg Lobinski has described the steps to do so in this article.
Build your application using the following command:gatsby buildThe above command will create folders and files in thepublic directory inside your project’s root directory.
Step 8: Deploy to NetlifyGo to Netlify, and after login, you should see a screen like:Home Page after loginJust drag and drop your public folder on to the droppable area and it will deploy the website.
You will be able to see the app on Netlify’s subdomain.
Post DeploymentYou can configure HTTPS and many other features on Netlify.
Please keep an eye on this space for further optimizations.
.