Enable keep-alive in Apache

What is keep alive?

keep-alive-enabled

Keep alive is a method to allow the same tcp connection for HTTP conversation instead of opening a new one with each new request. More simply put, it is a communication between the web server and the web browser that says “you can grab more than just one file at a time”. Keep alive is also known as a persistant connection.

– Source

Advantages of KeepAlive

  • Improves website speed: It reduces latency associated with HTTP transfers and delivers a better user experience.
  • Reduces CPU usage: On the server side enabling KeepAlive reduces CPU usage. Consider that a typical web page has dozens of different files such as images, stylesheets, javascript files etc. If KeepAlive is disabled a separate connection must be made for each of those files. Creating and closing connections has an overhead and doing it for every single file wastes CPU time.

Disadvantages of Keepalive

  • Increases memory usage: Enabling KeepAlive  increases memory usage on the server. Apache processes have to keep connections open waiting for new requests from established connections. While they are waiting they are occupying RAM that could be used to service other clients. If you turn off KeepAlive fewer apache processes will remain active. This will lower memory usage and allow Apache to serve more users.

Source

Edit httpd.conf.

vi /etc/httpd/conf/httpd.conf

Edit the following section – KeepAlive On.

#
# KeepAlive: Whether or not to allow persistent connections (more than
# one request per connection). Set to "Off" to deactivate.
#
KeepAlive On

#
# MaxKeepAliveRequests: The maximum number of requests to allow
# during a persistent connection. Set to 0 to allow an unlimited amount.
# We recommend you leave this number high, for maximum performance.
#
MaxKeepAliveRequests 100

#
# KeepAliveTimeout: Number of seconds to wait for the next request from the
# same client on the same connection.
#
KeepAliveTimeout 100

Restart httpd.

/etc/init.d/httpd restart

Browser Caching via .htaccess

I added simple browser caching through my .htaccess file.

vi .htaccess

IMPORTANT: Add the following to the top of the file.

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

WordPress Backup on CentOS

Now that I’ve moved my website over to CentOS, I’ll be showing you how I do backups.

My Setup

  • VirtualBox – CentOS web server running WordPress
  • iMac – connected Drobo

Goal

  • Run daily mysql backups
  • Run weekly website backups
  • Only keep the latest two backups
  • Run daily rsync’s to my Drobo from my iMac

CentOS — Create a backup directory within your home folder

mkdir -p /home/tommy/backup/itsmetommy.com

CentOS — Backup MySQL Database

How to run it manually.

/usr/bin/mysqldump -u tommy -psupersecretpassword itsmetommy > /home/tommy/backup/itsmetommy.com/itsmetommy_$(date '+%Y%m%d-%H%M%S').sql

CentOS — Backup Website Directory

How to run it manually.

/bin/tar -czvf /home/tommy/backup/itsmetommy.com/itsmetommy_$(date '+%Y%m%d-%H%M%S').tar.gz -C /var/www/ itsmetommy.com

You can see that both files are located in /home/tommy/backup/itsmetommy.

ls -l /home/tommy/backup/itsmetommy.com
total 6731528
-rw-r--r-- 1 root root 9927065 Dec 25 21:55 itsmetommy_20151225-215541.sql
-rw-r--r-- 1 root root 6883148434 Dec 25 22:04 itsmetommy_20151225-215602.tar.gz

CentOS — Setup cron

No one wants to run backups manually, so lets add these commands as a cronjob.

crontab -e
@daily /usr/bin/mysqldump -u tommy -psupersecretpassword itsmetommy > /home/tommy/backup/itsmetommy.com/itsmetommy_$(date '+\%Y\%m\%d-\%H\%M\%S').sql
@weekly /bin/tar -czvf /home/tommy/backup/itsmetommy.com/itsmetommy_$(date '+\%Y\%m\%d-\%H\%M\%S').tar.gz -C /var/www/ itsmetommy.com

If you’re having problems, check your cron logs.

tail -f /var/log/cron

MAC — Setup rsync on my MAC

I first created a backup directory on my Drobo.

mkdir -p /Volumes/Drobo5D02/Backup/itsmetommy.com

How to run it manually.

rsync -hva -e ssh --delete --progress tommy@itsmetommy.com:/home/tommy/backup/itsmetommy.com/ /Volumes/Drobo5D02/Backup/itsmetommy.com

MAC — Setup cron

Note: My iMac is always on, so this isn’t a problem for me. Obviously you may need to revisit the timing or method if your computer is not always on and connected to the internet.

Run everyday at 1am.

