Git Local WordPress Deployment

How To Set Up Git Locally

When you commit changes with git, it embeds your name and email address into the commit message in order to easily track changes. If we do not configure this information ourselves, git may try to guess these values (probably incorrectly) by using your Linux username and hostname.

Give git the values you wish to use for these parameters with these commands:

git config --global user.name "Your Name Here"
git config --global user.email "your_email@example.com"

1 2	git config --global user.name "Your Name Here" git config --global user.email "your_email@example.com"

The configuration changes will be stored in a file in your home directory. You can see them with a normal text editor:

nano ~/.gitconfig

Output:
[user]
name = Your Name Here
email = your_email@example.com

You can also view this information by querying git itself for the current configuration settings:

git config --list

Output:
user.name=Your Name Here
user.email=your_email@example.com

Managing and Deploying WordPress with Git

This setup gives the possibility of keeping themes and plugins under version control, while having a reference to the core WordPress package and allowing me to update it with each new release.

Create a new project folder.

mkdir example.com && cd example.com
git init

1 2	mkdir example.com && cd example.com git init

Add initial ReadMe file and make your first commit

touch README.md
git add README.md
git commit -m "Initial commit."

touch README.md

git add README.md

git commit -m "Initial commit."

Output:
[master (root-commit) 38b1706] Initial commit.
1 file changed, 0 insertions(+), 0 deletions(-)
create mode 100644 README.md

Add WordPress as a submodule to the project, checkout the last version and commit.

git submodule add git://github.com/WordPress/WordPress.git wordpress

Output:
Cloning into ‘wordpress’…
remote: Counting objects: 226244, done.
remote: Compressing objects: 100% (78/78), done.
remote: Total 226244 (delta 44), reused 0 (delta 0), pack-reused 226166
Receiving objects: 100% (226244/226244), 142.27 MiB | 3.85 MiB/s, done.
Resolving deltas: 100% (179359/179359), done.
Checking connectivity… done.

git commit -m "Add WordPress submodule."

Output:
[master 8bcf108] Add WordPress submodule.
2 files changed, 4 insertions(+)
create mode 100644 .gitmodules
create mode 160000 wordpress

cd wordpress
git checkout 4.3.1

Output:
Note: checking out ‘4.3.1’.

You are in ‘detached HEAD’ state. You can look around, make experimental
changes and commit them, and you can discard any commits you make in this
state without impacting any branches by performing another checkout.

If you want to create a new branch to retain commits you create, you may
do so (now or later) by using -b with the checkout command again. Example:

git checkout -b new_branch_name

HEAD is now at 759f3d8… Tag 4.3.1 Built from https://develop.svn.wordpress.org/tags/4.3.1@34204

cd ..
git commit -am "Checkout latest WordPress version"

Output:
[master dba1127] Checkout latest WordPress version
1 file changed, 1 insertion(+), 1 deletion(-)

We will not be touching the WordPress submodule, we will only update it when a new version is released. Therefore, we will have to put our configuration and custom development (themes & plugins) outside the WordPress folder.

cp wordpress/wp-config-sample.php wp-config.php
cp wordpress/index.php .
cp -R wordpress/wp-content .

# you can delete unused plugins and default themes
# example : rm wp-content/plugins/hello.php

git add .
git commit -m "Moving config and content outside the submodule"

cp wordpress/wp-config-sample.php wp-config.php

cp wordpress/index.php .

cp -R wordpress/wp-content .

# you can delete unused plugins and default themes

# example : rm wp-content/plugins/hello.php

git add .

git commit -m "Moving config and content outside the submodule"

