Posted on

How to extract and compile Sass/CSS with Webpack 2

Sass is now an indispensable tool for web designing, and it is true for creating a custom theme. Webpack also helps to make the build process even smoother. There was a slight change on the integration with the latest Webpack 2.x, so here is how.

This example assumes that you are creating a new WordPress child theme with Bedrock, and have already installed node.js and npm.

First, install Webpack module bundler in the theme directory.

add these lines

Install webpack and sass modules by npm.

Edit package.json to add command to build sass.

Then create webpack.config.js to specify the Sass compile task. The syntax has been changed from Webpack version 1.x, and this is an example for webpack 2.3.3.

and create the styleshees directory.

If you are creating a new child theme of Storefront theme, the CSS would be something like this.

Save the file and run the build. It will create a new style.css in the theme root directory.

To auto reload when you make any change on the file:

Posted on

Install Woocommerce plugin and theme with Composer from the vendors’ repositories

When managing WordPress and the plugins with Composer via Trellis, I sometimes could not find a plugin or a theme that are not available from the wpackagist repository. This is how to install plugins and themes directly from the vendors’ github repo or download site.

Open composer.json and add repositories. For example to add Woocommerce plugin and the Storefront theme, specify the zip download URL with the package name. Each custom package requires an unique package name. I specified woocommerce-theme for the Storefront as woocommerce is already used by the plugin.

and requires them also in the same composer.json.

To install the plugin and theme on the development environment, ssh to Vagrant and run composer update.

These plugin will be installed automatically on the production when you next deploy.

Posted on

How to configure Trellis for the production server

Once you have finished setting up a Trellis production server, let’s configure Trellis. These are recommended articles to refer.

We are going to manage entire configurations with git. This is probably one of the most useful aspects of Trellis. You can track all the changes on your website and easily upgrade, revert, and re-create the environments.
Since the repository contains sensitive server configurations, it should be stored in a private repository.
This example assumes that you create a private repo (REPO_NAME) on YOUR_GITHUB_USER_NAME account. To access the private repo, you may need to do this if you are on OXS:

Created your repository on Github then:

Now let’s start the configuration.
First, add the production address to the trellis. I specified IP address of the production server (PRODUCTION_IP_ADDRESS should be replaced by your own IP address). The official document says that you can also use the hostname.

Edit : /trellis/hosts/production

Next, the WordPress configurations.

Edit : trellis/group_vars/production/wordpress_sites.yml

In this example, I added one redirect rule which routes access to example.com to www.example.com. Remove it if you don’t need it.

Then configure: trellis/group_vars/all/users.yml

Replace USER_NAME by the production user name which you created previously, and YOUR_GITHUB_USER_NAME by your github account.

Next, let’s configure passwords by following the official doc.

Basically you need to modify settings in these files:

  • trellis/group_vars/all/vault.yml
  • trellis/group_vars/development/vault.yml
  • trellis/group_vars/staging/vault.yml
  • trellis/group_vars/production/vault.yml

Change all the passwords, and also not to forget to change example.com of each files to match to the domain name you specified in the corresponding wordpress_sites.yml

To protect the sensitive values, Trellis provides an encryption method called vault.

Here is the breakdown of the steps:

Hard-code the password in the .vault_pass file, save and exit, then:

also add the file to .gitignore NOT to commit to the repository.

Edit : /trellis/ansible.cfg

and finally encrypt the vault files.

Commit the changes, and merge to the master on the github.

Now you are almost ready to provision the production server. Just to final check that CNAME “www” of your domain (www.example.com) is reachable. It is required to issue “Let’s Encrypt SSL” cert during the server provisioning process.

If everything is ready, go for it!

If all succeed, you will be able to access your production server.

Posted on

How to configure a Trellis production server on Digital Ocean

Once your local environment is ready, let’s continue to set up the production server. Digital Ocean hosting is one good choice for the production server. Setting up the server is straightforward, just following these instructions.
When you choose the type of Droplet, select the plain Ubuntsu NOT the LEMP stack. Trellis should take care all the application configurations.

When your server is up, let’s configure it for the Trellis. First, create a new user and grant sudo access to deploy the Trellis. Replace USER_NAME to your own user name.

Sudo NOPASSWD option helps to automate the admin tasks. Grant no password sudo on the production server.

add this line at the end of line. It does not work if you add them before some statement.

Then configure the public key ssh login from your local environment.

and copy the key to the production server.

Paste the copied public key. Hit CTRL-x to exit the file, then y to save the changes that you made, then ENTER to confirm the file name.

Restrict the permissions of the authorized_keys file with this command:

Add alias to .zshrc so that I can connect to the production server.

Posted on

Setting up VirtualBox, Vagrant, Ansible and github to install Trellis

This is a series of memos to install and build WordPress website using Trellis.

In this first article, I will explain the steps to set up the VirtualBox and Vagrant environment on Mac OSX (Sierra). Make sure that you have already installed x-code and it is ready to use, and read through the official documentation.

First install VirtualBox, Vagrant and then also install required vagrant modules.

Next, we will install trellis via Github. Make sure that you can connect to Github via ssh.

Add the ssh key to github following this instruction.

Now you are ready to clone trellis and bedrock code from the Github repos.

Edit config to set your site name.

and initialize your virtual machine.

Continues to How to configure a Trellis production server on Digital Ocean.