code in my day
Published on

Create and Publish your own Gatsby blog

3 min read
Authors

Step by step Guide: Gatsby on Cloudflare Pages

Prerequisites:

Node

Install the Node version by following the official documentation(https://nodejs.org/en/download).

After installing the Node version, check the version by typing the following command in the terminal window:

node -v

Git

Please follow the steps to install Git on any OS (https://gitforwindows.org/).

To install Git on the Window's platform:

Gatsby-cli

Gatsby is a React-based SSG framework that has quickly evolved to become one of the go-to developer platforms for building fast and secure websites.

To install the Gatsby CLI, open your terminal window and run the following command:

npm install -g gatsby-cli

The -g flag installs Gatsby globally on your system. Gatsby provides a number of starter libraries for quick building and publishing. You can choose from the Gatsby Starter library.

For this example, we'll use the gatsby-starter-blog library.

Install with gatsby-cli
npx gatsby new blog https://github.com/gatsbyjs/gatsby-starter-blog
cd blog
gatsby develop

Your new blog should be accessible at localhost:8000.

GitHub Repository

As the blog code is ready to be committed and pushed to the GitHub repository, create a new private GitHub repository.

github repository

Please don't initialize the repository with 'readme' or '.gitignore'.

Open the terminal and navigate to your blog directory in your local project. Initialize the local repository:

git init

Stage your changes and commit:

git add -A && git commit -m "first blog commit'

Add the URL for the remote repository - https://github.com/your-github-username/your-repository-name>

git remote add origin https://github.com/<your-repository-url>

Now, it's time to push your new blog to the GitHub repository:

git push -u origin master

Cloudflare Pages

There are several cloud platforms that provide hosting, deployment, and serverless functions. Some of the famous and free options are Netlify, GitHub and CloudFlare.

If you want to host on Netlify, please follow the steps here.

For this example, we'll be using Cloudflare Pages.

If you don't have a Cloudflare account, please sign up here.

Log in to your account and navigate to the 'Pages' section.

Click the 'Create a project' button, select GitHub from the list, and authorize Cloudflare to access your GitHub repository.

Under Build Settings, choose:

Build Command: 'npx gatsby build'

Build output directory: public

Custom Domain(Optional)

If you have a custom domain, you can configure it in the "Custom Domain" section.

To deploy, click the "Save and Deploy" button to trigger deployment. Cloudflare Pages will pull your GitHub repository code, build, and deploy it.

Cloudflare Pages will provide you with a URL where your Gatsby blog site is hosted and accessible by any browser.

Load your first blog

Copy and paste the url in any browser and load your first blog.