Netlify Free Password Protection

package.json

{
...,
"scripts": {
		"start": "gatsby develop -p 1234 -H 0.0.0.0",
		"publish": "npm run _clean && npm run _build && npm run _encrypt && npm run _envDeploy",
		"//": "========= PRIVATE SCRIPTS =========",
		"_clean": "gatsby clean",
		"_build": "gatsby build",
		"_encrypt": "npx staticrypt public/index.html P@55W0RD -o public/index.html",
		"_deploy": "npx netlify-cli deploy --dir=public --prod",
		"_envDeploy": "NETLIFY_SITE_ID=abc-defg-hijk-lmnop NETLIFY_AUTH_TOKEN=abcdefg0123456789 bash -c 'npm run _deploy'"
	},
...,
}
  

You can follow the instructions here!

https://medium.com/@j0hnm4r5/password-protecting-a-website-with-the-free-tier-of-netlify-and-publishing-with-a-single-npm-e509af9f108f

That article is actually how I found out about this, but there aren't any actual clear instructions on how to implement this in the Medium article, all it does is list the scripts and say what the different parts do. It does not give instructions on where to put the code in my project to be able to implement this in my project.

Are you experienced with Node.js development? Those scripts go into the package.json and are pretty much plug-and-play if you’re using Gatsby.

If you aren’t, you’ll have to do some work figuring out how to refactor the code for your use case. Take each part of the scripts apart piece by piece (particularly the parts around staticrypt and Netlify deployments) and figure out how they all work, then put them back together for your project.

Hi,

I am using the following Gatsby template https://jamtemplates.com/templates/gatsby-yellowcake and Deployed it to netlify via a private Gitlab repository.

I am using the following tutorial https://medium.com/@j0hnm4r5/password-protecting-a-website-with-the-free-tier-of-netlify-and-publishing-with-a-single-npm-e509af9f108f to password protect a single file public/index.html

and it works great.

What I did was I replace whatever was in my package.json "scripts": { by what the tutorial mentions.

Then I changed my netlify.toml command to command = "npm run publish"

and under https://app.netlify.com/sites/elements-development/settings/deploys I also changed the build command to npm publish

However, how can I password protect each individual page / the whole website please?

Kind regards,

888

Cool! So, in theory, I should be able to do this with a VueJS site?

For those not using Gatsby.

The way it works is you provide your html file, run staticrypt on it and get a new html file with password prompt and encrypted content from the original html you provided.

This essentialy means you just need to run this command: npx staticrypt path-to-your-file/your-file.html -p <your-password>

In default it will create the new file in a folder named encrypted and this is the file you will want to host on netlify or any other platform.

You can find more info plus other command options here: https://www.npmjs.com/package/staticrypt

Wish you all the best!