How To Deploy Web Application On Gatsby?

In This Story, We Will Say That How Can We Deploy An Application On Gatsby

Gatsby is the fast and flexible framework that makes building websites with any CMS, API, or database fun again. Build and deploy headless websites that drive more traffic, convert better, and earn more revenue!

The way Gatsby is used in the development and hosting of the application is very easy and performing certain steps in it. Certain easy and good steps are used and taken into account that will be used in hosting of the websites and various applications.

Gatsby

How To Make An Account On Gatsby?

Making an account of Gatsby is really easy. There are various steps involved in it:

1. Go To the Official Website Of Gatsby.
2. Click On GetStarted Button.
3. This Will take you to the signup page in which you can create a new account if you do not have an account there.
4. Otherwise, If you have an account there you can go to various other platforms such as GitHub, GitLab, etc.
5. Once You Create An Account, you are good to go and create and host your first web application on it.

Hosting An Application On Gatsby

We can host any created web application on Gatsby. But keeping in view that this article is understandable to all the people of various levels in it, we will consider a starter that is made available to the various developers on Gatsby.

So here we take a simple portfolio website in this account in the starter that is made available to us, first, we will clone that repo in our local system. In order to find the starters go and find out the starters section and click and find them and then click on that. This will take you to all the starters available at that time.

Go To Starters and select a starter from it. Here is this I have selected a portfolio. So take the next steps into consideration:

1. When you go to the starters page and as we select the portfolio starter, there will be an option to clone and download it. Run the below-given command to download it into your local machine.

npx gatsby new gatsby-starter-portfolio-cara https://github.com/LekoArts/gatsby-starter-portfolio-cara

2. Next we run this command in our local machine and by entering it, we see that the repo is downloaded in our local machine. In the image, you can see how the folder structure looks.

Folder Structure After Downloading The Application.

3. Next Step includes GitHub in it. Create an account if don’t have it. If you have an account there, create a new repository. Create the repo with any name you like to give it. Once you name that repo, the next step is to transfer your repo on GitHub. Run the commands to make a copy of the code onto GitHub.

4. You can run the application on your machine to take a glimpse of how it looks. Run the following command.

npm run deploy

5. Next you will go to the gatsby dashboard. Click the Add a site button.

6. Next Import a repo that you want to deploy on gatsby.

7. Click Next and see all the basic configurations and Click Build.

8. Next Gatsby will trigger it by default. The developer can trigger manually by clicking the trigger build button.

9. So By Clicking the site after the site has been triggered, the site is deployed in it.

10. So This Is How The Application is deployed on Gatsby.

Now, this is just a starter on Gatsby. But you can add your content by editing the MDX files in your folder structure. So this is how one hosts a website on Gatsby. Hosting a web application on Gatsby is a play of a few minutes and after that, you could see a developed web application On It. The Link is https://gatsbyportfoliomain34638.gatsbyjs.a/. Below is given the image of how the website looks here.

Portfolio Website

So That Was All From My Side In This Blog Where We Talked About How To Host Your Application On Gatsby Within Few Minutes on Gatsby.

I Am ARYAN GARG, A Third Year Student Of Information Technology And Pursuing My B.E/B.Tech From Dr. B.R. Ambedkar National Institute Of Technology, Jalandhar, Punjab, India.

If You Like My Blog, Kindly Like And Share It On Different Platforms. If Someone Still Have Any Doubts, You Can Either Contact Me On Various Platforms Given Below Or Directly Comment In This Blog Comment Section. I Will Surely Help You Out.

You Can Connect With Me On Various Platforms For Further Discussions And Project Work As I Am Also Available For Freelancing. The Profile Links Are Given Below:

• LinkedIn — https://www.linkedin.com/in/aryan-garg-661552198/
• Instagram — https://www.instagram.com/aryan_garg_08/
• Facebook — https://www.facebook.com/aryan.garg.9022662/
• GitHub — https://github.com/code08-ind
• Personal Portfolio Web Site — https://code08-ind.github.io/Aryan-Garg/

You Can Also Contact Me At My Email: gargaryan82000@gmail.com.

Keep Coding, Keep Developing!!!