DEV Community

MuthuKumar
MuthuKumar

Posted on • Updated on

Visual Studio Code (VSCode) and then commit it to a GitHub repository

#vscode #html #github

To commit HTML code to a GitHub repository using Visual Studio Code (VSCode), follow these steps:

  1. Install Git: Make sure Git is installed on your system. You can download it from Git's official website and follow the installation instructions.

  2. Set up Git in VSCode:

    • Open VSCode and open your project folder.
    • Press Ctrl + Shift + P (or Cmd + Shift + P on macOS) to open the Command Palette.
    • Type "Git: Initialize Repository" and select your project folder to initialize Git.

  3. Create a new GitHub repository:

    • Go to GitHub and log in to your account.
    • Click on the "+" icon in the top-right corner and select "New repository."
    • Follow the instructions to create a new repository on GitHub.

  4. Link the local repository to GitHub:

    • In VSCode, open the terminal by pressing Ctrl + ` (backtick) or navigating to View > Terminal in the top menu.
    • Use the following commands to link your local repository to the GitHub repository you created: 
   git remote add origin <repository_url>
Enter fullscreen mode Exit fullscreen mode

Replace <repository_url> with the URL of your GitHub repository.

  1. Add and commit HTML files:

    • In VSCode, navigate to the Source Control view by clicking on the source control icon in the left sidebar (or press Ctrl + Shift + G).
    • You'll see a list of changed files. Stage the HTML files you want to commit by clicking the + button next to the file names.
    • Enter a commit message in the text box at the top of the Source Control view to describe the changes you made.
    • Click the checkmark icon to commit the changes.

  2. Push changes to GitHub:

    • After committing the changes, click on the ellipsis (...) icon in the Source Control view and select "Push."
    • This action will push your committed changes to the GitHub repository.

Remember, these instructions assume you've set up a GitHub repository and have the necessary permissions to push changes to it. If you encounter any authentication issues during the push, make sure your GitHub credentials are correctly configured in Git or that you've set up SSH keys for GitHub authentication.

Step 1: Set up Git and GitHub

  1. Install Git: Download and install Git from Git's official website.

  2. Create a GitHub repository: Go to GitHub and log in to your account. Create a new repository by clicking the "+" icon in the top-right corner and selecting "New repository."

Step 2: Create an index.html file

  1. Open Visual Studio Code.
  2. Click on File in the top-left corner, select Open Folder..., and choose or create a new folder for your project.

Step 3: Create and code the index.html file

  1. In VSCode, right-click on the folder you created and select New File. Name the file index.html.
  2. Add HTML code to the index.html file. For example: 
<!DOCTYPE html>
<html>
<head>
  <title>My First Web Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a simple HTML page.</p>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 4: Initialize Git repository and commit changes

  1. Open the integrated terminal in VSCode by going to Terminal > New Terminal.

  2. Initialize Git in your project folder by typing the following command in the terminal:

git init
Enter fullscreen mode Exit fullscreen mode
  1. Add the index.html file to the staging area by typing: 
git add index.html
Enter fullscreen mode Exit fullscreen mode
  1. Commit the changes with a descriptive message: 
git commit -m "Add index.html file with basic HTML structure"
Enter fullscreen mode Exit fullscreen mode

Step 5: Link local repository to GitHub

  1. Go to your GitHub repository and copy the repository URL (ending in .git).

  2. In the terminal, link your local repository to the GitHub repository by running the following command:

git remote add origin <repository_url>
Enter fullscreen mode Exit fullscreen mode

Replace <repository_url> with the URL you copied from GitHub.

Step 6: Push changes to GitHub

  1. Finally, push your committed changes to GitHub: 
git push -u origin main
Enter fullscreen mode Exit fullscreen mode

This command pushes your changes from the local main branch to the main branch on GitHub.

After completing these steps, your index.html file will be committed and pushed to your GitHub repository. You can verify the changes by visiting your GitHub repository in a web browser

Author:
Muthukumar.K

Top comments (0)

Read next

ayoubkhan558 profile image

Implementing Very Basic Dark/Light Modes with CSS Variables and JavaScript 🌓

Muhammad Ayoub Khan -

lico profile image

Handling 404 Error in SPA Deployed on GitHub Pages

SeongKuk Han -

princessaisha profile image

HOW CSS WORKS BEHIND THE SCENE

PrincessAisha -

whitep4nth3r profile image

5 easy tips to improve your personal website performance

Salma Alam-Naylor -