How to host multiple local websites with macOS Big Sur

Running websites on your Mac is a useful feature, even for non-developers. There are tonnes of web-based open source tools and apps you can run locally for convenience, avoid connectivity issues or negate your privacy concerns. For example, if you run D&D games you can run local copies of apps like Azgaar’s Fantasy Generator, or Autoroll Tables etc. I’ve also made simple HTML/JavaScript utilities that serve and randomise card decks and dungeon tiles I’ve bought from vendors such as DM’s Guild. Best of all, you can build and host static sites like my World Codex, enabling you to world-build in privacy without coughing up money to World Anvil for months or years.

macOS has Apache2 built-in by default. To run a static HTML/Javascript-based website you only need Apache, while running something like MediaWiki requires PHP and a database. In this tutorial, I’ll use static sites only since the version of PHP (and PHP extensions) provided by Apple aren’t compatible with many modern and complex PHP apps. To run PHP apps, I bypass Apple’s provided PHP libraries and install and manage PHP using brew.sh, which is beyond the scope of this tutorial.

Static websites

Start by creating a folder for websites in our home directory. You can call it anything you like; I named mine Sites so macOS decorates it with a small icon denoting it contains websites. Use this folder to store all our websites, with each residing in its sub-folder.

For the purposes of this tutorial, I’ll download and run AutoRoll Tables and Azgaar’s Fantasy Map generator. Since the source files of these projects are hosted on GitHub, I’ll use Git in the macOS terminal (Applications -> Utilities -> Terminal) to clone both repositories to my Sites folder.

Run each command one line at a time, pressing Return/Enter for each.

$ cd ~/Sites $ git clone https://github.com/autorolltables/autorolltables.github.io.git
$ git clone https://github.com/Azgaar/Fantasy-Map-Generator.git

If this is the first time you’ve run Git, your Mac may prompt you to install Apple’s command line developer tools. If so, follow the prompts to install the tools, then re-run the commands.

Git will reach out to GitHub and clone both repositories into two new directories in your Sites folder.

Next, we want to change the permissions of the folders to allow the everyone user group to have Read access. Without this change, Apache cannot access these folders and the files they contain.

In Finder, open the Sites folder, right-click one of the directories and select Get Info.

Ensure the everyone group has Read-only access.

Unlock the settings lock and enter your password when prompted.

In the settings drop-down, click Apply to enclosed items. Click OK when prompted to change these permissions.

Repeat this for the other repository you downloaded.

Now it’s time to enable the sites in Apache.

In the Terminal, navigate to Apache’s configuration directory.

$ cd /etc/apache2/other

This directory contains Apache’s configuration files (*.conf) for one or more virtual sites. You need to create a new file for each local site you want to host. To do so, use the Terminal-based text editor Nano, however, because this is a system folder, we’ll need to use the sudo command as we need to temporarily invoke administrator privileges.

$ sudo nano autoroll.conf

Enter your password when prompted and press Enter to continue.

In the nano window, enter the following text, obviously changing the path to reflect your /Users/your-user-name/.

<VirtualHost *:80>
    DirectoryIndex index.html 
    DocumentRoot "/Users/chris/Sites/autorolltables.github.io"
    ServerName autoroll.local 
    <Directory "/Users/chris/Sites/autorolltables.github.io">
        Require all granted 
    </Directory> 
</VirtualHost>

Press CtrO to write your changes, and CtrX to exit.

Repeat this step for the other sites you want to host, ensuring you add the correct path to your DocumentRoot and give your ServerName a unique name.local entry.

With our configuration entries in place, we need to start (or restart) Apache.

$ sudo apache2ctl start

Finally, we need to point our new virtual sites to localhost. In the Termina, use Nano to edit your Mac’s hosts file.

$ sudo nano /etc/hosts

Find the line containing the text 127.0.0.1 localhost and add the server names you specified in your Apache configuration files. For example:

127.0.0.1 localhost autoroll.local

Press CtrO to write your changes, and CtrX to exit.

Now you should be able to visit http://sitename.local (for example, http://autoroll.local) in your browser and access the app.

Originally published at https://chrisrosser.net on August 11, 2021.