Setting Up and Pushing Your First HTML Project to GitHub
Embarking on your journey as a web developer is an exciting experience. As you dive into coding your first HTML project, it's crucial to familiarize yourself with the process of setting up and pushing your code to GitHub. In this article, I will guide you step by step on how to set up the essential tools and successfully push your HTML project to GitHub, ensuring a seamless workflow and collaboration with other developers.
Step 1: Get Ready with the Tools
To begin, make sure you have the necessary tools installed on your system. Follow these steps:
Visit code.visualstudio.com and download Visual Studio Code (VS Code), a powerful and popular code editor.
Head over to git-scm.com and download and install Git, a version control system that will help you manage your code.
Step 2: Create a GitHub Account
To push your project to GitHub, you need an account.
Visit github.com and sign up for a free account. Provide the required information and create your account.
Step 3: Set Up VS Code and Extensions
Launch Visual Studio Code after installation.
Install the "Live Server" extension, which allows you to preview your HTML project in real-time.
Install the "Prettier" extension, which helps maintain consistent code formatting.
Step 4: Configure VS Code Settings
Open VS Code and navigate to "Settings" -> "Settings" (shortcut: Ctrl + Comma).
Search for "editor default formatter" and choose "Prettier" as the default formatter.
Go to "Settings" -> "Command Palette" (shortcut: Ctrl + Shift + P) and search for "format on save." Check the checkbox labeled "Editor: Format on save."
Step 5: Create and Write Your HTML Project
Open VS Code and create a new folder for your project.
Inside the folder, create a new file called "index.html."
Write this HTML code in the "index.html" file.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <h1>Hello, this is my first project</h1> </body> </html>Right-click on the "index.html" file and select the "Open with Live Server" option to view your project in a browser.
Step 6: Set Up Git and Push Your Project to GitHub
Open the terminal in VS Code by going to "View" -> "Terminal" (shortcut: Ctrl + `).
Run the following commands one by one to initialize Git, configure your user information, and push your project to GitHub:
$ git init
$ git config --global user.email "your_email@example.com" (same email as your GitHub)
$ git config --global user.name "your_name"
$ git add .
$ git commit -m "Initial commit"
$ git branch -M main
$ git remote add origin https://github.com/[github_username]/[folder_name].git
$ git push --set-upstream origin main
A window will pop up asking for your GitHub credentials. Fill in your username and password to authenticate.
Step 7: Streamline Authentication with SSH
To avoid entering your credentials every time you push a new project, you can set up SSH authentication. Follow these steps:
Open the Git Bash terminal.
Run the following commands one by one:
$ ls -al ~/.ssh
$ ssh-keygen -t rsa -b 4096 -C "your_email@example.com" (same email as your GitHub)
$ eval "$(ssh-agent -s)"
$ ssh-add ~/.ssh/id_rsa
$ cat ~/.ssh/id_rsa.pub
Copy the output of the last command.
Log in to your GitHub account and go to "Settings" -> "SSH and GPG keys."
Click on "New SSH key," provide a title, and paste the copied key into the "Key" field.
Save the SSH key.
Congratulations! You have successfully set up the essential tools and pushed your first HTML project to GitHub. By following this step-by-step guide, you have gained the knowledge necessary to streamline your workflow and collaborate effectively with other developers on the GitHub platform. Remember to leverage the power of version control and continue honing your skills as you embark on your web development journey. Happy coding!