Progress: 0%
What is GitHub Pages?

GitHub Pages is a free service provided by GitHub that allows you to host static websites directly from a GitHub repository. It's perfect for project documentation, portfolios, and personal websites. Once your site is published, it can be accessed through a unique GitHub URL — no extra hosting setup required!

GitHub Pages
What is Visual Studio Code?

Visual Studio Code (VSCode) is a free, open-source code editor developed by Microsoft. It's lightweight, highly customizable, and supports many programming languages. It includes powerful features like syntax highlighting, debugging tools, Git integration, and extensions.

Even better: you can use VSCode in your browser by visiting vscode.dev — no installation required!

VSCode
First Steps: Start Your Own Site

1. Click the link below to open the starter repository: 🔗 Open Coding Society Student Repository

2. On the GitHub page, click the green "Use this template" button.

Use Template Button

3. Select "Create a new repository".

4. Follow onscreen instruction. Name it student .

New Repo Page

✅ Validate Step 1

Enter your GitHub username to check if you created the repository:

Next Steps: Edit Your Site in the online VSCode editor.

Now that you've created your own copy of the site:

  • Open a new browser tab.
  • Type the following URL, and please remember to replace the placeholders:

    • 1. YOUR_GITHUB_USERNAME

    2. YOUR_REPOSITORY_USERNAME

    vscode.dev/github/YOUR_GITHUB_USERNAME/YOUR_REPOSITORY_NAME

    You can write and edit your HTML, CSS, and JavaScript files directly in your browser.

    For example, to edit the main page, open index.md in the file explorer on the left side.

    3. Click on the file to open it.

    4. Make changes to the content. For example, you can change the text in the file near the top to be your first name.

    Try replacing [Your full name] with your name.

    vscode.dev Website

    Now you need to edit config.yml

    1. Open _config.yml

    2. Change owner_name to your full name

    3. Change github_username to your github username

    Edit config.yml

    ✅ Validate Step 2

    Once you've made changes to your files in VSCode, click the button below:

    Next Steps: Save and push your changes onto your website.

    1. Now that you've finished making your changes to your site:

    2. Click the Source Control icon on the left sidebar (it looks like a branch).

    You should see your changes listed under Changes.

    3. Type a commit message in the input box at the top, like "Update index.md with my name".

    4. Click the button which says "commit and push" your changes.

    Commit changes

    ✅ Validate Step 3

    Once you've committed and pushed your changes, click the button below:

    Publish with GitHub Pages

    Once you've made changes to your site:

    Go to your repository on GitHub.

    1. Click Settings > Pages.

    2. Under Source, choose your main branch instead of none

    3. Click Save.

    After a moment, your website will be live at:

    your_github_username.github.io/student/

    4. Click "Visit site" to see your changes live!

    Change GitHub Pages Build

    ✅ Validate Step 4

    Enter your GitHub Pages URL to verify your website is live:

    Summary
    • GitHub Pages hosts your static website — no server required.
    • VSCode in the browser lets you code anytime, anywhere.
    • For this basic way, all you need is a GitHub account and a browser — no installations!