Using MAMP Webserver locally with Hugo

If PHP is to be used within Hugo, e.g. for a contact form, MAMP for macOS is one way to realise this. The local server environment allows testing PHP with Hugo as on a web server on the internet.

MAMP GmbH, the manufacturer of the free web development solution with Apache, Nginx, PHP & MySQL for macOS and Windows, does not exactly make it easy for its users to install the free version. Watch out and read exactly what you click on.

The MAMP Pro version 6 currently costs 79 € for macOS in Germany. No discussion, MAMP PRO version 6 is worth its price. There are great features, but for my purpose, the free, stripped-down version is perfectly adequate.

Install MAMP

Downloading the MAMP - Installation - automatically triggers this. The local installation takes place in the Programs directory. However, the installation path can be adjusted.

The manufacturer engages in a game of confusion to direct users towards the paid MAMP Pro version. There is only one icon for the MAMP Pro version in the Programs directory. The MAMP.app is hidden in the Programs/MAMP directory. However, there is also an icon in the launchpad for launching the MAMP version. The icon has a grey background in contrast to the MAMP Pro version with a turquoise background. So always keep an eye on what you click on.

Set up MAMP

The most important thing when setting up MAMP and connecting to Hugo is the root directory. This is configured in the settings under Server.

Clicking on the MAMP icon starts the minimal interface. Here the web server - Apache or Nginx - and the PHP version - 7.4.12 or 8.0.0 - can be set. The cogwheel at the top left opens the settings dialogue. The versions are always renewed by updates.

Under Settings - General - I have enabled “Start server”, “Check for updates” and “Stop server”. “Cache” is off and “Open WebStart page” is only necessary if, for example, you need the supplied phpMyAdmin for the MySQL database. “WebStart” can also be started on the start page of the app.

I have not changed anything with the ports. The Apache port is 8888, the Hugo project is called by localhost:8888 in the browser.

Under Settings - Server - the root directory for the Hugo web pages can be set via the mini-button “Select”. This is the most important setting. I want to save my project locally in the directory /Users/frank/myWeb/mamp-sites/tekki.

Settings - Cloud - the free MAMP version has no cloud access. The display is only an appetiser and is intended to point to the paid version.

Connect Hugo with MAMP

Normally, the content of the public directory is copied to the root directory of the web server via sFTP. In the config.toml, the domain name of the Hugo project is entered in the baseurl parameter.

If this is also done for a local MAMP installation, it will not work. Therefore, in the config.toml the entry must be changed as follows: baseURL = "".

Redirect the public directory of Hugo to the local MAMP directory.

The terminal CLI command hugo in the Hugo project directory creates a new, static version of the Hugo website. By default, this data is made available in the Hugo project/public directory. One could now copy the contents of public into the MAMP root directory after each build. But this is very inconvenient.

I edit and save my Hugo projects in the Apple iCloud. This gives me access to my projects from work, home or on the road, from all devices with access to the iCloud. So far, this has never led to any problems. With this constellation, MAMP must of course be installed in the same path on all devices.

As already described above, my local MAMP root project directory is /Users/frank/myWeb/mamp-sites/tekki. Hugo must now be made to write the files to this directory when creating the static version. This works with the config.toml entry  publishDir = "/Users/frank/myWeb/mamp-sites/tekki".

The following is an extract from my config.toml:

# baseURL = "https://tekki-tipps.de/"
baseURL = ""
publishDir = "/Users/frank/myWeb/mamp-sites/tekki"

MAMP logs

If something is not working, a look at the MAMP logs is sometimes helpful. The logs for Apache, MySQL and PHP are provided in the directory Programs/MAMP/logs.

Clear MAMP

MAMP and also the installed MAMP Pro can be completely deleted from the Programs directory by deleting the Programs/MAMP directory and the app "MAMP PRO.app" from the Programs directory.

Conclusion

If you don’t need PHP for your website, the development environment integrated in Hugo is perfectly sufficient. But if PHP has to be used for some dynamic things, MAMP is a free and working solution. Redirecting with publishDir makes this very convenient.

As soon as the Hugo project is to be published, however, one must remember to set the baseURL parameter back to the domain name. This shouldn’t be a problem, though, because you don’t have to keep screwing around with the PHP code. At some point, this part is finished and you no longer need to start MAMP. The integrated development environment of Hugo still provides everything under localhost:1313.

List of links to this post

This might also interest you