Setting Up Your First Website for Free
Using MDBootstrap and GitHubPages
Do you want to build a website but aren’t sure where to start? Do you know some HTML and CSS but aren’t confident to build a site from scratch? Or maybe you have a site but want to host it for free somewhere. Then this guide is for you!
Setting Up
To get started you are going to need a GitHub (a hosting provider) account and git (a version control software) installed. You will also need a code editor eventually to edit your site code, I recommend VS Code.
Getting Started
Alright now let's get started! Go to your newly created GitHub account and create a new repository (use the + icon in the top right). This process effectively creates a “virtual folder” for your code to live on the GitHub server that we can then use to run our website.
Then add a repository name, for example, the topic of your project, and a brief description. You can leave the other defaults for now!
Getting the GitHub Repository on Your Computer
Now, the process to get this repository on your local computer is very simple. Simply open up a terminal on your computer, on Mac/Linux this is called terminal, on Windows, it is usually Command Prompt accessible by using the Windows key then typing ‘CMD’.
Once you are in your terminal, we are going to work on our Desktop for now so things are more visible. So change the directory into your Desktop using the command: cd Desktop.
Now, back on our GitHub repository, we can clone or copy, our code onto our local desktop.
Click on the green Code button, make sure HTTPS is selected, and click on the Copy icon to copy the URL.
Now, back inside your Terminal or Command Prompt, type:
git clone <URL>
and insert the URL you just copied in the <URL> space. Some terminal programs make a copy, pasting hard so give it a few different tries using right-click or Ctrl+Shift+V.
If successful, there should be a new folder on your Desktop with the same name as your project name on GitHub!
CONGRATS!
Get the HTML Code from MDBootstrap
Now for the fun part! Go to mdbootstrap.com and find the jQuery section and click Getting Started.
Then scroll down and click Download .ZIP. 😊
Save this folder to your Desktop and then unpack the zip file. Your desktop should now have your GitHub project and the MDB unpacked zip folder!
Only one step left, open the MDB folder and copy ALL the files and folders, then paste them inside your project’s folder!
At this point, you should have your GitHub project on your desktop and should have copied the MDBootstrap files inside that project!
Changing our Site
Currently, the MDBootstrap main file is just a simple sample, so we can change it to show that it is ours!
First, let’s open up our project in our code editor. Reopen that terminal window and change the directory into your project, assuming you are already on the desktop you can use cd <your-project-name>. Then type code . to open your project in VS Code. Then open up the index.html file.
Great! Now, if you open your File Explorer on Windows or Finder on Mac and open this file it should look like this:
Let’s change our index.html to show we can change this text!
Making a small change let's replace the ‘MDB Team’ with your name! Make sure you save these changes!
Now go back to your browser and hit refresh and you should see the changes!
Great! Now how do we get these changes on the actual web?
Hosting Your Website
Last step I promise, we are almost there!
Go back into your Terminal and type: git init to re-initialize your git repository. Now, there are good git standards, but for our purposes, we are going to follow this template every time you make changes you want to see on the hosted website.
**make sure you are in the project directory when typing these commands**
git init(this re-initializes git)git add .(this adds all your changes)git commit -m "<your-message>"(this commits your changes to version control, the message should be short and reflect the changes you made. For example, here we could say “Modify team name” as our message)git push origin main(this pushes your commits to GitHub) 😊
Now you if you go to your GitHub repository on GitHub.com and refresh the page, you should see all our files added!
Congratulations you did it!
The very last thing we need to do is tell GitHub we want it to publish our site. Go to the Settings tab and scroll all the way down to the GitHub Pages section. Now make sure the source says branch: main and the folder is root.
Great! Now you can click on the link and see your live GitHub repository! You can even add a custom domain if you have one purchased!
Congratulations you did it, you published your first website!
If you need more motivation for templates and ideas, the MDBootstrap docs are AMAZING and they can give you great ideas so check them out and integrate those templates/code into your site and make it your own!
Thanks for reading!
