Apache and Jekyll


A few people have expressed interest in learning how I setup this website. In this post, I will show you how I setup and manage this site, which is powered by Jekyll.

I built this website because I wanted my own platform to learn web development, a topic that has always interested me. First, I built a custom Ubuntu server, which was a project in itself. I can write a post about what I learned and resources I used to build my server in a future post if there is interest.

Install Apache

First, install the apache web server, which manages sending your web site’s files to the internet.

$ sudo apt-get install apache2

Execute the following command to start the apache server.

$ sudo service apache2 start

Since Apache runs as a service, it will automatically start when the computer boots.

Go to localhost or your server’s LAN IP in your web browser and verify that you see Apache’s default page, shown below.

Apache's Default Page

The default web directory location is /var/www/, which contains one file, index.html, which provides your website’s content.

Make site visible to everyone

Modify your router’s port forwarding settings to forward port 80 to your server’s (static) IP. This will make your server (and ultimately Apache) visible to the WAN–anyone trying to access your website. Verify that this works by going to your public IP in a web browser.

What’s Next?

My next plan was to learn HTML5 and CSS3 and build my site from scratch. While Googling for resources, I found many sites that promised to provide an easy way to build a website, with minimal coding requirements. Unfortunately, I didn’t want to be removed from the code, so this wasn’t the solution I was seeking.

Jekyll

I later discovered Jekyll, a service that creates websites by using configuration files and posts, written in markdown syntax. People have created many beautiful Jekyll themes for use, and I decided to use the Pixyll theme, since I am a fan of its simplicity.

It is very easy to use Jekyll with Github Pages, a free hosting service that gives Github’s users a http://username.github.io domain. Unfortunately, this option didn’t appeal to me, since I wanted to have the ability to separate my Jekyll blog from anything else I wanted to host on my website.

My solution accomplishes this; Jekyll can generate my blog for me, and I am able to add subdirectories in my web directory to host things are unrelated to my blog, and allow me to practice coding sites from scratch.

Installation

$ sudo apt-get install rubygems
$ gem install jekyll

After downloading a theme, cd into its directory and run the following to generate the website for the first time. Please note that this command will delete everything in your web directory (i.e. /var/www/)!

$ cd /path/to/jekyll/blog/
$ sudo jekyll build -d /var/www/

(thanks, Mitch, for the correction!)

Go to localhost or your server’s IP in your web browser and verify that you see the new Jekyll page (and not Apache’s default page).

Automatic Regeneration

Append the following line to /etc/rc.local, which is a script that runs after every boot.

$ sudo vim /etc/rc.local

...
/usr/local/bin/jekyll build --watch -s [Jekyll directory] -d /var/www/christopherrung.com

This line will update the Jekyll site located in the directory specified after the -s flag, generate the files, and output them to the destination, specified by the -d flag. I store my Jekyll directory in ~/Documents/website/, and the destination is the web directory, /var/www/christopherrung.com.

If anything is modified in the Jekyll directory, it will automatically regenerate the files and update your website (enabled through use of the --watch flag). I use Cyberduck, my SFTP client of choice, to update my site by adding files to my Jekyll directory through its interface. I plan to sync this directory with Dropbox later to make updating my site even easier.

Update - 4/6/16

Sometime between writing this post and now, I have been updating my site with Dropbox. I also found a service here that I have adapted and posted below. Create /etc/init/jekyll.conf with the following contents, and run the service with

$ start jekyll

400: Invalid request

I hope you enjoyed this post, and, as always, please let me know if you have any questions.