Creating a CI/CD pipeline!

danipo

danipo87

Posted on October 13, 2021

Creating a CI/CD pipeline!

Fairly quick post today.

I was going to work on the next step of the webpage by adding a counter in React, but the whole not-having-version-control-set-up was starting to bother me. All my projects at work use Git, so why shouldn't I be able to use it here?

I also ran into a bit of a snag, I was cleaning up some of the template features that I didn't really need, and OOPS I deleted some bootstrap code that handled the page formatting. Bad news: I deleted it. Good news: I still had the template saved. So all I had to do was just copy the files I had removed. Another reason I need to get Git set up ASAP!

So I went to my GitHub page (shameless plug, though not impressive in the least) and created a new repo.

New lesson! If you're using VSCode, you don't need to create the repo. You can push the working directory into a new GitHub repo using their built-in source control handler. I deleted the one I had made on the site, and pushed the local folder to a new repo.

That was the easy part. Next, that repo has to communicate with S3. This is where Github Actions come in. I was already familiar with pipelining previously as my work uses Gitlab and their similar CI/CD tools, so the YAML structure was very easy to set up and understand. I just needed to figure out how to talk to S3.

Luckily that was also pretty easy with a few searches. I landed on this blog which went step by step detailing adding the AWS Access Keys to my Secrets and what to add to the YAML.

From there I ran a few tests, checking in a few small changes to see if they showed up in GitHub, succeeded the pipeline, and showed up in my Bucket. Then opened up my website in my mobile browser to verify. And it was all done!

Finally some version control, peace of mind, and some sleep!

Until next time!

💖 💪 🙅 🚩
danipo
danipo87

Posted on October 13, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related