Hosting a Professional Portfolio Website for Free: With AWS S3 and GitHub Pages
In this blog, we will explore the process of creating a simple portfolio website using HTML and CSS. You can choose any frontend language you are comfortable with, but for this demonstration, we will stick to the basics of HTML and CSS.
The key objective of this blog is to understand how to host this static website on GitHub Pages. GitHub Pages is a great platform for hosting static websites, and we will walk you through the steps to deploy your portfolio website there.
Now, you might wonder, what’s the role of AWS S3 in this process? Well, when you work on your website locally to test and make changes, you often use file paths that are specific to your local machine. However, when you deploy your website on a remote server like GitHub Pages, those local file paths won’t work. This is where AWS S3 comes into play.
We will show you how to use AWS S3 to host your files and images, make them public, and obtain the corresponding URLs. These URLs can then be integrated into your code, allowing your website to access these assets even when hosted on GitHub Pages.
So, in essence, our main focus today is to bridge the gap between local development and remote deployment, and AWS S3 plays a crucial role in achieving this. Let’s get started with the step-by-step guide to create and host your portfolio website efficiently.
===============================================================
A Portfolio Website is essential for software developers, serving as a digital resume and a platform to showcase projects, enhancing credibility, and providing contact information.
GitHub Pages offers free hosting for static websites, integrates with version control via Git, and allows custom domain usage.
AWS S3 (Amazon Simple Storage Service) ensures reliable, cost-effective, and secure storage of website assets, making it an ideal choice for hosting files and documents.
===============================================================
- So before start make sure you have a GitHub account to Push the code and also for GitHub Pages as well as AWS account to use S3.
- So, open a code editor and write down html and CSS code for your website I will share my code for sample portfolio website accordingly your changes and need you can modify the code.
3. You Can Download Code from Below URL — →
https://mediumc.s3.amazonaws.com/code.txt
4. When your changing code “Name of Website” “Your Name”, “Designation”, “Img src (S3) URL”, “Your Content that speak about you”, “S3 File URL” and “Social Media Link” must be changed to your details as well as most imp save this file as “index.html”
5. After that create one “Public” repository. GitHub Pages only work if your repository is “Public” and push the code after your changes done.
6. After Pushing the code in your right-hand side you will see “Setting” option click on that
7. In the “Setting” you will see in your left-hand side option called “Pages”.
8. After Click on “Pages” option you will see “GitHub Pages” as well as “Deploy from branch option”.
9. Select you “Branch” from where your code will deploy.
10. and save it
11. Then pls wait for “1 Min” to deploy your website, GitHub automatically show the URL
12. and your website is open
13. Now as we are using images and documents in our website and still, we are using local path, but whenever we deploy website on server, server can’t find that path so our images or documents do not render, and it create a bad impression for that there is 2 way.
A. Insert That Images and doc folder under “Index.html” and change path in your code.
B. Deploy those on cloud and share that URL in code.
14. So, we are using 2nd path i.e., “B” for that login AWS and go to “S3” service
15. Crate a bucket on it name should be “Unique” and upload the “PNG”, “JPEG”, “DOC”, “PDF” whatever you want
16. Make sure you bucket is “Public” so we able to access that “URL”!
17. Before copy the URL go to “Permission” tab as you see below
18. Scroll down little bit and you will see “Buket Policy” this policy tells you the role and permissions about your data. So, when you create first time you will see the policy is empty, but we need to define some policy. Because if we don’t mention we got error “503” “Access Denied” so copy the following code and paste it in the policy and “Save” it.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::shrihariwebsite/*"
}
]
}
19. Go to again “Object” option, open any object and you will see “Object URL” copy that URL and paste it in the code i.e., “Image Source” and “Resume href”
20. and push it again in GitHub, after few minutes refresh your website and you will see your images and doc are open properly. Also, after push the code or changes in GitHub, GitHub web pages automatically trigger its own pipeline you also see when its last execute.
In summary, having a portfolio website is essential for anyone in the IT field to showcase skills and experience. GitHub Pages and AWS S3 are valuable tools that enable you to host your website and assets for free or at a low cost, making it accessible to a wide audience.
References:
