Site icon Wil Selby

WordPress & Heroku – Custom Website Development & Deployment

wilselby

This post describes a rapid and flexible way to create, deploy, and maintain a website for free. I used WordPress to create and organize the website content, and Heroku to host and run the website.

WordPress

WordPress is a free and open-source Content Management System which is arguably the easiest and most popular blogging system on the internet today. WordPress can be hosted off of the WordPress network or off of an alternate internet hosting service. We will be using Heroku to host our WordPress software.

We will also be taking advantage of the extensive theme and plug-in ecosystem to customize the website. WordPress themes allow users to change the look and functionality of a website quickly and without altering the website content. The plug-in architecture allows users to tailor a website with custom functions an features.

Heroku

Heroku is a cloud based Platform-as-a-Service company that provides web application deployment services. Heroku lets you build, run, and scale applications. Users are able to create applications and deploy code to the containers to run on Heroku’s servers. Heroku calls these containers dynos – a lightweight, secure, virtualized Unix container that contains the application its file system. Heroku takes care of patching, upgrading, failovers, and security 24/7 so developers can focus on content and not the infrastructure. Heroku also has an ecosystem including third-party add-ons and open source buildpacks which gives developers the flexibility to integrate other extensions and services.

For our purposes, our website will be the application that Heroku will manage. We will primarily be handling the application’s source code, dependencies, and a Procfile (which tells Heroku which portions of the application are runnable). We will be maintaining all of this code in a Git repository and pushing the application repository to Heroku’s Git server. When the source code for the application is pushed to Heroku, the application is built and assembled into a slug. Heroku creates a dyno, loads the application in the dyno’s file system, and executes the commands in the Procfile to deploy the application. The application is stored as a release which contains the slug and associated configuration variables and add-ons. When a new version of the application is deployed, the old dyno is shut down and a new one is created. The old releases are still available for rollback is required.

Deploying the Website

We will rely upon the Herok WP repository to provide the initial source code to develop and deploy our website. This repository already contains the WordPress source code and appropriate configuration files necessary for deployment to Heroku. This repository relies on technologies and comes pre-installed with several plugins as shown on the GitHub page. We will make heavy use of Composer which is a dependency manager to make installing and managing plugins, themes and WordPress easier.

The following commands are recreated from the GitHub page here for convenience purposes.

The first step is to clone the repository from Github. I chose to add the branch flag to ensure that the master branch was downloaded and not one of the other branches. This flag can be removed and you can verify that the master branch was downloaded by running git branch.

$ git clone git://github.com/xyu/heroku-wp.git --branch master
$ git branch
> master

The GitHub instructions tell you to create your new Heroku application via the command line but I prefer to use the GUI on their website. This allows you to enter a custom application name instead of having Heroku randomly generate one for you. The screenshot below shows the GUI on Heroku.

For the rest of this tutorial, use the application name you created where I have applicationname. Next, we want to create a remote connection between our Git repository and the Heroku application. This is done using the code below. The git remote command can be used to verify the connection.

$ cd heroku-wp
$ heroku git:remote -a applicationname
$ git remote
> heroku
> origin

Your new empty application is now being run from the Heroku server. This application uses the Heroku DNS Server to direct to the application domain (typically “applicationname.herokuapp.com”).

Next, we need to add a database to the application to store the WordPress content. We will add ClearDB which is a database-as-a-service in the cloud for MySQL powered applications.

$ heroku addons:create cleardb:ignite
> Adding cleardb:ignite on strange-turtle-1234... done, v2 (free)
> Use `heroku addons:docs cleardb:ignite` to view documentation.

Next, add unique keys and salts to your Heroku config.

$ heroku config:set\
    WP_AUTH_KEY="`dd if=/dev/random bs=1 count=96 2>/dev/null | base64`"\
    WP_SECURE_AUTH_KEY="`dd if=/dev/random bs=1 count=96 2>/dev/null | base64`"\
    WP_LOGGED_IN_KEY="`dd if=/dev/random bs=1 count=96 2>/dev/null | base64`"\
    WP_NONCE_KEY="`dd if=/dev/random bs=1 count=96 2>/dev/null | base64`"\
    WP_AUTH_SALT="`dd if=/dev/random bs=1 count=96 2>/dev/null | base64`"\
    WP_SECURE_AUTH_SALT="`dd if=/dev/random bs=1 count=96 2>/dev/null | base64`"\
    WP_LOGGED_IN_SALT="`dd if=/dev/random bs=1 count=96 2>/dev/null | base64`"\
    WP_NONCE_SALT="`dd if=/dev/random bs=1 count=96 2>/dev/null | base64`"

Optionally, you can create a new production branch for your app

$ git checkout -b production

Finally, deploy your application to Heroku

$ git push heroku production:master

You should now be able to access your WordPress website hosted on Heroku at

http://applicationname.herokuapp.com/wp-admin

You will be then put through the WordPress setup process to create a login username and password. From here, you can completely customize your website, modifying themes and settings, activating plugins, and creating content through pages and posts.

My website relies on the free Decode theme. I also currently use the following plugins:

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

 

Exit mobile version