Let’s build a static website in less than 10 minutes and for … FREEEEE
A brief guide to building your static webpage in less than 10 minutes and for free- Yes, for free!!
We all wanted to build a website either for our new revolutionary App or to showcase our fantastic drawing talent, or share our passion for cheeses at one point in our lives. But often, for lack of time, skills, or money, we end up forgetting about it and never executing our idea.
So in this article, I will provide you with all the information you need to build a static website in less than 10 minutes with a beginner level of coding skills (a minim understanding of Git and GitHub is required; this tutorial can provide you with such knowledge).
Please look at my tutorial video HERE if you struggle to follow this article.
But first, what is a static website? A static website is a website that is delivered to a web browser exactly as stored. They are coded in HTLM and will display the same information to everyone.
Dynamic websites, on the contrary, are websites with content that can dynamically change. They involve the utilization of server-side logic to generate some content dynamically. (I will write an article on the technologies utilized here in a future article).
But let’s not go this rabbit hold now, and focus back on our static website :).
Our goal is to create a presentation/resume website to share with the world.
To do so, we will leverage an existing free HTLM template that we will update and then host and publish for free on GitHub.
1. Finding and updating an HTLM website template
Startbootstrap.com is a fantastic source of free HTML templates.
For this tutorial, we will use the template called resume. Feel free to explore this site, as there are many great templates.
We need to download the selected template and extract all its content. We can then proceed to give a more appropriate name to the folder.
We need to initialize Git for our current project; we can do so by running the command git init in a Git Bash (more details on Git here) within our folder, which contains the source code of the template we downloaded and extracted.
This initialization will allow us to track our project and facilitate the upload process of our website source code to GitHub, which will host our static website.
You can now start changing the content of the file index.html using your favorite code editor (VSCode for me). After some changes, you can open the same file index.htm in a web browser to see the outcome. Do not forget to save your modification first and refresh your web browser. (I will not dive deep into HTML or CSS; my recommendations for readers new to programming is to focus on choosing the suitable template and updating the right content).
Finally, let’s commit all our modifications to Git by executing the following command in already open Git Bash and still within the folder of our project:
2. Creating a GitHub repository, uploading your website source code, and publishing our website
At this point, we have made all the updates to index.htm. The rending of index.htm in a web browser is the website we have been dreaming about for a long time, and we are now ready to share it with the world !!
The next step is to create a repository on Github (choose the same options as shown on the screenshot below), which will host our static webpage source code (If you do not have a GitHub account already, you can create a new one here).
After clicking on Create repository button, you will be redirected to the following page:
We already committed all our modifications to Git at the end of the past section; we need to push all the source code to our new GitHub repository.
GitHub already provided the commands to link your local folder to your new repository and upload your changes (section circled in red on the above screenshot). Execute those commands in a Git Bash still within the folder of your project.
If done correctly, you should see many files in your GitHub repository now, including index.htm, with all your modification.
To publish your hard work, under your repository on Giub to the menu Settings and select the sub-section Pages.
Under the section Source, open the dropdown, and select the branch main (branch to which we upload all our modifications). Then click on the button Save !!!
GitHub will generate an URL from which anyone can now access your webpage !! Yes, we did, and in less than 10 minutes :)
3. Making some updates to your website after publishing
GitHub will automatically update your website when any changes are committed to the main branch.
You can make those modifications directly on GitHub, but if you have some experience with Git, I encourage you to follow these steps when trying to make some changes to your main branch:
1- Create a new branch for your changes
2- Commit those changes on that new branch and create a PR aka Pull Request for it
3- Review your change via the PR on GitHub or have someone else review your changes.
4-Merge that branch with the main branch and see your updates to the website go live !!
Conclusion
Assuming that you borrowed your friend’s laptop and used your local Starbuck wifi, you build and publish your website in less than 10 minutes.
I can only thank you for spending the last few minutes reading my tutorial.
So if you like this content, please give a clap, subscribe, and feel free to check the video tutorial associated with this article available here (Like and subscribe there too will be more than appreciated!!).
As always, all feedbacks are welcome !! Happy first week of 2022, and see you next week!!
