Clone the repo
Repo: https://github.com/surajupadhaya/Portfolio-app
Push the same code to your repository.
Setup the Circle CI (free CI/CD tool) with GitHub
Sign in to your CircleCI account.
Connect your GitHub account to CircleCI.
Once connected, you’ll see your existing projects populate on your CircleCI dashboard.
Add the environment variable by click on project setting option you will find Environment variable option
$Hub_Pass = docker hub password
$Hub_user = docker hub username
Now make changes in templates/index.html file as needed
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suraj Upadhaya</title>
<style>
/* Basic styling */
body {
font-family: 'IBM Plex Mono', monospace;
margin: 0;
padding: 0;
overflow: hidden;
background: url('../static/stars2.jpg') fixed;
background-size: cover;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
color: #833AB4;
font-size: 36px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
p {
color: #333;
font-size: 18px;
text-align: center;
}
a {
color: #FD1D1D;
text-decoration: none;
}
.logo-container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}
.logo {
width: 30px;
height: 30px;
margin-right: 10px;
}
</style>
</head>
<body>
<div class="stars"></div>
<div class="container">
<h1>!! Hey !!</h1>
<p>Check out my <a href="https://github.com/surajupadhaya">GitHub profile</a> and connect with me on <a href="https://www.linkedin.com/in/surajupadhaya/">LinkedIn</a>.</p>
<p style="font-family: Arial, sans-serif; font-size: 18px; color: #333;">Tech Stack:</p>
<ul style="font-family: 'Courier New', monospace; font-size: 16px; color: #666;">
<li><a href="https://docs.ansible.com/">Ansible</a></li>
<li><a href="https://www.gnu.org/software/bash/manual/">Bash</a></li>
<li><a href="https://www.perl.org/docs.html">Perl</a></li>
<li><a href="https://docs.microsoft.com/en-us/azure/azure-resource-manager/bicep/">Azure Bicep</a></li>
<li><a href="https://docs.python.org/3/">Python</a></li>
</ul>
<div class="logo-container">
<a href="https://github.com/surajupadhaya"><img class="logo" src="../static/github-logo.png" alt="GitHub Logo"></a>
<a href="https://www.linkedin.com/in/surajupadhaya/"><img class="logo" src="../static/linkedin-logo.png" alt="LinkedIn Logo"></a>
</div>
</div>
</body>
</html>
change Title name , GitHub repo link , LinkedIn link
<title>Suraj Upadhaya</title>
<p>Check out my <a href="https://github.com/surajupadhaya">GitHub profile</a> and connect with me on <a href="https://www.linkedin.com/in/surajupadhaya/">LinkedIn</a>.</p>
Push to your repository with the changes, Once pushed you will see the circle Ci pipeline get triggered and it starts to build the Docker images with python app and try to push the image to docker hub registry.
Once build is complete it will start with deploy the container and try to curl the localhost on port 5500 for html output of that application.
- If you don't want to trigger the pipeline for any change push to repository then use [skip ci] in your commit message
Basic Structure of .circleci/config.yml
jobs:
build :
steps:
- run:
command: echo "hello word"
deploy:
steps:
- run:
command: echo "hello word"
workflows:
"how you want your jobs to run "
Snippet below
BUILD :
jobs:
build:
docker:
- image: cimg/base:current
steps:
- checkout
- setup_remote_docker
- run :
name: Build the image from Docker file
command: |
docker build -t suru12/portflask-cci:v1 .
echo $Hub_Pass |docker login -u $Hub_user --password-stdin
docker push suru12/portflask-cci:v1
This step images will get create according to the Dockefile and the image will get pushed to docker hub
DEPLOY:
- run :
name: Run the docker container with suraj/portflask-cci:v1 images
command: |
docker run -d --name portfolio -p 5500:5000 suru12/portflask-cci:v1
sleep 20
curl localhost:5500
This step will run the docker container using the same image you just created and try to run curl on localhost:5500
Top comments (0)