This is a very quick and easy tutorial for creating your very own website, for free, with very little technical skill needed. It really is as easy as 1, 2, 3.
Setting up a website can be a complicated and expensive process. But it doesn't have to be! This tutorial shows you how to set up a website completely free and with very little technical skill. Following these steps, you can have a website that looks just like this in about 30 minutes.
You will need to install two pieces of software, VS Code and Git.
Go to this website, https://code.visualstudio.com/Download, and select the right download option for your computer. Install the software as you would normally and/or follow the steps at this website, https://code.visualstudio.com/docs/setup/setup-overview#_cross-platform.
Install Git from https://git-scm.com/download
The installation is pretty straightforward, just accept all the default settings.
See this page for learning more about Git.
This section will show you how to create a free account at GitHub.com and connect a repository there with VS Code. You can then edit your website in VS Code and easily send the changes to GitHub where it becomes the "live" website.
Follow the tutorial at this page to set up GitHub and VS Code.
After completing the tutorial above, you will activate GitHub Pages, the magic that turns your repo into a website.
After the next step, you will be able to view your website at the link displayed!
OK, Let's make the first web page to upload to GitHub!
In VS Code, create a new file (just like you did with the README.md file) and name it 'index.html'.
You can put any plain HTML and CSS in this folder, and it will show up on your website. The 'index.html' file is special. If you do not include a file name in the website address (like this: https://ammonshepherd.github.io/make-a-website/) then the index.html page is shown. If you have a file named, hmmm, how about 'mario.html' then you can view that page at https://ammonshepherd.github.io/make-a-website/mario.html
So this 'index.html' page acts as your home page for the site. You can use this code here as a starter: https://github.com/ammonshepherd/make-a-website/blob/main/mario.html
Just copy and paste the code from that file into your index.html file.
To get the CSS styles to work, you'll need to create a new file named 'style.css' and copy the CSS code from here: https://github.com/ammonshepherd/make-a-website/blob/main/style.css
With those two files created and saved, now you can stage them, commit them, and push them to your new website.
Just wait a few minutes for GitHub to process the files, and then you can view them in a browser at your website address!
What if you want to preview the changes before you send them to GitHub? It would be tedious to have every small change follow the stage, commit, push process.
Fortunately, there is an easy way to view these files while on your computer, make any change you want and instantly see the changes before staging, committing and pushing.
For your local development, you just need to view the local file in the browser to see changes before making them "live".
There are two easy ways to do this:
In the Finder or File Explorer, browse to the index.html file you just created. Select 'Open with' and then select your favorite web browser. You should see the webpage!
Now you can make the changes in VS Code, save the file, then refresh the page in your browser to instantly see the changes before staging, committing, and pushing to GitHub.
The second option is just as easy. You can install a VS Code Extension (plugin) that gives you the option to open the current file in the browser.
Click on the Extension icon in VS Code, and search for 'Open PHP/HTML/JS in Browser' and install the extension by "PrimaFuture". (I know this one works, but if you search for 'open in browser' you'll find a dozen different options.)
Now you can click the secondary mouse button to pull up the context menu, and select the option to open the file in the browser!