crontab -e
0 1 * * * /usr/bin/rsync -hva -e ssh --delete  tommy@itsmetommy.com:/home/tommy/backup/itsmetommy.com/ /Volumes/Drobo5D02/Backup/itsmetommy.com > /dev/null

The above setup works, but I really only want to keep the last two backups of both the .sql and .tar.gz files, otherwise I’d run out of space.

CentOS — only keep the last two backups

How to run it manually.

cd /home/tommy/backup/itsmetommy.com; ls -t | grep sql | tail -n +3 | xargs rm; ls -t | grep tar | tail -n +3 | xargs rm

CentOS — Setup cron

crontab -e
@weekly cd /home/tommy/backup/itsmetommy.com && /bin/ls -t | /bin/grep sql | /usr/bin/tail -n +3 | /usr/bin/xargs /bin/rm
@weekly cd /home/tommy/backup/itsmetommy.com && /bin/ls -t | /bin/grep tar | /usr/bin/tail -n +3 | /usr/bin/xargs /bin/rm

WordPress Google Font with Child Theme

I choose Open Sans as my font for my site (as of writing this post). Now that I’ve created a child theme, I want to change the font. To do this, we will be working with our style.css and functions.php files within our child theme folder.

Update functions.php

function google_fonts() {
 $query_args = array(
 'family' => 'Open+Sans',
 'subset' => 'latin,latin-ext',
 );
 wp_register_style( 'google_fonts', add_query_arg( $query_args, "//fonts.googleapis.com/css" ), array(), null );
 }
add_action('wp_enqueue_scripts', 'google_fonts');

Update style.css

/* google font */
ul li {
 font-family: open Sans, sans-serif;
}

p {
 margin: 0 0 20px;
 font-family: open Sans, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: open sans, sans-serif;
}

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph

WordPress prismjs with Child Theme

  • Step 1: Go to http://prismjs.com/download.html
  • Step 2: Select your theme and languages
  • Step 3: Download JS and CSS files (bottom of the page)
  • Step 4: Upload files into child theme folder
  • Step 5: Update funtions.php with the below code
  • Step 6: Apply css <pre> and <code> class (see below examples)
<?php

// Function to add prism.css and prism.js to the site
function add_prism() {
// Register prism.css file
wp_register_style(
'prismCSS', // handle name for the style so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
);
// Register prism.js file
wp_register_script(
'prismJS', // handle name for the script so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
);
// Enqueue the registered style and script files
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

?>

I ended up having to update the background color to match the prismjs color, along with the paragraph margin spacing within the child-theme style.css file.

/* Update color to match prismjs background */
code,
        hr {
                background-color: #272822 !important; /* Make sure color schemes don't affect to print */
        }

p {
        margin: 0 0 20px;
}
Examples

javascript

input

<pre class="line-numbers"><code class="language-javascript">var myObject = {
property1: "something",
property2: 5,
property3: true
};</code></pre>

output

var myObject = {
property1: "something",
property2: 5,
property3: true
};

bash

input

<pre class="line-numbers"><code class="language-bash">#!/bin/bash 
count=99 
if [ $count -eq 100 ] 
then   
	echo "Count is 100" 
else   
	echo "Count is not 100" 
fi
</code></pre>

output

#!/bin/bash 
count=99 
if [ $count -eq 100 ] 
then 
 echo "Count is 100" 
else 
 echo "Count is not 100" 
fi

html

input

<pre class="line-numbers"><code class="language-markup">&lt;img src="/images/itsmetommy.png"&gt;</code></pre>

output

<img src="/images/itsmetommy.png">

css

input

<pre class="line-numbers"><code class="language-css">pre {
 border: 1px solid #d1d1d1;
 font-size: 16px;
 font-size: 1rem;
 line-height: 1.3125;
 margin: 0 0 1.75em;
 max-width: 100%;
 overflow: auto;
 padding: 1.75em;
 white-space: pre;
 white-space: pre-wrap;
 word-wrap: break-word;
 background: #272822;
 color: #f8f8f2;
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}</code></pre>

output

pre {
 border: 1px solid #d1d1d1;
 font-size: 16px;
 font-size: 1rem;
 line-height: 1.3125;
 margin: 0 0 1.75em;
 max-width: 100%;
 overflow: auto;
 padding: 1.75em;
 white-space: pre;
 white-space: pre-wrap;
 word-wrap: break-word;
 background: #272822;
 color: #f8f8f2;
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
}

php

input

<pre class="line-numbers"><code class="language-php">&lt;?php
phpinfo();
?&gt;
</code></pre>

output

<?php
phpinfo();
?>