Output:
[master 10d6e93] Moving config and content outside the submodule
88 files changed, 18037 insertions(+), 1 deletion(-)
create mode 100644 index.php
create mode 100644 wp-config.php
create mode 100644 wp-content/index.php
create mode 100644 wp-content/plugins/index.php
create mode 100644 wp-content/themes/index.php
create mode 100644 wp-content/themes/twentyfifteen/404.php
create mode 100644 wp-content/themes/twentyfifteen/archive.php
create mode 100644 wp-content/themes/twentyfifteen/author-bio.php
create mode 100644 wp-content/themes/twentyfifteen/comments.php
create mode 100644 wp-content/themes/twentyfifteen/content-link.php
create mode 100644 wp-content/themes/twentyfifteen/content-none.php
create mode 100644 wp-content/themes/twentyfifteen/content-page.php
create mode 100644 wp-content/themes/twentyfifteen/content-search.php
create mode 100644 wp-content/themes/twentyfifteen/content.php
create mode 100644 wp-content/themes/twentyfifteen/css/editor-style.css
create mode 100644 wp-content/themes/twentyfifteen/css/ie.css
create mode 100644 wp-content/themes/twentyfifteen/css/ie7.css
create mode 100644 wp-content/themes/twentyfifteen/footer.php
create mode 100644 wp-content/themes/twentyfifteen/functions.php
create mode 100644 wp-content/themes/twentyfifteen/genericons/COPYING.txt
create mode 100644 wp-content/themes/twentyfifteen/genericons/Genericons.eot
create mode 100644 wp-content/themes/twentyfifteen/genericons/Genericons.svg
create mode 100644 wp-content/themes/twentyfifteen/genericons/Genericons.ttf
create mode 100644 wp-content/themes/twentyfifteen/genericons/Genericons.woff
create mode 100644 wp-content/themes/twentyfifteen/genericons/LICENSE.txt
create mode 100644 wp-content/themes/twentyfifteen/genericons/README.md
create mode 100644 wp-content/themes/twentyfifteen/genericons/genericons.css
create mode 100644 wp-content/themes/twentyfifteen/header.php
create mode 100644 wp-content/themes/twentyfifteen/image.php
create mode 100644 wp-content/themes/twentyfifteen/inc/back-compat.php
create mode 100644 wp-content/themes/twentyfifteen/inc/custom-header.php
create mode 100644 wp-content/themes/twentyfifteen/inc/customizer.php
create mode 100644 wp-content/themes/twentyfifteen/inc/template-tags.php
create mode 100644 wp-content/themes/twentyfifteen/index.php
create mode 100644 wp-content/themes/twentyfifteen/js/color-scheme-control.js
create mode 100644 wp-content/themes/twentyfifteen/js/customize-preview.js
create mode 100644 wp-content/themes/twentyfifteen/js/functions.js
create mode 100644 wp-content/themes/twentyfifteen/js/html5.js
create mode 100644 wp-content/themes/twentyfifteen/js/keyboard-image-navigation.js
create mode 100644 wp-content/themes/twentyfifteen/js/skip-link-focus-fix.js
create mode 100644 wp-content/themes/twentyfifteen/languages/twentyfifteen.pot
create mode 100644 wp-content/themes/twentyfifteen/page.php
create mode 100644 wp-content/themes/twentyfifteen/readme.txt
create mode 100644 wp-content/themes/twentyfifteen/rtl.css
create mode 100644 wp-content/themes/twentyfifteen/screenshot.png
create mode 100644 wp-content/themes/twentyfifteen/search.php
create mode 100644 wp-content/themes/twentyfifteen/sidebar.php
create mode 100644 wp-content/themes/twentyfifteen/single.php
create mode 100644 wp-content/themes/twentyfifteen/style.css
create mode 100644 wp-content/themes/twentytwelve/404.php
create mode 100644 wp-content/themes/twentytwelve/archive.php
create mode 100644 wp-content/themes/twentytwelve/author.php
create mode 100644 wp-content/themes/twentytwelve/category.php
create mode 100644 wp-content/themes/twentytwelve/comments.php
create mode 100644 wp-content/themes/twentytwelve/content-aside.php
create mode 100644 wp-content/themes/twentytwelve/content-image.php
create mode 100644 wp-content/themes/twentytwelve/content-link.php
create mode 100644 wp-content/themes/twentytwelve/content-none.php
create mode 100644 wp-content/themes/twentytwelve/content-page.php
create mode 100644 wp-content/themes/twentytwelve/content-quote.php
create mode 100644 wp-content/themes/twentytwelve/content-status.php
create mode 100644 wp-content/themes/twentytwelve/content.php
create mode 100644 wp-content/themes/twentytwelve/css/ie.css
create mode 100644 wp-content/themes/twentytwelve/editor-style-rtl.css
create mode 100644 wp-content/themes/twentytwelve/editor-style.css
create mode 100644 wp-content/themes/twentytwelve/footer.php
create mode 100644 wp-content/themes/twentytwelve/functions.php
create mode 100644 wp-content/themes/twentytwelve/header.php
create mode 100644 wp-content/themes/twentytwelve/image.php
create mode 100644 wp-content/themes/twentytwelve/inc/custom-header.php
create mode 100644 wp-content/themes/twentytwelve/index.php
create mode 100644 wp-content/themes/twentytwelve/js/html5.js
create mode 100644 wp-content/themes/twentytwelve/js/navigation.js
create mode 100644 wp-content/themes/twentytwelve/js/theme-customizer.js
create mode 100644 wp-content/themes/twentytwelve/languages/twentytwelve.pot
create mode 100644 wp-content/themes/twentytwelve/page-templates/front-page.php
create mode 100644 wp-content/themes/twentytwelve/page-templates/full-width.php
create mode 100644 wp-content/themes/twentytwelve/page.php
create mode 100644 wp-content/themes/twentytwelve/readme.txt
create mode 100644 wp-content/themes/twentytwelve/rtl.css
create mode 100644 wp-content/themes/twentytwelve/screenshot.png
create mode 100644 wp-content/themes/twentytwelve/search.php
create mode 100644 wp-content/themes/twentytwelve/sidebar-front.php
create mode 100644 wp-content/themes/twentytwelve/sidebar.php
create mode 100644 wp-content/themes/twentytwelve/single.php
create mode 100644 wp-content/themes/twentytwelve/style.css
create mode 100644 wp-content/themes/twentytwelve/tag.php

