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.
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
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:
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:
Deny from all
<Files ~ "^\.git">
Deny from all
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.
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:
This will pull your changes from the remote server to your web server. Refresh your browser to see the changes.