
This blog is [built on Jekyll](https://veerasundar.com/blog/moving-from-wordpress-to-jekyll/) and served by Nginx. I chose Jekyll so that I could gain some performance boost from the static, pre-generated blog content rather than serving every blog request from a database. Nginx was the obvious choice because it's the efficient HTTP server out there.

However, every time I [check my pages in Pagespeed](https://developers.google.com/speed/pagespeed/insights/?url=veerasundar.com%2Fblog&tab=desktop), it complains that the static assets are not optimized and I should **Leverage browser caching**. This is because I missed to set Expires header in my Nginx configuration. Turns out it is very simple to do.

## Nginx configuration to set Expires header for images and static assets

Assuming you are using a Unix flavoured operating system (Ubuntu, in my case);

1. Go to `/etc/nginx/sites-available`.
2. Open your site configuration in an editor. For example, `vi veerasundar.com` (Use sudo if necessary).
3. In the server configuration, add the code to set Expires header if an request is made to a static file. Here's my complete configuration for this server.

```text
server {

        listen   80;
        server_name veerasundar.com;

        access_log /location/of/access.log;
        error_log /location/of/error.log;

        location / {

                        root   /location/of/www;
                        index  index.html index.htm;

                        if ($request_uri ~* ".(ico|css|js|gif|jpe?g|png)$") {
                                        expires 30d;
                                        access_log off;
                                        add_header Pragma public;
                                        add_header Cache-Control "public";
                                        break;
                                }

                        }

            }

```

After making the changes, save the file and restart nginx - `sudo /etc/init.d/nginx restart`.

Now your static files are served with **Expires** header and will be cached by the browser.


How to set Expires header for static assets in Nginx


As a web developer, often I am in a need of quickly putting together a static website to try out ideas. My requirements are simple: create some html/css files in my project folder, hit the browser, and see my files rendered there.

Using an Apache / Nginx server for this menial task was an overkill. So, I have been using the simple one line server: `python -m SimpleHTTPServer` in Ubuntu/Mac. And, when I'm in Windows, [mongoose](http://cesanta.com/mongoose.shtml) was my go to tool to serve files from any folder.

But, lately, I have started using [Grunt](http://gruntjs.com/) for the same purpose. Apart from providing the tools for serving static files, grunt can also compile my less files to CSS and can do it as and when I make changes to the less files. Automation FTW!

So, here's the basic configuration that I'm following for my grunt setup so that you can also get started with grunt.

## Basic setup to server static files and auto compile less to CSS with Grunt

Before you start, you need to have **Node** installed in your system. Then follow the steps blow.

1. If you do not have a project folder already, you can get started by simply cloning this one: `git clone https://github.com/vraa/grunt-template.git`.
2. If you already have a project folder, just copy the `package.json` and `Gruntfile.js` files to your project's root folder.
3. Once you have project folder setup, in a command line, run `npm install` from your project root. This will install all the dependencies in a folder named _node_modules_.
4. Next, to start serving this folder content, run `grunt connect`. Then you can access this site using http://localhost:9090/
5. If you want to also compile less files automatically, just open a new terminal and run the command `grunt watch` from your project root. Keep the server running in another terminal. After this, as soon as you make changes your less files, it will be automatically combined into corresponding css files. viola!

## How does this work?

In order to put together this simple setup, we are using three grunt plugins.

1. grunt-contrib-connect : the server
2. grunt-contrib-less : the less compiler
3. grunt-contrib-watch : to auto compile less to css as soon as you make changes to it.

if you look at the `package.json` file, you can see that these dependencies are added along with the core `grunt` dependency.

### package.json

```javascript
{
  "name": "grunt-template",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-connect": "^0.7.1",
    "grunt-contrib-less": "^0.11.1",
    "grunt-contrib-watch": "~0.4.0"
  }
}
```

When you do `npm install`, node will download and install all the modules to your local *node_modules* folder.

Once you have all the dependencies ready, then you need to tell Grunt how to run these. This you can do via `Gruntfile.js`.

### Gruntfile.js
```javascript
module.exports = function(grunt){

	grunt.initConfig({
		less : {
			dist : {
				files : {
					'css/main.css' : 'css/main.less'
				}
			}
		},
		watch : {
			css : {
				files : '**/*.less',
				tasks : ['less']
			}
		},
		connect: {
			server : {
				options : {
					port : 9090,
					keepalive : true
				}
			},
			keepalive : true
		}
	});

	grunt.loadNpmTasks('grunt-contrib-connect');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-less');
};
```

As you can see in the above file, we are telling

1. *less* plugin to compile *css/main.less* file to *css/main.css* file.
2. *watch* plugin to monitor changes for any file that ends with *.less extension and when there are changes, run the task 'less' (which will compile less to css).
3. Finally, *connect* to start a server at port 9090 and server to any request. We also tell the server not to die and until we kill it.

With this simple setup, next time when I need a static website, all I have to do is:

1. git clone https://github.com/vraa/grunt-template.git
2. npm install
3. grunt watch (*in one terminal*)
4. grunt connect (*in a second terminal*)







```


Basic Setup to get started with grunt as a server and less compiler


So, you have installed XAMPP on windows, [changed its server port][1] to a different number other than 80 and [changed the MySQL *root* password][2] to a more secure one. Now its the time to create some HTML files that will be served by XAMPP server.

[1]: https://veerasundar.com/blog/how-to-change-xampp-server-port "How to change XAMPP server port?"
[2]: https://veerasundar.com/blog/how-to-change-the-root-password-for-mysql-in-xampp "How to change the 'Ëœroot' password for MySQL in XAMPP?"

By default, XAMPP serves any file that is located under the directory *[xampp\_installation\_folder]/htdocs, * which means that you have to copy all your HTML/PHP files inside this directory. But what if you maintain a different folder for all your projects files and you want XAMPP to serve them too along with _htdocs_?

Lets make XAMPP to do this.

1.  Open the file *[xamp\_installation\_folder]/apache/conf/httpd.conf* in any text editor.
2.  Copy below lines after the _htdocs _ element after changing the directory to your own folder.

            Options Indexes FollowSymLinks Includes ExecCGI
            AllowOverride All
            Order allow,deny
            Allow from all

3.  Then search for this string: . Inside that element, add a new alias as followed:
    Alias /yoursite/ "C:/path/to/your/folder/yoursite/"

4.  Save the file and restart the XAMPP server.

After this, if you have a website named 'Ëœyoursite' inside the folder *'Ëœc:/path/to/your/folder'* you can access it directly by using the URL: _http://localhost:8080/yoursite/ _(assuming you have [changed XAMPP port][3] to 8080).

[3]: https://veerasundar.com/blog/how-to-change-xampp-server-port "Change XAMPP server port"


Making XAMPP to serve any directory outside htdocs


Recently I got hold of an empty Rackspace server in which we have installed Ubuntu 11.04 Natty Narwhal version. My next step was to setup the LAMP stack in that server to run our PHP site.

First I tried to install XAMPP for Linux. But unfortunately, it failed because XAMPP only supports 32 bit operating system and ours was 64. I didn't want to spend much time on fixing that issue, so I moved to setup the LAMP stack by other means.

Here's what I did (after googling/referring a lot):

## 1.Install lamp-server

1.  **sudo apt-get install tasksel **[installs the tasksel that helps you to install multiple packages as a single task]
2.  **sudo tasksel install lamp-server **[it will install the lamp stack in location */etc/*]
3.  *http://yourdomain.com *should work now.

## 2. Configure PHP Curl module

1.  **sudo apt-get install php5-curl **[downloads and installs curl module]
2.  **sudo /etc/init.d/apache2 restart** [restarts server for the changes to take effect]

## 3. Install phpmyadmin

1.  **sudo apt-get update **[updates the packages repository. When I first tried to install phpmyadmin without updating, it complained that phpmyadmin isn't found.]
2.  **sudo apt-get install phpmyadmin **[will trigger a installation wizard]
3.  Choose **apache2 **for the **server configuration** and choose **no **for **database configuration **(since we have already installed database).
4.  **sudo cp /etc/phpmyadmin/apache.conf /etc/apache2/conf.d **[copies the server configuration so that it is accessible via web]
5.  **sudo /etc/init.d/apache2 restart**
6.  *http://yourdomain.com/phpmyadmin* should work now.

That's it. Now our server is ready for serving the traffic. Place your website files under **/var/www/ **which will be served to the world.


Easy way for setting up the LAMP stack in Ubuntu Linux command line


![git logo][1]I was a long time Subversion user then. So, when I got introduced to Git few months back, I was \*\*really\*\* confused. First of all, I couldn't visualize some of the concepts that Git talked about.

[1]: https://veerasundar.com/img/2011/06/git-logo.png "git-logo"

But then, as I started using Git in my day-to-day work, it got much easy to use and understand. Now there isn't a single day (except some of the weekends!) in which I don' t use a single Git command. It became an inseparable tool at my work.

So, just thought of writing my learning as a Git tutorial series to help a bit my fellow developers who want to switch over to Git. Let' start.

## Say Hello to Git

First of all, if you are coming from a Subversion/CVS background - mark my words - **forget everything you learned about version controlling**. Because Git has a completely different approach to version controlling. Lets see how it differs from other systems.

Git is distributed. Which means, when you clone a Git repo, you'll get a your own copy of that repo to work with in your local machine. In Git, you get your own code base, you make changes, commit as many times as you want without the fear of polluting the central repo and once you are confident push the code to central repository.

Before diving too much further, let's look at this awesome diagram which explains the Git workflow (thanks to [osteele.com][2], I have a printout of this pasted at my desk).

[2]: http://osteele.com

![git workflow][3]

[3]: https://veerasundar.com/img/2011/06/git.png "git"

As you can see in the above diagram, in Git, code lives in 4 different places

- **_remote repository _**- think of it as a Github repository or a remote server hosted in your company. As the name suggests, this code base does not live your local machine and You don't talk with remote repository often. Only when you pull a code initially and pushing the changes when you are done with it.
- **\*local repository** - \*when you clone a remote Git repo / or create a new repo, the code base is created here in the local repository. All commits you do will come here first. This lives in your local machine.
- **_index _**- one of the most confusing thing you'll ever hear in Git. This is something like a intermediate place between your working copy of code and your local repository. It's like a _staging area_ for your code. You use it to stage which files you want to track & commit. In my next post about *[My Git workflow][4] *you'll see how index is used. This code base too, lives in your local machine.
- **_workspace _**- it's your working directory where you create/edit/delete your files. This code resides in your local machine.

[4]: https://veerasundar.com/blog/git-tutorial-my-git-work-flow "Git tutorial - my git workflow"

Hope you get the basic concepts of Git. It is very important to understand it well before you start using Git. In my next post, I'll be writing about [my Git workflow][4]. Till then, feel free to [setup your Git environment][5].

[5]: http://help.github.com/win-set-up-git/ "This guide will walk you through the basics and explain a little bit about how everything works along the way."


Git Tutorial - Getting Started


If you've installed both [XAMPP][1] and Skype in you system and wondering why the things are not going well when you run these two applications simultaneously, then you are not alone. There are a good number of folks who are complaining about this conflict between XAMPP and Skype. The reason behind this is simple - both Skype and XAMPP by default uses the same port number 80. So, when you start one application first and the other application later, there will be port conflict and the second application will fail to work properly.

[1]: https://veerasundar.com/blog/xampp-apache-mysql-php-perl-environment-in-windows "XAMPP - Apache, MySQL, PHP, Perl environment in Windows"

So, how to fix it? Easy. Change the port number of XAMPP server or disable the usage of port 80 in Skype. To do the first one you can check out my earlier post [How to change XAMPP server port][2]. To disable the port 80 in Skype, follow below steps:

[2]: https://veerasundar.com/blog/how-to-change-xampp-server-port "How to change XAMPP server port?"

1.  Start Skype.
2.  Go to **Tools >> Options >> Connections**.
3.  Uncheck the use of Port 80 as an alternative port.

And, you are done!


XAMPP conflicts with the Skype port


Follow these steps to change the XAMPP server port number:

1.  Stop the XAMPP server, if it is running already.
2.  Open the file **[XAMPP Installation Folder]/apache/conf/httpd.conf**.
3.  Now search for the string `Listen 80` (I'm assuming that your XAMPP was using the port 80. Otherwise, just search for the string 'Listen'). This is the port number which XAMPP uses. Change this 80 to any other number which you prefer.
4.  Then search for the string `ServerName` and update the port number there also.
5.  Now save and re-start XAMPP server and you are done.

## Why do we need to change the port number?

Because, these days, it is very common that a web developer needs to have multiple web servers running, all at the same time. For example, an XAMPP server can be used to run the local WordPress blog, while a JBoss server also needs to be up for testing a java web applications. In such scenarios, if two or more servers are trying to use the same port number, then the late comer will fail to get the port. So, it becomes necessary to change any one server's port number to avoid the conflict.


#server (7)