Hi Guys, welcome to my DevOps project writeup. I was tasked with deploying a personal portfolio website and hosting it on Killercoda using Nginx. To accomplish this, I used
- startbootstrap for their templates
- Vscode for editing files
- Nginx as my webserver of choice
- Killercoda ubuntu playground
This is a walkthrough on how I accomplished it.
Step 1: Getting a Template
I went to https://startbootstrap.com/ and selected my preferred template to download.
Step 2: Accessing the files via VS Code
I extracted the downloaded template and opened the folder via VS Code
Changes I made include:
- My name
- A brief bio
- DevOp skills I would like to learn and so on
Viewing the site via "Open with Live Server" displayed:
Notice the URL: http://127.0.0.1:5500/index.html
or http://localhost:5500/index.html
Step 3: Moving Files to Github
I went to https://github.com
Created a "tsacademystaticwebsite" repository on Github
- On Local system; Lauched VS Code > Terminal window Navigated to the directory where my template files are located
Started running git commands
git init
git config --global user.name "Daniel Inyang"
git config --global user.email "iny**********@gmail.com"
git add .
git commit -m "Tracking all files"
git remote add origin https://github.com/danielinyang/tsacademystaticwebsite.git
git push -u origin main
Step 4: Accessing Killercoda Ubuntu Playground
I went to https://killercoda.com/playgrounds/scenario/ubuntu
I got access to a cloud ubuntu environment where I could deploy and host my project.
Step 5: Install NGINX Webserver
on the ubuntu terminal prompt, i ran the command to insatll nginx
sudo apt install nginx -y
- Check that the nginx service is running
sudo systemctl status nginx
I also Opened the Web Traffic/Port on port 80 to also confirm that Nginx was running
Step 6: Cloning the Github Repo
- Now I will create a folder on the ubuntu server called "First_Project"
sudo mkdir First_Project
cd First_Project
- Now I intialize the folder with git and theclone the Github repo created earlier (tsacademystaticwebsite)
git init
git clone https://github.com/danielinyang/tsacademystaticwebsite.git
Step 7: Navigating to the Webserver Directory
By default nginx serves files from /var/www/html
I checked to see the content of that folder
sudo ls /var/www/html
i found the file "index.nginx-debian.html" which serves the default nginx welcome screen
Step 8: Delete the contents of the Webserver Directory
- I have to delete that file "index.nginx-debian.html"
To delete
cd /var/www/html
rm index.nginx-debian.html
Now when you check the content of /var/www/html, it will be empty
The nginx welcome screen will show an error message
Step 9: Move files to the NGINX Webserver Directory
I have to move the files I cloned from Github into First_Project folder to the webserver directory (/var/www/html)
cd First_Project
cd tsacademystaticwebsite
mv * /var/www/html
Step 10: My Website is Live
Using the site URL provided by killercoda to view the site
https://2760473c40b0-10-244-11-177-80.spch.r.killercoda.com/
Now if we refresh the nginx site again, we see this:
!!! SUCCESS !!!
NOTICE: The site on my localhost URL is the same as that on the Killercoda URL
Unfortunately the killercoda playground access only last for 60 minutes, so by the time you checkout the site, it most probably will already be down.
Conclusion
This was my first project I successfully deployed as an aspiring DevOps Engineer. I hope this was helpful and simple enough to understand and follow.
I am still learning, so please feel free to give feedback and advice.
Kindly leave a comment or a question If you have any; and I will be glad to respond.
Till next time, stay safe.
Top comments (0)