We will have to make some changes to these copied files so that WordPress still finds all the necessary files.

In index.php change:

require('./wp-blog-header.php');

1	require('./wp-blog-header.php');

require('./wordpress/wp-blog-header.php');

1	require('./wordpress/wp-blog-header.php');

and in wp-config.php add the following lines:

define('WP_SITEURL', 'http://' . $_SERVER['SERVER_NAME'] . '/wordpress');
define('WP_HOME',    'http://' . $_SERVER['SERVER_NAME']);
define('WP_CONTENT_DIR', $_SERVER['DOCUMENT_ROOT'] . '/wp-content');
define('WP_CONTENT_URL', 'http://' . $_SERVER['SERVER_NAME'] . '/wp-content');

define('WP_SITEURL', 'http://' . $_SERVER['SERVER_NAME'] . '/wordpress');

define('WP_HOME', 'http://' . $_SERVER['SERVER_NAME']);

define('WP_CONTENT_DIR', $_SERVER['DOCUMENT_ROOT'] . '/wp-content');

define('WP_CONTENT_URL', 'http://' . $_SERVER['SERVER_NAME'] . '/wp-content');

If we want to use different database credentials for the local development server and the online production or staging server, we can modify the database settings in thewp_config file like this:

if ($_SERVER['REMOTE_ADDR']=='127.0.0.1') {
    define('WP_ENV', 'development');
} else {
    define('WP_ENV', 'production');
}

// MySQL settings - You can get this info from your web host //
if (WP_ENV == 'development') {
    define('DB_NAME', 'development_db');
    define('DB_USER', 'username');
    define('DB_PASSWORD', 'password');
    define('DB_HOST', 'localhost');
} else {
    define('DB_NAME', 'production_db');
    define('DB_USER', 'username');
    define('DB_PASSWORD', 'password');
    define('DB_HOST', 'mysql.remotehost.com');
}

if ($_SERVER['REMOTE_ADDR']=='127.0.0.1') {

define('WP_ENV', 'development');

} else {

define('WP_ENV', 'production');

}

// MySQL settings - You can get this info from your web host //

if (WP_ENV == 'development') {

define('DB_NAME', 'development_db');

define('DB_USER', 'username');

define('DB_PASSWORD', 'password');

define('DB_HOST', 'localhost');

} else {

define('DB_NAME', 'production_db');

define('DB_USER', 'username');

define('DB_PASSWORD', 'password');

define('DB_HOST', 'mysql.remotehost.com');

}

Finally we commit these changes.

git add .
git commit -m "define correct paths in config files"

1 2	git add . git commit -m "define correct paths in config files"

Output:
[master 9243d06] define correct paths in config files
1 file changed, 32 insertions(+), 8 deletions(-)

Edit your /etc/hosts file with the following line:

127.0.0.1 local_dev local_dev localhost

Now we can work on our custom themes and plugins outside the core WordPress folder and keep a record of it in Git. The website should display as normal on our local development server.

Setup MariaDB or MySQL container and user

We’re assuming here you have MariaDB or MySQL already setup. If you do not, see this document on the installation and setup of MariaDB / MySQL.

Login to MariaDB / MySQL mysql -p
Create a new database container create database local_dev;
Create a new user for the database container grant all privileges on local_dev.* TO 'local_admin'@'localhost' identified by 'strong_password_here';
Exit the database server exit;

We now have a new database container and user with the following details:

Database host:: localhost
Database name:: local_dev
Database user:: local_admin
Database password:: strong_password_here

Local Apache httpd VirtualHost configuration

Edit and add this configuration to: /etc/httpd/conf.d/vhosts.conf. If the file does not exist, create it.

