Password protection in static sites

Hi there!:wave:t4:

I’m wondering if it would be possible to protect some pages (for example work detail pages from the 11ty course website) with a password?

Have found this but it’s very easy to bypass the protection

I’m a designer and my knowledge in front-end development is really scarce but I’m trying to build my own portfolio website and would be awesome to have the ability to protect some work projects with a password. Any tips?

1 Like

I’ve seen this one work well. Have you tried that one?

Nop! Will give it a try, thanks!

1 Like

Hummn, unfortunately, couldn’t figure this out. Don’t know if the start-eleventy-from-scratch folder structure suits this approach, have tried directly in the dist folder and couldn’t make it work. Do you (or others) have any more tips? :thinking:

Any thought on this Andy? How would be possible to protect with a password some item works from

If your hosting your site on Netlify, they have a password protection system available on their Pro plan.

This would allow you to create public pages and private pages that you can set passwords for.

I haven’t used this so I’m somewhat guessing but seems to me like the key thing is setting the permalink to the password hash. If you use javascript frontmatter you could do something along these lines:

  title: "Work Title",
  permalink: function() {
    const sha1 = require('sha1')
    const password = 'YOUR_PASSWORD_HERE'
    return sha1(password)
Rest of template body

You could then include the relevant HTML and CSS from that repo to create a log in page.

1 Like

Hey @accudio,

That’s my repo you posted and you’re right, it’s not a secure method at all and more of a deterrent. It fit a use case for me years ago but I think it’s still valid as long as the dev knows it’s limits and how easy it is to bypass.

That being said, for the simplest secure password protection I think you’d be better off using some form of Basic Auth.

If you’re using Netlify their entry level paid tier offers this:

I can’t recommend Netlify enough :slight_smile:

Best of luck!

1 Like

Just popping in to say with netlify you can have a _headers file and only target certain urls with rules, so it’s very possible to do basic auth like that :+1: