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:
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:
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:
Then name your new remote "origin" and paste your 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: Commitcommand 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.
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").
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 initial
<meta charset="utf8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<h1>Hello awesome dev</h1>
<p>Welcome to your new HTML project, at SourceLair.</p>
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.
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
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].