Git for WordPress Deployment

There are a few good tutorials out there on deploying web sites using git. Many professional web developers use git to deploy updates to their test sites and customer sites. There are a few reasons why git is a fit for these tasks:

  1. Git tracks file changes and transfers only the necessary objects
  2. Git supports a number of protocols to talk to your web server, including ssh for security
  3. Git has hooks for automatically running scripts at various points to check file permissions, etc.
  4. Git can easily be configured to ignore files that do not need to be moved back and forth
  5. You’re already using git to revision and manage your code changes, so why not deploy with it?

But there are issues :

  1. Git repos do not belong on your public server, since you only want your customer to have access to the latest versions
  2. Git has a steep learning curve

My web server gives me SSH access, which is key to my deployment technique. Logging into an interactive terminal on the server, I set up a folder to hold git repos, outside of the public-facing html folder, which serves to ensure that my git is hidden from users. To put the web source files in one place and the repo in another, I need to initialize what is called a bare repository in git. This is the command :

git init –bare

And this is the resulting directory structure:

Screen Shot 2016-06-10 at 10.59.34 AM

Next, I want to create a way to push changes to my public server. Git provides hooks for automating common software development tasks. These hooks can be executed before or after several stages of git operations. The post-receive hook will be run every time code changes get pushed to the server git repo. The following two-line script will update the files under html every time I push updates to the git repo:

#!/bin/sh
GIT_WORK_TREE=/path/to/html checkout -f

To make this run on the server automatically at every code check-in, I name it post-receive (no file extension), make it executable, and place it in the hooks folder in my git repo. The GIT_WORK_TREE variable assignment is needed to tell git where the live code lives, since a bare repo keeps code and history separate from each other.

On the client side, I create a git repo and assign the web server as a remote.

git init
git remote add public ssh://user@server.com/path/to/git/repo
git push –set-upstream public master
git push public +master:refs/head/master
git config –global push.default simple

Did the double-dash (dubdash, heh) come through up there? “–set-upstream” and “–global”. Anyway, these git settings set up the remote repo and ensure that I can push and pull code without any extra commands. I choose to name my web server public within git to reflect the fact that a push will publish the site.

From here, I can create my site code. A single push command will publish my site!

If a web site is maintained by multiple web developers on their client machines, this model works very well. Everybody pushes updates to the central git remote repo, and every user can pull recent changes using

git fetch
git merge

But, what if someone is making changes on the server directly? This is exactly what happens with WordPress. Uploaded images and plugin installations cause changes in the html folder that we want to track in our git repo. I could not find a git hook to automatically capture these changes, so I created a script on the client to automatically checkin new changes at the same time I pull them over to my client:

#!/bin/bash

HOST=user@server.com
GIT_REPO=/path/to/git/repo/
GIT_WORK_TREE=/path/to/html/

set -e

ssh $HOST "
cd $GIT_REPO; 
GIT_WORK_TREE=$GIT_WORK_TREE git add -A;
GIT_WORK_TREE=$GIT_WORK_TREE git commit -m 'Commit by pullall';
"

I run this script before running

git fetch
git merge

This all makes for a nice backup/tracking system. The WordPress posts are stored in a SQL Database, of course, so that system must be backed up separately.

Are there better tools than git for this job? Leave a comment and give me your opinion!

Giving Hipwords some GPL Love

GPL has not always been my favorite license. This feeling got worse when my daughter’s Minecraft server got shot down by a DMCA takedown of the server code she was running. If you have never read about this, you probably should.

But I do respect copyright and licensing, big-time. And since my favorite-at-the-moment WordPress theme is licensed under GPL, I should probably do the right thing and post my minimal PHP changes here. And that also gives me a chance to test out Crayon Syntax Highlighter!

<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php if (is_front_page()) { ?>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
<?php } ?>

