Host on Github Pages from a private repo: step-by-step guide

Github gives developers a bunch of nice opportunities for free: private repositories, pipelines, free hosting on Github Pages. However, a PRO (paid) account is needed to publish something from a private repo to Github Pages.

But what if you want to have your codebase private, host your website on Github and don’t pay any single penny for it? This article will show how to do it.

Technically, the output code won’t be private, but it won’t contain any artefacts, only the bundle. Let’s go:

1. We need two repositories on Github. The first one should be private and contain the source code, the second one should be public and blank (it will contain the bundled code for publishing).

2. Configure your bundler (Webpack/Parcel/etc.) to generate the output (including index.html) to the /dist/ folder in the root of the private repo. For example, Parcel configuration will look like this (scripts section in package.json):

"scripts": {
  "dev": "parcel index.html -d docs",
  "build": "parcel build index.html -d docs --public-url ."
}

3. Now we need a YAML file, which will build our bundle and push it to the public repository.

Create a pipeline.yml file in the root folder of the private repo and add the following code there:

# run the pipeline on changes in master branch
trigger:
  - master
# build environment - OS
pool:
  vmImage: 'ubuntu-latest'
steps:
  # build environment - Node
  - task: NodeTool@0
    inputs:
      versionSpec: '10.x'
    displayName: 'install node.js'
  # NPM task
  - script: |
      npm install
      npm run build
    displayName: 'npm install and build'
  # Git task
  - script: |
      # remove git history and settings - to avoid inheritance
      rm -rf .git
      # re-initialise git
      git init
      git config user.name "<yourName>"
      git config user.email "<yourEmail>"
      git remote set-url origin https://<githubLogin>:${GIT_TOKEN}@github.com/<githubLogin>/<publicRepositoryName>.git
      # add and commit /docs/ folder
      git add docs
      git commit -m "deploy the bundle"
      # push the commit to the public repository
      git push origin HEAD:master --force
    displayName: 'deploy the production bundle'

Add missing values in pipeline.yml (displayed in bold).

4. You may notice the GIT_TOKEN variable in the script. We need this token (aka PAT — personal access token) in order to authenticate to another Github repository. To obtain the token go to https://github.com/settings/tokens, generate a new token, and copy its value somewhere (you will need in further). During token creation you should provide repo permissions:

I believe SSH authentication is also possible, but let’s go the easier way.

5. Now let’s setup the pipelines for Github. Currently pipelines for Guthub are provided by Microsoft Azure.

Go to: https://github.com/marketplace/azure-pipelines and install Azure Pipelines application for Github (free plan). Grant Azure Pipelines read and write access to your private repository.

Then you will be navigated to Microsoft login page. Login with any existing Microsoft account (for example Skype) or create a new one. Login page will redirect you to Azure DevOps admin-panel.

6. Here we need to create our first pipeline. Press “+” next to your username in the left top corner, and select “New build pipeline”.

Step 1: choose “GitHub”

Step 2: select your private Repo

Step 3: choose “Existing Azure Pipelines YAML file”. In popup set the path to your YAML file (/pipeline.yml) and press “Continue”.

Step 4: run the pipeline and see that it fails, because one small thing is missing.

6. The GIT_TOKEN which we obtained on the step 4, needs to be added to the pipeline variables.

Go to Pipelines > Edit, press on “…” next to the Run button, and select “Variables”. Click “Add”, input “GIT_TOKEN” to the “name” field and paste your token to the “value” field. Do not select “secret” checkbox, otherwise your token won’t be accessible. Save your changes.

Now your pipeline should push the bundled code to the /docs/ folder of the public repository. The result should look like this:

7. The only thing which is left — configure Github Pages. Go to public repository Settings > Github Pages and select “master branch /docs folder” under the “Source” section.

That’s it! Now your website is available at https://<githubLogin>.github.io/<publicRepositoryName>/

Every push to master branch of private repo will trigger the pipeline and update the bundle (aka Continuous deployment).

Thanks for reading, feedback is welcome!