Hosting my static website(s) with Github Pages

a good option for hosting for free.

Github offers free hosting of static websites - and it's very easy, if you have some experience with Github (ie managing repos).

Basically all you need is a public repo with a website's folder structure within it, and Github Pages will take care of the deployment.

The only important thing to know is that your repo name needs to end with .github.io - this is the trigger for Github to recognise it as a Github Pages repo.

github-pages/github-pages-settings.jpg

Default is Deploy from a branch - you can change this to GitHub Actions.

github-pages/github-pages-settings-source.jpg

Each commit will trigger a Github Actions that will take a few minutes. Your website is Live therafter.

Custom domain can be assigned to your website at no extra cost too, assuming you own the domain already.

GitHub Pages | Websites for you and your projects, hosted directly from your GitHub repository. Just edit, push, and your changes are live.
Websites for you and your projects.
https://pages.github.com/

github-pages.jpg

Currently hosting with Github Pages:

Github Pages is powered by Jekyll under the hood:

Jekyll • Simple, blog-aware, static sites | Transform your plain text into static websites and blogs
jekyllrb.com
https://jekyllrb.com/

Github's documentation

The Github documentation is well written and very helpful.

eg:

Configuring a custom domain for your GitHub Pages site
github.com
https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site

Reset a repo

To delete old pages, etc...

  • optional (because generated anyway): backup the local folder
  • delete all local files, except invisible ones (eg .gitignore)
  • git add .
  • git commit -m "reset"
  • git push -f

source: https://stackoverflow.com/questions/31608203/how-to-delete-the-content-of-github-repository

301 redirects

Usually done in .htaccess but adding eg.: 

# BEGIN 301 Redirects

redirect 301 /recruiters-directory https://btobsales.eu/resources/directory-recruiters
redirect 301 /vc-directory https://btobsales.eu/resources/directory-vcs

# END 301 Redirects

however, Github Pages does not allow to change the .htaccess file - tried adding it to the repo to no avail, and confirmed on Stackoverflow.

Workaround: keep the page live with a redirect as follows: 

<!DOCTYPE html>
<html>
<head>
<link rel="canonical" href="https://btobsales.eu/resources/directory-recruiters"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="refresh" content="0;url=https://btobsales.eu/resources/directory-recruiters" />
</head>
<body>
    <h1>Redirecting...</h1>
        <a href="https://btobsales.eu/resources/directory-recruiters">Click here if you are not redirected.<a>
        <script>location='https://btobsales.eu/resources/directory-recruiters'</script>
</body>
</html>

Other resources

Some that have helped me:

How to Host a Static Website on Github for Free
medium.com
https://medium.com/any-writers/how-to-host-a-static-website-on-github-for-free-f47b12790775

Deployment

Deployment process time has ballooned up for me to 5-10mns - this is with 700+ pages & includes large folders like /media and /images.

Bloated .git folder

16 Mar 2023

My local git repo (.git) is now 1.3Gb (!) despite the fact that the folder's content is less than 500Mb.

I need to optimise the /images folder with either:

  • optimising images within !projects/imagee
  • using a CDN for images

But other than that, I need to optimise the .git folder. Options:

  1. Use Git Large File Storage (Git LFS)
    If you have large binary files in your repository, you can use Git LFS to manage them separately. This will reduce the size of your .git folder. To install and set up Git LFS, see the documentation on the Git LFS website.

  2. Remove unnecessary files
    If there are any files in your repository that you don't need, you can remove them using the git rm command. This will remove the files from the repository and reduce the size of your .git folder. Remember to commit the changes after removing the files.

  3. Use Git's built-in garbage collection
    Git has a built-in garbage collection mechanism that can help you clean up unnecessary files and optimize the repository. To run garbage collection, use the git gc command. This may take some time to complete, especially if your repository is large.

Navigate to project's root folder in Terminal (ie one folder above .git folder) and run:

git gc should be sufficient, else nuclear option: git gc --aggressive --prune=now.

  1. Remove old or unnecessary commits
    If you have a lot of old or unnecessary commits in your repository, you can use Git's rebase or filter-branch commands to remove them. This can help reduce the size of your .git folder, but be careful as it will rewrite your repository's history.

  2. Clone a fresh copy of your repository
    If all else fails, you can clone a fresh copy of your repository and start fresh. This will give you a clean .git folder without any unnecessary files or commits. However, be aware that you will lose all local changes and history when you do this.

Might go with 5. 😁

24 Mar 2023

tests

Setting up a repo from scratch with only the .html files & basic folders (no media & images).

40Mb repo = 1m48s to deploy.

github-pages/230324-ghp-deploy-test-1.jpg

Changing only 1 .html file in repo = 1m11s to deploy.

github-pages/230324-ghp-deploy-test-2.jpg

exploring Netlify as alternative

!helpers/netlify

26 Mar 2023

For now, ended up staying on Github Pages, but moving out of it and to ImageKit all images, PDFs & media files.

!helpers/imagekit

github-pages/230326-2217-notes-deploy.jpg

Down to 1m44s to deploy vs. 5-6mns+ before.

😁

I can live with that (for now)...

links

social