How to Manage the Deployment of Our Website Via Pipeline: CI/CD

Today, we are going to see how we can manage the deployment of our website through GitHub Actions pipeline.

Step 1: Create a private repository in GitHub and clone the repository

Step 2: Creating a token in your GitHub

• Open your GitHub, and click on your profile on the left
• Click on settings
• Click on developer settings
• Click on personal access tokens drop-down

• Choose tokens (classic)
• Click on generate new token

• Choose classic token

• Name the token
• Scroll down to workflow, and enable it

• Click on generate token
• Copy the token before you exit the page

Step 3: Git clone the private repository

• Open your PowerShell or command prompt (CMD)
• Type git clone https://your github username:the token you [e-mail]/your github username/your private repo name.git
• cd to repo you clone
• Then type code . (it will take you to your vs code)

Step 4: Download a free CSS website template

• Search for free CSS templates on your browser
• Download the one you like
• Go to your download file and unzip the website template
• Once you unzip it, open it and copy everything
• Locate your private repository

• Open it and paste the CSS website template you copied

• Go back to your VS Code, and it will reflect

• Type git status

• Type git add .

• Type git commit -m 'my website'

• Type git push

• Check your GitHub repo to see what you pushed

Step 5: Creating a Dockerfile

• Create a file in your VS Code, and name it dockerfile
• Click on the dockerfile
• Type FROM ubuntu:latest
• Type RUN apt-get update
• Type RUN apt-get install -y nginx
• Type RUN rm -rf /var/www/html/*
• Type COPY . /var/www/html
• Type EXPOSE 80
• Type CMD ["nginx', "-g", "daemon off;"]
• Save it

Step : Push it to our GitHub

• Type git status

• Type git add .
• git commit -m 'dockerfile added'
• git push
• Check your GitHub repo to see the dockerfile included

Step 7: GitHub Actions Pipeline

• Open your GitHub repository
• Click on Action at the top
• Search for Docker pipeline
• Copy the code
• Go to your VS Code, create a folder, and name it .github
• Create a file, and name it workflow
• Create another file, name it docker_build_push.yaml

• Click on the docker_build_push.yaml and paste the code you copied
• Below job: where you see docker: add buildpush before: ( something like this dockerbuildpush:)
• Go to your GitHub repository, and click on settings
• Scroll down and click on secret and variables

• Click on secret, and click on new repository
• Name it DOCKERHUB_TOKEN
• Go to your Docker account and generate a token
• Copy it, and paste it into your GitHub secret

• Click on add secret
• Click on variables
• Name it DOCKERHUB_USERNAME
• Put your Docker username

• Click on add variables
• Go back to your VS Code
• Scroll down to tag, remove user, and put ${{vars. DOCKERHUB_USERNAME}}/websiteapp:latest

• Save

Final Stage

• Type git status
• Type git add .
• Type git commit -m 'git action pipeline code added'
• Type git push
• Go to your GitHub repo
• Click this marked place
• And this will be your result if there is no error