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
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
First, we have to login
ssh root@your-ip-address
Enter your password, and follow this command :
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.
Now we have to copy our id_rsa key to our Variables Gitlab
Go to Settings -> CI/CD
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
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 👌👋✌
nice
ReplyDeletethanks
Deletenice thanks for sharing.......................!
ReplyDeleteData Science training
DevOps training
Exchange Server training
Google Cloud training
IBM Intergration Bus training
IBM Message Queue training
install shield training
Kubernetes training
Linux Admin training
you're welcome!
Delete