Creating a Website
This guide will go over how to quickly create a personal website using Render!
Posted July 1, 2023
What you will need
For this guide, you will need:
- Visual Studio Code to write code for your website.
- Install the Live Server Extension so we can see updates to our code in the browser
- A GitHub account to keep track of your code
- Install the GitHub Desktop App to make Git commands easier
Creating a New Repository
On GitHub desktop, create a new repository and give it any name, description, and path you want, leaving the other options on default. I just named mine personal-website and added a path to my Documents folder.
You can click on Publish repository to make your new repository remote, meaning it is now tied to your GitHub account and can be accessed on the internet (you can check this by going on GitHub!)
Once your repository is created, open the repository by clicking Open in Visual Studio Code.
Grabbing a Template
We could code your website from scratch, but to get it up and running first let’s grab a Bootstrap template for now.
Download the Personal template from Start Bootstrap and extract the zip folder in your new repository. Rename the folder to build.
In Visual Studio Code, open index.html and press ALT+L ALT+O.
This will open your home page on your default browser, and whenever you make edits to index.html it will update in your browser.
However, this website is only running on your local machine, meaning it is unavailable to the internet. Lets change that in the upcoming steps!
Commiting and Pushing
Now that changes have been made to the local repository (on our computer), we want to commit to these changes and push it to our remote repository (on the internet).
On the left-hand side of GitHub Desktop click on Summary (Required) and type Added Bootstrap Template. Click Commit to main and then Push origin. Verify that this commit has been pushed by checking your repository on GitHub.
Once this important step is done, it is now time to host our newly created website!
Creating a Static Site
Go to Render and create a new account. Once your account is created, go to the dashboard and add a new Static Site. Connect to your GitHub account and then connect your repository.
Give the static site the name of your personal website (e.g. firstname-lastname) and change the Publish directory to build. Now, click Create Static Site and wait for render to setup your website.
Once you see the text Your site is live 🎉 on the console log, click on your website url (found at the top of the page) and you should see your brand new website! Congratulations!
Next Steps
This was just a quick guide to get you started and get your website up and running, but here are some next steps to look forward to.
Personalize your Website
Obviously the website we just launched isn’t ready to share with other people yet because it was just a template. You can now edit the content of the template on Visual Studio Code to suit your personal website.
Once you’re happy with the result, simply commit and push to GitHub, check the render dashboard to see the progress of the deploy, and check that the website now has your changes!
Adding your personal domain name
You might be perfectly happy with the domain name that render provides for free (ends with .onrender.com), but if you want your own domain name you can go to namecheap and purchase a domain name for a couple of dollars per year.
Here is the guide to set up Custom Domains on Render.
Resources for Digging Deeper
If you want to break away from the Bootstrap template and you have some time to dedicate on a personal project, you can code the website from scratch using HTML, CSS, and JavaScript. This is way beyond the scope of this guide, but I have some resources that have helped me to build this website.
Something that I have been checking out recently to help build my own website is a web framework called Astro. It seems to be exactly what I need for my website, and I’ll probably write a blog about it soon. But if you’re interested, I’d recommend checking out their in-depth tutorial to get started on your website!
Websites
Youtube Channels
Inspiration
How To Build and Host A Website From Scratch in 2023 (For Free)