Deploy to GitHub Pages:

    Introduction

    This guide is going to help you publish your static page at GitHub pages and create a frictionless workflow every time you want to update it.

    This guide assumes that you already have:

    Connect with GitHub

    Users who have signed up/in with GitHub or have connected their account with GitHub, they can move to Start an HTML project.

    First of all, you need to create a connection between your SourceLair and your GitHub account . In order to connect your SourceLair account with GitHub:

    • Go to your "Account settings", on the top left corner of the SourceLair UI
    • Go to "Integration" sections
    • Connect with GitHub

    Start an HTML project

    GitHub Pages is a static site hosting service. This means that you are able to host there only static websites (websites without back-end functionality).

    HTML project type is ideal for developing static websites as it provides you with a browsersync web server that updates your website in real-time when you change a file.

    Let's create a new project choosing the HTML project type option:

    HTML option in project creation

    Create a new remote - GitHub

    Now you need to create a repository in GitHub to send there your code. You can do this visiting www.github.com/new and filling-in your "Repository name". Then, copy the SSH URL for later usage:

    Repository's SSH URL in GitHub

    Your GitHub repository is ready, let's go to SourceLair and add this repo as your remote. To do so you need to open the Command Palette (Ctrl + Shift + P or Cmd for Mac) and run the Source Control: Add new remote command:

    Command Palette command "Source Control: Add new remote"

    Then name your new remote "origin" and paste your SSH URL:

    Add new remote modal with "origin" and SSH URL

    That's it! Your GitHub repo is ready to welcome your code from SourceLair.

    Push to GitHub Pages

    In case you have uncommitted changes in your code, you need to commit them using the Source Control: Commit command from Command Palette (Ctrl + Shift + P or Cmd for Mac).

    There are many ways to deploy your code at GitHub pages, we are going to use the gh-pages branch. Using the Command Palette command Source Control: Create new branch, create a new branch and call it gh-pages. This naming is necessary in order to make your Github page work.

    Command Palette command create new branch

    Using again Command Palette, run the Source Control: Pushin order to push your code to GitHub and create your 1st GitHub page.

    That's all, now go to check: https://username.github.io/repository and you will see your SourceLair project publicly available to anyone. Don't forget to replace usernamewith your username at GitHub and repository with your repository's name (in our example it was "my-static-website").

    Workflow

    Now, every time you want to make a change on your website all you have to do, after making the change, is committing and pushing your code. As you have just experienced doing these Git commands using Command Palette is the easiest possible way.

    Let's make an example. Let's change "Hello" to "Hello awesome dev" in our initialindex.html:

    <!doctype html>
<html>
    <head>
        <meta charset="utf8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="main.css" />
    </head>
    <body>
        <h1>Hello awesome dev</h1>
        <p>Welcome to your new HTML project, at SourceLair.</p>
    </body>
</html>

    You can see the result of your new change in SourceLair opening your Public URL. That's very important in order to test your website before you deploy it to GitHub pages.

    Now commit and push using the corresponding Command Palette commands.

    Then go to https://username.github.io/repository and you will see that your new code is public again!

    So your workflow will be something like:

    • ✍️ Make a change
    • 👌 Test it in your public URL
    • ✓ Commit
    • 🚀 Push

    Next steps

    You have created a great workflow for your static page which is hosted in GitHub pages. GitHub Pages also lets you do some more great things like using custom URLs.

    You can read more about GitHub pages in the official page.

    If you need any help, we will be glad to help at [email protected].

    Previous step
    Step of
    Next step