JWS Docs / Set up GitHub Pages

Set up GitHub Pages

Now we are going to configure hosting with GitHub Pages for our website.

GitHub Pages allows you to host a website directly from your GitHub repository for free.

This will enable a URL (Uniform Resource Locator) for our website that we can share with others, so they can view our website too.

The URL will be [user name].github.io/[repository name] or [organization name].github.io/[repository name]

So if the username is jasminedesign and the repository name is jwsone-example the URL would be

https://jasminedesign.github.io/jwsone-example/

Please Note that GitHub Pages set out limitations on what you can host with them e.g e-commerce & commercial use, for full details please read their docs Prohibited Uses.

Prehosting

To make our website run on Github Pages we will need to make some minor adjustments to our links and paths by prefixing them with your repository name as follows:

• CSS - /yourrepositoryname/css/style.css
• Image Paths - /yourrepositoryname/images/myphoto.jpg
• Nav Link (Home page) - /yourrepositoryname/about/
• Nav Link (About page & other additional pages) - /yourrepositoryname/ to go back to the home page and this pattern for all other pages /yourrepositoryname/about/

Set up hosting

At your GitHub repository page click on Settings

On the left handside menu look for and click on Pages This will take you to a page with the title of "GitHub Pages"

Under the heading "Build and deployment" you will see "source"

From the pull down menu "deploy from a branch" select GitHub Actions

In the "Static HTML" box click on the Configure button

We can use all of the provided defaults for this website at this time

Click the green Start Commit button and enter a commit message. I used "Created yaml file for hosting" and then selected the checkbox "Commit directly to the main branch" option

Now click green Commit new file

This then takes us back to our repository

We now need to click again on Settings then Pages This time we see a new section added which tells us "Your site is live at..." and gives us a url

If when you look closely at the url it starts with http:// instead of https:// your users will see a "not secure" warning in their browsers so you will have to follow Enforce HTTPS steps to make sure your site is secure. If the secure setting is already enabled then proceed to View your Live Site

Enforce HTTPS

To change this look down the "GitHub Pages" page and you will see a checkbox labelled "Enforce HTTPS" click in the checkbox

Then you will see a green ✓ appear once it has enabled HTTPS

Now from the left hand menu click Codespaces, when that page has loaded click again on Pages to take you back

We've done this to force the page to refresh. So this time you will see Your site is live at https://....

View your Live site

We can now click the link https://....... and take a look at your website. Congratulations you have now built and set-up hosting for your website

If you have been following along and made a Home and About page with navigation you can now see the page links working

404 Page

As part of the JWS website starter template we gave you a 404.html page. This page will be called when the web server can not find a file to serve for a page request.

To enable us to test and see this page we can do the following:

At the end of your url in the browser address bar type me after the last / and then press enter

You will see the custom error page which GitHub Pages has picked up and configured automatically for you

Oh it looks like we still have a little bit more work to do as this error page needs updating with your info. But don't worry we are going to cover that next with Lets make an edit.

This concludes the adding hosting section well done on your new website!!!

Custom Domain Name

We have written about domains which you will find in the docs under Domain Names. However we have not written about adding a custom domain name to GitHub pages as we heard from our feedback that their docs cover it really clearly. You will find the details at about custom domains and GitHub Pages this will also be linked from our docs page GitHub Pages.

Unpublishing a Site

You can also remove your website permently from GitHub pages so it is no longer available. Though don't worry this will not affect your existing repository settings or content.

At your GitHub repository page click on Settings

Then on the left hand side menu click on Pages

Next to the "Your site is live at...." message, click the three dots icon ...

Lastly click on Unpublish Site in the box that appears

Your website is now no longer available

Every GitHub account has a default URL assigned to it which follows the pattern of [user name].github.io/ or [organization name].github.io/ to make use of this URL you need to create a repository called [user name].github.io or [organization name].github.io and turn Pages on in the settings. Our tutorial is publishing as a folder of this default.