<?php if ((!is_home()) and !(is_archive())) { ?>

<?php the_title( sprintf( '<h2 class="entry-title site-title"> Talks about ', es
c_url( get_permalink() ) ), '</h2>' ); ?>
<?php if ( 'post' == get_post_type() ) : ?>
<div class="entry-meta">
	<?php the_time('l, F jS, Y') ?>
	<?php the_category(', ') ?>
</div><!-- .entry-meta -->
<?php endif; ?>
<?php } ?>
<?php if (is_archive()) { ?>
<?php
		the_archive_title( '<h2 class="site-title"> Thoughts on ', '</h2
>' );
the_archive_description( '<div class="taxonomy-description">', '</div>' )
;?>
<?php } ?>

What you’re looking at are the modifications I made to header.php in order to change the site titles of all archive and search pages to something more egotistical. header.php and footer.php were the only pieces of the Hipwords theme that I had to override directly, rather than using the preferred WordPress theme extension mechanism : child themes.

Child themes are amazingly simply to use, and they quite frankly do more than I had a right to expect them to do. You simply create your own folder and create a functions.php and style.css in a way that has been described well in other spaces.

I exploited a surprising feature when I wanted to change just a small bit of the header and the footer : It turns out that if you copy any PHP file, like one corresponding to archive or static pages, from the parent theme into the child folder, the WordPress engine loads that file preferentially. I utilized this behavior to copy-and-modify the footer to make one final change…

<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'hipwords' ) ); ?>"><?php printf( __( 'Powered by %s', 'hipwords' ), '<b>WordPress</b>' ); ?></a>
<span class="sep"> | </span>
<a href="<?php echo esc_url( __('http://forbetterweb.com/', 'hipwords') ); ?>" title="<?php esc_attr_e('forbetterweb.com', 'hipwords'); ?>">
<?php printf( __('Theme: <b>HipWords</b> by %s.', 'hipwords'), 'ForBetterWeb.com' ); ?>
</a>

/* ... That was the old, here is the new ... */

> &copy; <?php echo date("Y"); ?> Michael Johnson

That’s right. I replaced their credits with the copyright notice. Well, it’s not like I’ve been quiet about how awesome Hipwords is!

Parting thoughts: I would really love to pass on this child theme, small though it may be, on to other software developers in need of a blogging platform. This would involve some up-front work and maintenance commitment on my part. Up front, I would need to finish customizing the theme and create a downloadable package to submit to the free WordPress repository. In maintenance mode, I would need to at least monitor security issues and make sure I did my part to keep the web safe. I’m not sure if it is worth the effort.

Have thoughts? Leave them in the comments!

The WordPress Ecosystem

WordPress is amazing!

I spent a lot of time over the past few months trying to settle on a blogging platform. For me, it is not a trivial matter of looking up features and reading opinions. I try before I buy. On my local drive there are many prototype sites written in more than a few languages slash frameworks. Over at http://jameecreations.com I exercised my raw HTML and CSS skills. Now that I have a WordPress site going, I find that those skills are helping me customize my theme just as I like it.

But before I get lost in code logistics, let me say what I came here to say: WordPress is awesome because of the amazing community of feature contributors. Between the plugins and the themes you have everything you could ever want from a modern, responsive site. No longer do I search for “how to do cool animated transition XYZ”. Now I search for “plugin for cool animated transition XYZ”, and there it is. Install it, configure it, I’m done.

http://wordpress.org and https://wordpress.org/themes/hipwords/ have made this blog a pleasure to create, and I cannot thank their creators and the creative community around them enough.

Now for some minimal coding logistics : A Child Theme (see https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/ for great tutorials) enabled me to create a beautiful module loosely-coupled to WordPress and the parent theme. I was able to get a fun font from my name in the form of Lobster from Google Fonts. Another stylesheet resource, hooked into functions.php as with the previous, comes from Fontawesome. Using the :before pseudo-class along with the font-family: CSS property and the icon hex codes, I added cool icons to my menu for social links. This plus some other formatting choices in style.css make for a nice, modern looking software developer blog.

Finally(for now), I fixed a headshot on my page with minimal pain using an Image Widget (https://wordpress.org/plugins/image-widget/). Since the Hipwords theme comes with a widget-based sidebar, the process was easy and largely driven through the browser.

That’s it for now; more to come as I feature-up the site. I would include code, but I have yet to install that plugin. 🙂 Wait for a future post.