Password protect Website via htaccess

Sometimes you don’t want to habe your site visible to public. One way of managing that is to use settings in the .htaccess file.

1. Create the .htpasswd file

import { codeToTokens } from 'shiki'

const { tokens } = await codeToTokens('<div class="foo">bar</div>', {
  lang: 'html',
  theme: 'min-dark'
})

a) For the entire website

cd ~/example.com

b) or just a subdirectory

cd ~/example.com/members

Check your full path to the domain or subdirectory:

//astro.config.mjs
pwd /home/username/example.com 

Create the actual .htpasswd file with access for guest1

//astro.config.mjs
htpasswd -c /home/username/example.com/.htpasswd guest1

q) The htpasswd process will ask for a password, enter and confirm it. It will look like that:

//astro.config.mjs
guest1:$apr1$bkS4zPQl$SyGLA9oP75L5uM5GHpe9A2

b) confirm or correct the permission to 644

//astro.config.mjs
chmod 644 .htpasswd

Create or modify the .htaccess file

//astro.config.mjs
The .htaccess and .htpasswd files need to be in the same directory

a) Entire Website

//astro.config.mjs
#Protect Directory
AuthName "Dialog prompt"
AuthType Basic
AuthUserFile /home/username/example.com/.htpasswd
Require valid-user

b) a single file

//astro.config.mjs
#Protect single file
<Files admin.php>
AuthName "Dialog prompt"
AuthType Basic
AuthUserFile /home/username/example.com/.htpasswd
Require valid-user
</Files>

c) Multiple files

//astro.config.mjs
#Protect multiple files
<FilesMatch "^(admin|staff).php$">
AuthName "Dialog prompt"
AuthType Basic
AuthUserFile /home/username/example.com/.htpasswd
Require valid-user
</FilesMatch>