How do I protect a directory within github-pages?

Question

I am building my personal website using Jekyll and hosting it at github-pages. I would like to have a password protected area (just password protected directory, not the whole website). I have tried a few options and tricks to get htaccess to work but failed.

I would like to know if someone managed to use htaccess, or any other method, to protect a directory on github-pages.

Listing solutions which did not work for me (or I failed to get them to work):
*Flohei.
*Jeremy Ricketts.

Answer 1

GitHubPages (like Bitbucket Pages and GitLab Pages) only serve static pages, so the only solution is something client side (Javascript).

A solution could be, instead of using real authentication, just to share only a secret (password) with all the authorized persons and implement one of the following scheme:

1. put all the private files in a (not listed) subdirectory and name that with the hash of the chosen password. The index page asks you (with Javascript) for the password and build the correct start link calculating the hash.

   See for example: https://github.com/matteobrusa/Password-protection-for-static-pages

   PRO: Very simple approach protecting a whole subdirectory tree

   CONS:

   • possible attack: sniffing the following requests to obtain the name of the subdirectory
   • the admins on the hosting site have access to the full contents

2. crypt the page with password and decrypt on the fly with javascript

   see for example: https://github.com/robinmoisson/staticrypt

   PRO: no plaintext page code around (decrypting happens on the client side)

   CONS:

   • just a single page, and need to reinsert the password on every refresh
   • an admin could change your Javascript code to obtain the password when you insert it

Answer 2

You can give a try to Jekyll Auth and if you run into troubles, this issue can be useful.

Answer 3

One option is to use Cloudflare Access to control access at the DNS level. After setting up a custom domain for your Git pages using Cloudflare for DNS, you can use their Access rules policy to require authentication at the specified url path.

This could still be bypassed if someone is familiar with bypassing DNS blocks.

https://www.cloudflare.com/products/cloudflare-access/

Answer 4

I know this is an old post, but someone stumbling upon it might find this solution easy and useful.

If you have a index.html landing page in your folder from which you direct to other sub-directories, and want to password protect subdirectories, you can include the following password function at the top of your html code, and use it throughout with your links:

<script>
function password() {
  var testV = 1;
  var pass1 = prompt('Enter Your Password', ' ');
  while (testV < 3) {
    if (!pass1)
      history.go(-1);
    if (pass1.toLowerCase() == "Guest") {
      alert('Password Correct');
      window.open("Yournextpage.html");
      break;
    }
    testV += 1;
    var pass1 =
      prompt('Access Denied - Password Incorrect, Please Try Again.', 'Password');
  }
  if (pass1.toLowerCase() != "password" & testV == 3)
    history.go(-1);
  return " ";
}
</script>

Just change the Guest password and which html to open to. You can then use this as follows in your index.html:

<input type="button" class="btn btn-default btn-lg" value="Log In" onClick="passWord()">

You can specify the class to "text", e.g., too.