<VirtualHost *:80>
    ServerAdmin webmaster@localhost.com
    DocumentRoot "/home/your_username/git/example.com"
    ServerName local_dev
    ErrorLog "/var/log/httpd/local_dev-example.com-error_log"
    CustomLog "/var/log/httpd/local_dev.example.com-access_log" common
<Directory "/home/your_username/git/example.com/">
    AllowOverride FileInfo
    # Allow open access:
    Require all granted
</Directory>
</VirtualHost>

ServerAdmin webmaster@localhost.com

DocumentRoot "/home/your_username/git/example.com"

ServerName local_dev

ErrorLog "/var/log/httpd/local_dev-example.com-error_log"

CustomLog "/var/log/httpd/local_dev.example.com-access_log" common

AllowOverride FileInfo

# Allow open access:

Require all granted

</Directory>

</VirtualHost>

Then give this command: systemctl start httpd.service or systemctl restart httpd.service

Install WordPress

Follow the onscreen prompts and fill out the fields as needed.

http://local_dev/

Login to your newly installed WordPress installation

http://local_dev/wordpress/wp-login.php

Post Setup / Update Options

Updating WordPress Core

When a new WordPress version is released, we can update the core WordPress files by using these commands:

cd wordpress
git fetch --tags

remote: Counting objects: 676, done.
remote: Compressing objects: 100% (208/208), done.
remote: Total 676 (delta 347), reused 191 (delta 191), pack-reused 270
Receiving objects: 100% (676/676), 486.14 KiB | 783.00 KiB/s, done.
Resolving deltas: 100% (532/532), completed with 99 local objects.
From git://github.com/WordPress/WordPress
 * [new branch]      4.4-branch -> origin/4.4-branch
   ec24d6e..8826804  master     -> origin/master
 * [new tag]         4.4        -> 4.4

git checkout 4.4
cd ..
git commit -m "Update Wordpress to version 4.4"

cd wordpress

git fetch --tags

remote: Counting objects: 676, done.

remote: Compressing objects: 100% (208/208), done.

remote: Total 676 (delta 347), reused 191 (delta 191), pack-reused 270

Receiving objects: 100% (676/676), 486.14 KiB | 783.00 KiB/s, done.

Resolving deltas: 100% (532/532), completed with 99 local objects.

From git://github.com/WordPress/WordPress

* [new branch] 4.4-branch -> origin/4.4-branch

ec24d6e..8826804 master -> origin/master

* [new tag] 4.4 -> 4.4

git checkout 4.4

cd ..

git commit -m "Update Wordpress to version 4.4"

Deploying changes to a staging server

let me push local changes to my staging server with a simple command.

We will be creating a Git repository on the same server that hosts our staging version of the website. Each time we push a change to the git repository, the repository will automatically update the code on our staging server.

This means you’ll need SSH access into your server to create a git repository from the command line. Check with your hosting provider if your hosting plan allows this.

First SSH into your server and create a bare Git repository for your website.

mkdir git && cd git
mkdir mysite.git && cd mysite.git
git --bare init

Now that we have a repository to push to on the server, we can add this as a remote to our local repository. Execute the following command on your own computer, in your local website folder. Don’t forget to change the hostname and path to the correct values.

git remote add origin name@192.168.0.256:/git/mysite.git

Next we can run the following command to push our code from our local machine to the server:

git push origin master

Now if we have a look at the git log of the server’s repository, we should see that our code has been pushed to the repository. Because this is a bare repository without a working tree, your code won’t actually be visible outside the log.

If we get a prompt for our password each time we push to the remote server, we can remove this hassle by setting up SSH keys. You can follow these instructions to set up SSH keys.

Finally we will automate the updating of our live server after each push to the git repository. We need to set up a post update hook. Go into your bare repository, then into the hooks directory and create a new script.

// Create a new file
vim post-update

// Copy this text and save the file
#!/bin/sh
export GIT_WORK_TREE=/path/to/you/live/files
git checkout -f

// give the post-receive file execute rights
chmod +x post-update

// Create a new file

vim post-update

// Copy this text and save the file

#!/bin/sh

export GIT_WORK_TREE=/path/to/you/live/files

git checkout -f

// give the post-receive file execute rights

chmod +x post-update

Now if you go back to your local code, make a change, commit the change and push it to the origin you will see your code magically update.

There is only one problem : since we made a bare repository, the automatic checkout will not update submodules. We will have to manually upload the core WordPress folder. Also, each time we update WordPress to a new version we will have to manually upload the new version of the core files to our server. If you have any tips to improve this situation, please let me know.

References

Last Modified: 22 Apr, 2020 at 16:19:37