Host a Static HTML Site
on Built-in Apache

# Create the project directory tree
mkdir -p ~/Sites/mysite/css
mkdir -p ~/Sites/mysite/images
mkdir -p ~/Sites/mysite/fonts

# Confirm your username for config files
whoami

# Check the full path
echo ~/Sites/mysite
# Prints: /Users/YOUR_USERNAME/Sites/mysite

# Create homepage
touch ~/Sites/mysite/index.html
touch ~/Sites/mysite/about.html
touch ~/Sites/mysite/contact.html

# Create stylesheet
touch ~/Sites/mysite/css/style.css

# Open folder in Finder to edit in your text editor
open ~/Sites/mysite/

# Or open directly in TextEdit
open -e ~/Sites/mysite/index.html

# Open in your default browser
open http://mysite.test

# Open a specific page
open http://mysite.test/about.html

# Open the CSS file to verify it loads
open http://mysite.test/css/style.css

# Get your Mac's local IP address
ipconfig getifaddr en0
# Example output: 192.168.1.25

# Then on your iPhone, type in Safari:
# http://192.168.1.25
# (The /etc/hosts trick only works on your Mac,
#  so use the IP address for other devices)

# Only needed after editing httpd.conf or httpd-vhosts.conf
sudo apachectl configtest   # test first
sudo apachectl graceful      # then restart

# Editing .html or .css files? Just save and refresh browser.
# No restart needed.

# Apache tries these filenames in order when a directory is requested
DirectoryIndex index.html index.htm

# Show file listing if no index.html (useful during dev)
Options Indexes FollowSymLinks

# Disable listing when site is "finished" (shows 403 instead)
Options -Indexes FollowSymLinks

# Redirect 404 errors to a custom page
ErrorDocument 404 /404.html

# Other useful error pages
ErrorDocument 403 /403.html
ErrorDocument 500 /500.html

# Force UTF-8 for all HTML and CSS files
AddDefaultCharset UTF-8

# Set correct MIME type for CSS (usually automatic, but good to be explicit)
AddType text/css .css
AddType text/html .html .htm

# Hide .htaccess file from browser
<Files .htaccess>
    Require all denied
</Files>

# Prevent access to hidden files (dot files)
<FilesMatch "^\.">
    Require all denied
</FilesMatch>

RewriteEngine On

# If file exists as-is, serve it
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Otherwise try adding .html
RewriteCond %{REQUEST_FILENAME}.html -f
RewriteRule ^(.+)$ $1.html [L]

# Now http://mysite.test/about works the same as /about.html

# Tab 1 — watch requests as they come in
tail -f /private/var/log/apache2/mysite-access.log

# Tab 2 — watch for errors
tail -f /private/var/log/apache2/mysite-error.log

# Check Apache config is valid
sudo apachectl configtest

# See which vhost serves mysite.test
sudo apachectl -t -D DUMP_VHOSTS

# Verify your /etc/hosts entry
grep mysite.test /etc/hosts

# Check file permissions on your site folder
ls -la ~/Sites/mysite/

# Fix permissions if needed (755 for folders, 644 for files)
chmod -R 755 ~/Sites/mysite/
find ~/Sites/mysite -type f -exec chmod 644 {} \;

# Restart Apache after config changes only
sudo apachectl graceful

# Uncomment these in httpd.conf when you're ready for Perl CGI:
LoadModule cgi_module  libexec/apache2/mod_cgi.so
LoadModule cgid_module libexec/apache2/mod_cgid.so

# Add inside your VirtualHost block when ready for Perl:
ScriptAlias /cgi-bin/ "/Users/YOUR_USERNAME/Sites/mysite/cgi-bin/"

<Directory "/Users/YOUR_USERNAME/Sites/mysite/cgi-bin">
    Options       +ExecCGI
    AllowOverride None
    Require       all granted
    AddHandler    cgi-script .pl .cgi
</Directory>

# Perl scripts go in ~/Sites/mysite/cgi-bin/*.pl
# First line of every Perl script must be:
# #!/usr/bin/perl