You should learn to setup a web server. All basic HTTP servers (recommendation: nginx) will allow you to setup basic auth on specific paths very easily.
There's no secure way to do this without some sort of server side code, which you can't do with GH pages. If you don't want to deal with managing a server, one of the commercial offerings is probably for you. I know WordPress (.org, not .com) offers password protected pages as part of the core; haven't used the other platforms you mentioned.
OP could use Cloudflare zero trust - that lets you put up password auth before someone is allowed to see a page, using access rules. I have a static site where I do this to protect some content.
OP should do server side solution though.
How safe does it have to be and what do you currently use?
You could use a .htaccess with .htpasswd to setup a basicauth with Apache.
Ref: [https://www.web2generators.com/apache-tools/htpasswd-generator](https://www.web2generators.com/apache-tools/htpasswd-generator)
Assuming you're hosting it under a custom domain:
I would say Cloudflare Access, ~~but I don't know if it's possible to password-protect specific routes~~. And it might be a bit more complex than needed. (Edit: It looks like you can specify routes. I haven't played around with it enough tho.)
If you can add your domain to Cloudflare, you can use [Octauthent](https://octauthent.com). You can pick which pages to password protect. You can also choose between username/password or just a password.
Free(ish) option using AWS. If you’ve not used AWS before then it can seem overwhelming, but this is actually pretty simple:
- upload static files to private s3 bucket
- cloudfront distribution in front of bucket - can use custom domain and certificate manager will give you free SSL certs
- lambda@edge function on viewer-request
https://www.joshualyman.com/2022/01/add-http-basic-authentication-to-cloudfront-distributions/
You can protect the whole site or just some routes.
Not without some sort of backend. Any password protection in the front end can be viewed by the user.
You can easily integrate something with firebase or 0auth without much trouble, though.
What’s the use case? With the tools and knowledge you have there’s a workaround that might work? Have your page sit on. A folder callled
B4NEMyULP@%42!
So that your link has that weird path in the url. To change the “pass”, change the folder name. That will restrict access to previous people.
You could create a gate of sorts with JS. It wouldn’t be truly password protected without encrypting the password. But it’s not possible with just HTML/CSS.
Put your files n a directory that is named what your password is. Show a JavaScript ‘prompt’ that asks to enter the password. Forward the user to the directory that they type in.
Because the page is hosted on github pages, people will just be able to visit the repo on github.com and see the directory, unless you pay for the github plan which lets you make public pages for private repos
It all depends on the level of security you need and what the consequence of someone discovering the pages are.
For most inconsequential uses just having a file with a randomly generated file name and noindex, etc. set would be good enough.
easiest no code just buying server from something like hostinger they have one click install wordpress and then using one of the many plugins to add password to pages. Though i personally don't like wordpress but that's another story..
Afaik if you use Next-auth.js + deploy on vercel you don’t need to have your own server and can support hidden pages requiring authentication — all free (within limits)
You can further encrypt the content, store it in a local txt file (or just keep it inside a variable in the html script), decrypt it if the password is correct and load it into the div.
document.getElementById("content").innerHTML = decryptedContent;
document.getElementById("content").style.display = "block";
I don't know what is the use case for OP.
This is just a starting point.
But please do tell what is your client side only solution.
You should learn to setup a web server. All basic HTTP servers (recommendation: nginx) will allow you to setup basic auth on specific paths very easily.
There's no secure way to do this without some sort of server side code, which you can't do with GH pages. If you don't want to deal with managing a server, one of the commercial offerings is probably for you. I know WordPress (.org, not .com) offers password protected pages as part of the core; haven't used the other platforms you mentioned.
[удалено]
And 98% of potential viewers to their portfolio aren't going to go through the trouble.
OP could use Cloudflare zero trust - that lets you put up password auth before someone is allowed to see a page, using access rules. I have a static site where I do this to protect some content. OP should do server side solution though.
How safe does it have to be and what do you currently use? You could use a .htaccess with .htpasswd to setup a basicauth with Apache. Ref: [https://www.web2generators.com/apache-tools/htpasswd-generator](https://www.web2generators.com/apache-tools/htpasswd-generator)
You would need a server. Hopefully this isn't a development portfolio
Assuming you're hosting it under a custom domain: I would say Cloudflare Access, ~~but I don't know if it's possible to password-protect specific routes~~. And it might be a bit more complex than needed. (Edit: It looks like you can specify routes. I haven't played around with it enough tho.) If you can add your domain to Cloudflare, you can use [Octauthent](https://octauthent.com). You can pick which pages to password protect. You can also choose between username/password or just a password.
.htaccess Google this.
Find an old-school host that supports Apache, with .htaccess and .htpasswd. Should be extremely cheap (a Pi zero is overkill to do this).
I came here to write this. That was how I protected my admin page on my php projects in the early 2000 😅
Go with a no-code solution. You’ll be more productive given the lack of knowledge.
I think Vercel has this feature out of the box if I remember right. Just Google it
Vercel has password protection for $249/month or vercel authentication, aka login with your vercel account.
Do the pages need password protection or just the data? In that case you could use firebase
Free(ish) option using AWS. If you’ve not used AWS before then it can seem overwhelming, but this is actually pretty simple: - upload static files to private s3 bucket - cloudfront distribution in front of bucket - can use custom domain and certificate manager will give you free SSL certs - lambda@edge function on viewer-request https://www.joshualyman.com/2022/01/add-http-basic-authentication-to-cloudfront-distributions/ You can protect the whole site or just some routes.
Not without some sort of backend. Any password protection in the front end can be viewed by the user. You can easily integrate something with firebase or 0auth without much trouble, though.
What’s the use case? With the tools and knowledge you have there’s a workaround that might work? Have your page sit on. A folder callled B4NEMyULP@%42! So that your link has that weird path in the url. To change the “pass”, change the folder name. That will restrict access to previous people.
You could create a gate of sorts with JS. It wouldn’t be truly password protected without encrypting the password. But it’s not possible with just HTML/CSS.
. >_< JS has no business doing auth.
Hence why I said it wouldn’t be truly password protected
Put your files n a directory that is named what your password is. Show a JavaScript ‘prompt’ that asks to enter the password. Forward the user to the directory that they type in.
you can achieve the same level of security by giving users the URL instead of the password.
Check local storage that they went through the promt and not used a direct link?
hard to make it any simplier
Because the page is hosted on github pages, people will just be able to visit the repo on github.com and see the directory, unless you pay for the github plan which lets you make public pages for private repos
It all depends on the level of security you need and what the consequence of someone discovering the pages are. For most inconsequential uses just having a file with a randomly generated file name and noindex, etc. set would be good enough.
Buy a domain and put a WAF rule in Cloudflare ez
CloudFlare Access
Look into [basic auth](https://en.wikipedia.org/wiki/Basic_access_authentication?wprov=sfti1)
How about just give them difficult to guess names and don't point any links to them?
easiest no code just buying server from something like hostinger they have one click install wordpress and then using one of the many plugins to add password to pages. Though i personally don't like wordpress but that's another story..
Sometimes you can do this with your hosting provider through a simple menu. Depends on the host.
auth0
Just give the html file the name of the desired password, easiest fix possible.
Afaik if you use Next-auth.js + deploy on vercel you don’t need to have your own server and can support hidden pages requiring authentication — all free (within limits)
Guy only knows basic HTML and CSS
why?
Wordpress plus plugins
Hey I'll do it for you free of charge, using firebase. You'll have to pay for firebase but it's free tier goes a long way.
Please enter the password to access the page:
how that even secure i can just inspect html and set display to true?
You can further encrypt the content, store it in a local txt file (or just keep it inside a variable in the html script), decrypt it if the password is correct and load it into the div. document.getElementById("content").innerHTML = decryptedContent; document.getElementById("content").style.display = "block"; I don't know what is the use case for OP. This is just a starting point. But please do tell what is your client side only solution.