Step-by-Step Guide: Deploying Your First HTML, CSS, and JavaScript Projects on GitHub

If you are new to programming and you’ve just finished your first website, and you're wondering how you can make it public, you’re on the right page. In this blog, I will teach you how to deploy your program with just a few steps using GitHub pages. Before you start, make sure you have a GitHub account and Git Bash or any other terminal that your machine has.

1. Once you’ve created your GitHub profile, go to GitHub and click on "New" (green button) to create a new repository.

2. Add your repository name and description (optional), and set it to public. Then click the "Create repository" button.

3. After hitting the "Create repository" button, you will be on this page:

These steps are also shown on the page you are currently on, but to make it easier for you, I’ll provide an explanation of each step.

4. Open your terminal, then use "cd" (change directory) to navigate to the path of your file. If your files are on your Desktop in a folder called "javascript," type "cd Desktop" then "cd javascript." Once you're in the correct path, proceed to the next step.

5. Type "git init" to initialize the repository. A simple analogy is like inserting a memory card into your gaming console because you want to save your game.

6. Next, type "git add ." This will move your files to the staging area, similar to preparing all the games that you want to save.

7. Then type "git commit -m “<Your message>” or you can simply type “first commit” or “initial commit”. Note that "-m" stands for message. Usually, the content of the message reflects the actions you've taken. For example, if you fix or update a link in your HTML element that is not working, your commit message may look like this: "git commit -m “fix link”. The commit message will guide you if you have multiple updates in your files. You can always go back to the previous commit if you want, but that's another topic. For now, let’s focus on deploying your website.

8. Next, switch to the main branch by typing "git branch -M main." Previously, this was called "master," but there have been changes in the industry regarding naming conventions. That's why we now use the main branch instead of master. However, you don’t need to overthink this.

9. After switching to the main branch, type "git remote add origin https://github.com/<username>/<repo-name>.git". Note that "<username>" and "<repo-name>" are your personal information.

10. Finally, type "git push -u origin main" to push your local code to GitHub.

11. After that, go to settings in the upper right portion of your current page.

12. Set the branch to main if it's not yet set, then save.

13. Wait for a few minutes, then go back and refresh the page.

14. Keep refreshing until the page says your site is live at…

15. Then you're done! Congratulations on deploying your first website.

16. You can always refer back to this guide and use it as a resource whenever you’re deploying a website.

Good luck, and thank you for reading my guide.

If you want to dig deeper, here is a more in-depth explanation of the Git commands.

1. git init: This command initializes a new Git repository in the current directory. When you run git init, Git creates a hidden directory named ".git" where it will store the repository metadata and configuration.

2. git add: This command adds changes in the working directory to the staging area. In other words, it prepares the changes to be included in the next commit. You can specify specific files to add (`git add <file>`), or you can add all changes in the working directory with git add . or git add -A.

3. git commit: This command records the changes that are staged in the staging area to the repository. It creates a new commit object containing a snapshot of the changes along with a commit message that describes the changes. The syntax for committing changes is git commit -m "Commit message".

4. git branch: This command is used to list, create, or delete branches in a Git repository. When called without any arguments, it lists all the branches in the repository. To create a new branch, you can use git branch <branch-name>. To delete a branch, you can use git branch -d <branch-name>.

5. git remote add <name> <url>: This command adds a new remote repository, typically a repository hosted on a server like GitHub or GitLab, with the specified name and URL. The name is a short alias you give to the remote repository, and the URL is the location of the remote repository. For example, git remote add origin https://github.com/username/repo.git adds a remote named "origin" pointing to the repository hosted at the specified URL.

Each of these commands plays a crucial role in managing and versioning code with Git.