Joshua Kettlewell | Projects

Joshua Kettlewell

Ph.D Student,
Singapore University
of Technology and Design

How I built this site

So if you're reading this then it means that this website is finally online!

[example of the code for making the front page]

I've been meaning to build a website for YEARS... it just seems to be one of those things that everyone wants to do but never gets round to. I first started one when I first went to university but never got past index.html mostly due to my work with BUMMIT taking up most of my free time. Then after finishing my Masters and having a little time before I moved to Singapore I started doing a little more programming in my free time again. I wrote a bullet-storm game in Java using this guide by thechernoproject, and also an almost complete personal site. However - it was more of the standard academic page with contacts, publications, interest and nothing else. As I was nearly complete, I realised what I made wasnt really what I wanted, which was somewhere I could show off projects I had been working on and store useful code that I had written. So I decided to scrap most of the CSS and HTML that I had down to do a rewrite. But once again, life got in the way and I moved to singapore before I could finish...

Now, coming towards the end of my PhD, this page should finally be online. About time too.

"Why don't I just use wordpress"

My friend asked me this after I showed him the first draft of this site (which was rather garish as I had been debugging some of the pading areas by using different garish background colours in each div tag). Honestly - I hadn't even considered it as an option. I'd always just thought that if I was going to have a site then I was going to make the site. After quite a while of building I'm not sure if my opinion has changed - its taken a little time to make as I had not written CSS, HTML or Javascript in a long while. I'm not sure if it looks as nice as a premade template which I could have filled out in an afternoon and saved myself a lot of effort. But, I've certainly learnt a lot more code and I do get proudly say that I built the site myself, which thats probably better in the long term.
I also want to ability to add content at will as I start new projects, and I think this method should give me more freedom to do this. However, as I write content I'm now unsure if I should be using a content manager instead of writing everything directly into html.

Code and setup

So the code for the site is available here. I am frequently updating the git to and pulling onto the hosting server instead of uploading directly. I'm aware this probably isn't an elegant solution - but it does have the advantage of allowing me to go to an earlier edition incase I make some disastrous changes that break everything (probably would probably be in the javascript).

To allow the articles to sort via catagory and display nicely on the page I used the isotope plugin which is available here. Its very easy to get working using the documantation on the site. The jist of it is that you may easily create a new element which will be auto-positioned for in a grid which you define on the page. You can then tag each element to allow it to be sorted into a catagory. These elements dont have to all be the same size as the javascript will mosaic them quite neatly if they are different sizes, but I found it made my page look a little cleaner when every article link was the same size.

The domain name was purchased through namecheap and the server is from digital ocean, both were super simple to set up and had lots of prompts on the site to make sure I knew what I was doing such as this one which I used. I would hugely advise checking out the last link if you are also planning to make a site.

I would like so say a huge thankyou too DSA from dsa.tech for the recommendation on the hosting and ample help with the apache commands to get everything up and running.

So lets look briefly at the commands to set up the site. Bear in mind that I've named this site ketts.tech so thats the name you should replace if you are using these instructions to put up your own site.

Assuming you've already purchase the domain name, and the have the server that will host the site you now have to connected them. This should be easy using the IP address that should have been emailed to you - and digital ocean holds your hand in this process to connect the domain name to the server. With that done we then first SSH into the server from our local machine which should be as easy as ssh root@ketts.tech . Second; update the password on the site from the default (the default password will have been emailed to you). You're now running as root and you'll need to add a new user: adduser NEWUSERNAME then give that user sudo privilages using usermod -aG sudo NEWUSERNAME . There, done. That wasn't so bad.

Now, in a seperate terminal window, you may ssh into the server as this new user and follow the instructions below:

  • ssh NEWUSERNAME@ketts.tech , too SSH into the server
  • sudo ufw app list To start allowing general traffic to contact the site
  • sudo ufw allow OpenSSH
  • sudo ufw enable
  • sudo ufw status check everything is OK
  • sudo ufw allow http
  • sudo ufw allow https
  • sudo ufw status again, check everything is OK
  • cd /var sudo apt-get install apache2 install apache
  • cd www/ sudo git clone https://github.com/jketts/ketts.tech.git clone the website from github
  • cd ketts.tech/ sudo git pull
  • cd /etc/apache2 Now go to apache
  • sudo nano 000-default.conf and edit the config - to include the git name
  • sudo chmod -R 755 /var/www
  • sudo a2ensite 000-default.conf
  • sudo service apache2 reload quickly restart apache, the website should now be live!
  • Now, if you're like me you may be contantly wanting to fiddle with bits of the site. To do this, just ssh back in, navigate to the correct directory using cd var/www/ketts.tech then use sudo git pull to update .
  • Sometimes it doesn't want to update as the OS believes an edit has been made to the git files. To ignore this (as we only ever want to pull from the git to the server) sudo git stash and then sudo git pull again.

Site Management

I'm currently using the last two steps to update the site regularly, by pushing to the git, then pulling onto the server. However, I am unsure how this method will scale in the future. I think the likely outcome is that I will stop making edits regularly soon, and then just add one article at a time. But I also may benifit for have some method to manage content on the site.
I'm not sure if such a system would restrict what I can do on the site though, as I would like to has some interactive parts soon which may involve python.

Overall though, I have a site online, so I have to call this project a success.