How I Built My Free Website

Here’s a step-by-step guide on how I created my free website using GitHub Pages and Visual Studio Code (VS Code). Follow these instructions to build your own!

Step 1: Create a Folder for Your Website

Start by creating a folder on your computer where you’ll store all the files for your website. For example, name it my_blog. This folder will hold your HTML, CSS, JavaScript, and any other assets needed for your site.

Step 2: Download Visual Studio Code

Download and install Visual Studio Code, a free and user-friendly code editor. Once installed, open VS Code and attach your folder:

Open VS Code.
Click File > Open Folder.
Select your folder (e.g., my_blog).

Step 3: Download Git

Before setting up your GitHub repository, make sure you have Git installed on your computer. Git is a version control system that helps you manage your code and collaborate with others.

Download Git from the official website here!

Follow the instructions for your operating system (Windows, macOS, or Linux).
After installation, open your terminal and verify the installation by running the following command:
```
git --version
```
If you see the Git version displayed, you're ready to move on!

Step 4: Create a New GitHub Repository

GitHub allows you to store and manage your code online, which is a lifesaver should you accidentally delete your code locally or mess up all your code trying to fix one bug.

GitHub is also essential for managing and hosting your website.

Log in to your GitHub account.
Click the + button in the top-right corner and select New repository.
Fill in the details, like the repository name (e.g., my_blog), and choose Public so you can enable Github Pages for your website later.
Do not initialize the repository with a README, .gitignore, or license (to avoid conflicts).
Click Create repository and copy the repository URL.

Step 5: Set Up Git Locally

Use your terminal to link your local folder to the GitHub repository:

Where is the terminal?

It'll be towards the bottom of the VS code editor, next to "problems", "output", "debug console".

picture of VS Code Editor with Terminal at the bottom

Navigate to your folder in the terminal using the command:
```
cd ~/Desktop/folder_name
```
You can get the path to your folder by dragging your folder from the desktop and dropping it into the terminal window.
Initialize Git in the folder:
```
git init
```
Stage and commit your files:
```
git add .
```
```
git commit -m "Initial commit"
```

Link the local repository to GitHub:

git remote add origin https://github.com/your-username/repository_name.git

Push the code to GitHub:
```
git push -u origin main
```

Step 6: Code Your Website

Create the necessary files for your website:

index.html: Main structure of your site.
style.css: Design and layout.
Optional: JavaScript files for interactivity.

Tip:

Download the Live Server extension in VS Code so you can view your code changes in real time. This allows you to test and preview your website locally before pushing updates to GitHub.

Go to the Extensions view in VS Code (click the square icon on the sidebar).
Search for "Live Server."
Click Install and follow the instructions to start a local server.

For more detailed guidance, check out this article: How to Use Live Server in Visual Studio Code.

Step 7: Push Updates Regularly

As you code, remember to push the changes to GitHub to update your website:

Stage all changes:
```
git add *
```
Commit with a message:
```
git commit -m "Update message here"
```
Push to GitHub:
```
git push
```

Step 8: Publish with GitHub Pages

Host your website for free using GitHub Pages:

Go to your repository’s Settings.
Under Pages, select the branch to deploy (e.g., main).
Click Save. GitHub will generate a live link to your site.

Your site will be live at https://username.github.io/repository_name.

Happy coding!