Wordpress and domain

6 min readNov 5, 2020

How to setup Wordpress with Nginx + GasMask for domain

Wordpress and some its plugins use full URLs for their links, so when you try to move the Wordpress site that you developed on your Mac to a live server with its real domain, there are many broken links. There are many ways to fix these kind of errors.

To avoid these kind of troubles I am using Gas Mask to write the live domain at “hosts” file on my MacBook. It is not work with SSL(https) of course. However, it makes me easy to develop Wordpress site with out URL stress.

First, if you are not familiar with DNS server, then you need to understand its mechanism.

When computer networks were developed, there were only digit numbers called IP address to distinguish computers on networks. The digit numbers, IP address, are hard to remember for human. So, network developers create a service called Domain Name Service, DNS, that human readable and memorable and the system was spread world wide. The domain server’s basic concept is very simple. When network users ask IP address of a domain name to a DNS server, it returns the real IP address from records to the users and web browser will point out the IP address.

Ok, let’s talk how it works in my computer.

All computers have their own domain name. All OSs save the domain name in the “hosts” file. So, when you type a domain name, your computer will look around the hosts file first because if the domain names are owned by itself, you don’t need to search the domain in other DNS server.

In the reason, if you put a domain name in the “hosts” file, your computer will wait a response from your computer. Let’s look the “hosts” file,

$ cd /etc/
$ cat hosts
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1             localhost

It means your internal IP address is “127.0.0.1” and the domain name if “localhost”. It’s a promise. Every computers have 127.0.0.1 and localhost for it own IP and domain. “::1” is a new IP address rule called IPv6. I don’t touch the IPv6. I will talk only IPv4. There is a “broadcasthost” IP, 255.255.255.255. Simply, it’s a definition of IP range. The number, 255.255.255.255 means it is fixed only IP 127.0.0.1. You don’t need to understand all about hosts file. Remember which one you should touch.

Let’s add a domain name in the “hosts”file;

$ vi /etc/hosts
127.0.0.1 localhost
255.255.255.255 broadcasthost
::1             localhost127.0.0.1 wp.local

I put the google domain in the “hosts” file. When I open the domain with my web browser, then the browser will show 404 error, page not found. If you open “wp.local” from address bar, then Chrome browser will open google search result. Type everything, “http://wp.local”. It will work.

Because your computer wants to get a response from your computer itself, but there is no service for the request.

Let’s start the web server, Nginx. I used “homebrew” to install Nginx.

$ brew services list
nginx             stopped
$ brew services start nginx
==> Successfully started `nginx` (label: homebrew.mxcl.nginx)

Ok, let’s go back to your browser and open the “localhost”, then you could see this default Nginx page.

Let’s download Wordpress and create a Nginx configuration file for the site.

To use Wordpress with Nginx, you need to run php-fpm. Let’s install php-fpm by brew.

$ brew search php
...$ brew install php
$ brew services list
php    started  ... .......

Check the php-fpm service listen method,

$ cd /usr/local/etc/php/7.4/php-fpm
$ less www.conf.
.
listen = 127.0.0.1:9000
.
.

Add php upstream in the nginx.conf. I put the code under “#gzip on;”.

$ cd /usr/local/etc/nginx
$ vi nginx.conf.
.
.http {
.
.
.
    #gzip  on;    # PHP upstream
    upstream php {
        server 127.0.0.1:9000;
    }    server {
        listen     80;
.
.
.

(If you put the code inside of server {…}, then the “php upstream” will work only with the server.)

Create “wp.local.conf”, Nginx config for the “wp.local” site. I extracted the Wordpress under Workspace of my user account.

$ cd /usr/local/etc/nginx/servers
$ vi wp.local.conf
server {
 listen 80;
 server_name wp.local;
 
 root /Users/[username]/Workspace/wordpress;
 index index.php; location = /favicon.ico {
   log_not_found off;
   access_log off;
 } location = /robots.txt {
   allow all;
   log_not_found off;
   access_log off;
 } location / {
   try_files $uri $uri/ /index.php?$args;
 } location ~ \.php$ {
  include fastcgi_params;
  fastcgi_intercept_errors on;
  fastcgi_pass php;
  fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
 } location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
  expires max;
  og_not_found off;
 }
}

It is the default Wordpress configuration for nginx.

Let’s test the config whether there is error or not and restart nginx.

$ nginx -t
nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax is ok
nginx: configuration file /usr/local/etc/nginx/nginx.conf test is successful
$ brew services restart nginx
Stopping `nginx`... (might take a while)
==> Successfully stopped `nginx` (label: homebrew.mxcl.nginx)
==> Successfully started `nginx` (label: homebrew.mxcl.nginx)
$

All done! Let’s open it again. You can see the Wordpress installation page.

Yes, It’s time to talk the Gas Mask!

It is not convenient to change the “hosts” file directly. There are many cases to change the hosts file depends on your web development environments. Gas Mask will help you to change the hosts file easily.

Let’s install the Gas Mask app and run.

$ brew search gas-mask
==> Casks
gas-mask
$ brew info gas-mask
gas-mask: 0.8.6 (auto_updates)
http://clockwise.ee/
/usr/local/Caskroom/gas-mask/0.8.6 (122B)
From: https://github.com/Homebrew/homebrew-cask/blob/HEAD/Casks/gas-mask.rb
==> Name
Gas Mask
==> Description
Hosts file editor/manager
==> Artifacts
Gas Mask.app (App)
==> Analytics
install: 165 (30 days), 401 (90 days), 1,728 (365 days)
$ brew cask install gas-mask