Site icon Wil Selby

WordPress & Heroku – Custom Domain Name Configuration

wilselby

This post follows the post Heroku & WordPress Website Deployment which details how to create and publish a website using WordPress and Heroku. This post details how to setup a custom domain name registered through GoDaddy and integrating it with Heroku.

Custom Domain Name Configuration

By default, Heroku assigns each application a URL resembling applicationname.herokuapp.com. However, some users may prefer to use a custom domain name, like example.com instead. Heroku has written a detailed blog post titled “Custom Domain Names for Apps.”  The relevant portions are below with specific details regarding GoDaddy domain name hosting.

Heroku allows the users to add custom root domains and subdomains using the Heroku CLI. Examples of the code are shown below.

$ heroku domains:add example.com
$ heroku domains:add www.example.com

To verify the domains are added, run the following command.

$ heroku domains
=== example Heroku Domain
example.herokuapp.com

=== example Custom Domains
Domain Name      DNS Target
---------------  --------------------------
example.com      example.herokuapp.com
www.example.com  example.herokuapp.com

After adding the custom domains to Heroku, you must now point your DNS provider (GoDaddy in this example) at the domains DNS Target that Heroku developed. For the www subdomain, we will create a CNAME record. The next steps assume you have created a GoDaddy account and registered your desired custom domain name. For more information, see this stackoverflow post.

  1. Sign in to GoDaddy -> DOMAINS -> choose your domain -> Launch (this will take you to the Domain Details)
  2. Click ‘DNS Zone File’ tab
  3. Remove the CNAME record named ‘www’ (which points to @)
  4. Click ‘Add record’ -> CNAME(Alias) -> ‘Host’ should be www and ‘Points to’ should be your Heroku address (example supermoo-bil-3411.herokuapp.com). TTL can be 1 hour.

A naked domain takes the form of example.com compared to the http://www.example.com which has the www subdomain. To set this up, we want to forward example.com to http://www.example.com

  1. In the same window as above, click on the ‘Settings’ tab
  2. Under Forwarding -> Domain -> Click ‘Manage’ -> then click ‘Add Forwarding’
  3. ‘Forward to’ should be www.example.com (your domain), ‘Redirect type’ should be ‘301 (Permanent)’, ‘Forward settings’ should be ‘Forward only’
  4. Make sure “Update my nameservers and DNS settings to support this change. (Recommended)” is checked

After setting up domain forwarding, GoDaddy should update the domain name’s IP address to use GoDaddy’s forwarding IP address. If this doesn’t happen, then you need to create an A host record for the naked domain to point to 50.63.202.1. Refer to the GoDaddy documentation found here if the IP address has changed.

Now entering example.com should forward to http://www.example.com which should show your website hosted at applicationname.herokuapp.com

Lastly, in WordPress, you can change the “Site Address (URL)” setting. This is the address you want people to type in their browser to reach your WordPress website. This can be done on the Settings page of your WordPress dashboard as shown in the picture below. This also updates the Permalink default template so all of your internal pages and links use the custom domain name and not the Heroku domain name.

Alternatively, this setting can be hard coded into the wp-config.php file with the following line of code.

define('WP_HOME','https://www.example.com');

See the following posts for more information about securing and customizing your website:

 

Exit mobile version