How to Setup a Simple Personal Website

First published on 15 April 2016, edited on 28 August 2019

A note from the author in 2019: This article was last updated over three years ago, and really isn't a good way to setup a personal website, although it will likely still work. Proceed at your own risk.


I suppose this is kind of an apt way to kick off my blog. In this post, I will attempt to show you how setup your own personal website.

Prerequisites

You will need to have the following tools installed on your server/VM as well as basic knowledge on how to use them.

  • Ubuntu or Debian. You can use another flavour of Linux/BSD/potentially OS X or Windows, you'll just likely need to adjust some of the paths
  • Apache 2
  • git

You will also need a git repository created on the service of your choice (GitHub is not a bad one).

Step 1 - Install the above software

Assuming you have a base install of Ubuntu or Debian, run the following command at the terminal:

sudo apt-get -y install apache2 git

That command will download and install Apache and git, along with any dependencies. The -y switch just bypasses the 'do you want to install n MB of packages' prompt; feel free to leave it out if you want.

Step 2 - Take ownership of the web directory

The web directory is the folder that contains all the files that make up your website. By default, this folder is 'owned' by the root user, which isn't particularly helpful. To take ownership, run the following command:"

sudo chown -R USERNAME /var/www

Where USERNAME is your username, so in my case, I'd use:

sudo chown -R jordan /var/www

This command sets the owner of the /var/www directory to the specified user. The -R switch means to apply this change recursively to any files/folders inside of /var/www.

Step 3 - Clone your git repository on your development machine

On the machine you'll be using to develop your website, clone your git respository per your git service's instructions. Once that is finished, add a file (README.md is not a bad idea if you're using GitHub) to your git repo and commit it. This file can be empty. Now, push your changes to the server.

Step 4 - Clone your git repository on the server

Now on your server, change to the /var/www/html directory:

cd /var/www/html

Then clone your git repository:

git clone http://mygitserver.ca/user/mysite.git .

Replace http://mygitserver.ca/user/mysite.git with the URL provided by your git provider. You may need to enter your credentials here. Make sure you include the dot at the end of that command.

Step 5 - Modify your Apache configuration

Open your Apache configuration file in the text editor of your choice. The following command uses the nano text editor:

sudo nano /etc/apache2/apache2.conf

At the end of the file append the following lines:

                
                <Directorymatch "^/.*/\.git+/">
                  Order deny,allow
                  Deny from all
                </Directorymatch>

                <Files ~ "^\.git">
                  Order allow,deny
                  Deny from all
                </Files>
                        

The above configuration blocks all requests to the /.git directory from the outside world. This is done to prevent others from snooping on your commit history.

Done

That's it, now you can write your website on your development machine. When you want to push your changes to the server, simply commit your code using git and then push it to the remote. Then, on the server run:

git pull

This will pull your changes from the remote server to your web server. Refresh your browser to see the changes.