Deploying a Static Site with Git and Linode VPS

by AJ Meyghani

Project Files

You can click here to download the project files.

TL;DR

For the short version, scroll to the bottom.

Step-by-step

If you have not set up a server with Linode, you can follow this guide to set one up. After you set up your node, make sure that you can ssh to your server without password. That is, you should be able to do ssh [user]@[server-host] without any problem. If you have issues, you can follow this guide to set up your public and private keys for ssh authentication.

Setting up the project

First we need a repo with some static content. To do that, we need to make a folder on our local machine, add some static files, and initialize git in the folder:

on the local machine:

mkdir -p ~/Desktop/static-site && cd $_
touch index.html main.js style.css
git init

After initialing git, you should see a folder called .git

├── .git <---- contains the configurations
├── index.html
├── main.js
└── style.css

There is a file in the .git folder called config. Open the file and add the following to it:

  [remote "prod"]
    url=ssh://[user]@[server.com]/path/to/repos/mywebsite-repo

just make sure to replace [user] with your ssh username, [server.com] with your actual server, and /path/to/repos... with a folder on your remote server. Now your config file should look something like the following:

[core]
  repositoryformatversion = 0
  filemode = true
  bare = false
  logallrefupdates = true
  ignorecase = true
  precomposeunicode = true

[remote "prod"]
 url=ssh://[user]@[server.com]/path/to/repos/mywebsite-repo

The next step is to create the folder that we referenced above and create a barebone repo that is:

On the remote server

mkdir -p /path/to/repos/mywebsite-repo && cd $_ && git init --bare

Then, we need to create post-update script in the hooks folder:

On the remote server

cd /path/to/repos/mywebsite-repo/hooks && touch post-update

then open the file and add the following:

#!/bin/sh
    git --work-tree=/var/www/mywebsite.com --git-dir=/path/to/repos/mywebsite-repo checkout -f

If you notice there are two paths here:

  1. /var/www/mywebsite.com
  2. /path/to/repos/mywebsite-repo

The first path is the path to the folder that is going to host the static files. And the second path is the path that we have been working on all along. In other words, every time that we push changes, the script is going to checkout the latest code from the barebone repo and push the folder located at /var/www/mywebsite.com

The next step is to make the script executable:

chmod +x /path/to/repos/mywebsite-repo/hooks/post-update

And that's it. We can make some changes to our local project and push it to our remote with git push prod master.

TL;DR

Assuming that you have a repo and a Linode VPS, on your local copy, modify your .git/config file and add your web server as a remote:

[remote "env"]
  url=ssh://[user]@[server-host.com]/path/to/respos/my-repo

On the remote server, create a bare repo for your target, that matches the path:

mkdir -p /path/to/repos/my-repo && cd $_ && git init --bare

Create a post-update script in the hooks folder:

cd /path/to/repos/my-repo/hooks && touch post-update

Open the file and add the following:

#!/bin/sh
git --work-tree=/var/www/mywebsite.com --git-dir=/path/to/repos/my-repo checkout -f

Note: the working tree points to the folder where your files are going to be checked out. Make sure it is the correct value. The second path, is the path of the bare repo.

Make the post-update file executable by: chmod +x post-update.

Now, when you make changes locally, you can push to master and to the env: git push origin master and if you want to push to env: git push <env> master.