How to Implement GatsbyJS (React) + Gitlab CI/CD on Linode (Ubuntu/Linux Server)

Hello everyone 👋

My name is Raihan, Today I'm gonna show & share How to Implement GatsbyJS (React) + Gitlab CI/CD on Linode.

### Overview

• GatsbyJS

Have you ever heard about GatsbyJS? If you haven't I'll explain to you what is GatsbyJS.

So basically, GatsbyJS is static site generator based React JS library from facebook that makes your personal site or blog better, faster using facebook's stack such GraphQL, React and the greatest moduler assets Webpack.

If you mant making stunning cool with top tech stack for your personal site for blog or portfolio, or you just want to learn making app with React, GatsbyJS is right for you.

• Gitlab

I've been with Gitlab for two years and gitlab is the most helpful Git-repository manager. One of the helpful features on Gitlab is shared runner of gitlab itself.

Gitlab shared runner allows you to activated auto pull and build the repo (Devops) on your server easily.

• Linode

And linode is virtual private server that simple, powerful, and reliable. Linode, perfect, best choice for learn how to hosted web on vps.

Okay, so let's get jump to our topic.

### Requirement

Let's assume you have installed Node, npm, Git, editor and browser on your local machine.

• Gitlab Repo

First we gonna create our repository on gitlab

After we created the repo, we can configure GatsbyJS project.

• GatsbyJS

We have to install GatsbyJS first on our global npm using :

After that, we gonna create Gatsby project on your local using this command via terminal or cmd :

You can check more documentation GatsbyJS here.

To run/develop GatsbyJS project on your local you can using this command :

Okay now you have installed GatsbyJS project correctly. By default GatsbyJS start running project on port 8000.

Now we can add origin repo to our Gatsby site.

To stage all files we can simply using :

And commit changes.

Last, we have to push local changes to origin master.

Okay now we have to configure our CI/CD on gitlab

• Deploy

We need ssh-key private RSA to using enable CI/CD on Linode Server.

First, we have to login ssh root@your-ip-address

Enter your password, and follow this command :

Now we have to copy our id_rsa key to our Variables Gitlab

Go to Settings -> CI/CD

Expand menu Variables

Now paste your id_rsa key to available field variables, give a name because we 'll call that variable using our CI/CD configuration .yml, You have to remember this point, if your variables is protected on, your target branch for autodevops must protected same as your variables.

Next, we also need our public_key pasted on our Deploy keys

Paste to our Deploy keys, go to Settings -> Repository

Paste public key to field key and type title whatever you want, checklist write access allowed.

Enable public key like this

Okay now we can add our CI/CD config .yml on Gitlab. 

Go to your home project you can see below options, then click Setup CI/CD

Change ssh with your ip_address and your path app on the server

Make sure you've installed GatsbyJS globally on your server.
Ok now hit commit changes.

Now, you can see your pipeline is running.

If your pipeline passed you can see green button status texted passed that means your autodevops running successfully.

You can see demo website that use website here.

So that's it. Hope it could be useful for you, don't forget comments, share and like this article, see you next post 👌👋✌

### LINKS

• https://www.gatsbyjs.org/
• https://docs.gitlab.com/ee/ci/