Creating your own dynamic website

By: on June 29, 2020

In my previous post, I described how beginners can set up a static website. This follow-on post covers setting up a dynamic website. This is a website whose content isn’t always the same.

These are slightly harder to set up, but creating one yourself can still be done in a matter of hours. This post is intended to be a guide for beginners, which can get anyone from having nothing to having their own dynamic website in just an hour or two.

Disclaimer: Your website will be fully public. You will have to pay ~$10 for your website each year. You may need basic AWS knowledge to follow this post. I have little experience in setting up websites, so this is not a guide for experts; this is a guide for interested people, who have a few hours to kill, and want to set up a website of their own without using pre-existing frameworks (which make this much easier, and is the method I would recommend for setting up any website you want to be used).

The steps we’re going to take are:

1. Buy a domain name. This is where your website will be (e.g. google.com is a domain)
2. Create an AWS account
3. Create an AWS instance. This is the server that will run your website
4. Configure your AWS instance. Configure your instance to run your website
5. Write your website in PHP. Define the content of your website
6. Put your PHP code onto your instance. So that your instance can run your website
7. Set up routing. So that your website can be accessed via your chosen address

So now, more detail on each step:

Steps 1 & 2

Steps 1 and 2 are identical to the steps you would take when setting up a static website. More details on these steps can be found in my previous post here. The same AWS account and domain name can be used for a dynamic website even if you are already using it for a static website, so don’t worry about re-using it.

Step 3 – Create an AWS instance

Log into AWS and go to the region you want your website to be hosted in (the button in the top right controls this). The region you choose doesn’t matter too much, but it’s best to choose a region close to where you think website will mainly be called from so that your traffic doesn’t have to travel as far.

Now, you’ll want to set up a new instance in this region. This is the server that will be running your website. To set this up click on ‘Services’ in the top left corner of the page, go to ‘EC2’ and then go to ‘Instances’ (on the right-hand side menu). Now choose ‘Launch Instance’.

Where to find EC2
Luanch instance button

When setting up your instance, a lot can be left as default, but some choices must be made. These are the non-default choices I have made; there are other ways to set up a dynamic website (e.g. using the instance type amazon Linux), but to make sure all the steps in this blog work for you I recommend matching my choices:

  • For the future steps, you will need to be using ubuntu, so pick an ubuntu image as your base image. I chose Ubuntu Server 18.04.
  • Choose the free tier one (this is small, so won’t be able to hold a lot of information or handle as much traffic, but it’s free!)
  • When configuring security groups, change the source to ‘My IP’
  • When launching the instance, create a key pair to use to secure your instance. Make sure you save this to your computer!

Instance type to choose - ubuntu 18.04
Instance size to choose - small, free tier

You may also want to change your profile settings to get email alerts if you ever exceed the free usage – this isn’t necessary but it’s probably worthwhile. You’ll be able to do this by clicking on ‘Create billing alerts’ on your screen after you launch.

Get notified of charges

Because you have configured your instance to only allow access from your IP, and to require the key you created to allow SSH access, you can now only SSH into your instance from your IP using that key. So, to SSH into your box you have to complete the steps below:

  • Change the permissions of your key file to make it read only:
    chmod 400
  • Get the public IP of your instance from the instances overview on AWS, and log in using a command like so
    ssh ubuntu@ -i

    . So, if my public ip was 12.34.56.789, and I saved my key on my Desktop, and called the file

    my-key-file.pem

    I would run the command:

    ssh ubuntu@12.34.56.789 -i ~/Desktop/my-key-file.pem
  • If you’d like more detailed instructions, these can be found by right-clicking on your instance and selecting ‘Connect’.

If you timeout when you try to ssh into your instance, check the inbound rules of your instance. Make sure the public IP that your computer is currently showing is the one used in your inbound rules (if you are connected to a VPN/were connected to a VPN when setting up your instance the public IP in your rules may not be the same as the one your box is currently showing). These inbound rules can be edited by going to the ‘Description’ of your instance, then clicking on the launch wizard rules link in the ‘Security Groups’ field, then the ‘Inbound rules’ tab on that page.

Step 4 – Configure your AWS instance

Now that you have an instance to run your website, you need to configure it to be able to do this. To do this you’ll need to install LAMP server. This is a tool to run a webpage, which I am using here. You’ll also need to alter your routing rules to allow public access to your website so that other people can see it (remember that with your current settings, the only access to your box is via ssh from your IP, using your key).

To set up a LAMP server on ubuntu, ssh into your instance and update its packages:

sudo apt-get update

Then install LAMP server (the ‘^’ is part of the command):

sudo apt-get install lamp-server^

Now you need to allow public access to your instance, so that your website is publicly accessibly. To allow this alter your inbound rules. These can be edited by going to the ‘Description’ of your instance, then the launch wizard rules link in your ‘Security Groups’ field, then the ‘Inbound rules’ tab on that page.

The inbound routing rules you want to add are:

  • HTTP on port 80 from 0.0.0.0/0 (for IPv4) and ::/0 (for IPv6)
  • HTTPS on port 443 from 0.0.0.0/0 (for IPv4) and ::/0 (for IPv6)

Altering inbound rules
Inbound rules to set up

You have now allowed public access to your instance via HTTP/HTTPS. This means the public could be able to access parts of your instance if they had some hacking skills. Be careful about putting anything you are not OK with the world seeing onto your instance.

To check that both above steps have worked, try to reach your website at the public DNS of your instance (which AWS will show you). You should see a webpage that says “It works!”. If you see a timeout instead, make sure your rules are set up to allow access.

At this point, it’s probably also worth backing up your instance. This means that if you need to destroy it, next time you’ll be able to recreate it with this setup already in place, to reduce the work you have to do! You can back up your instance by right clicking on your instance, going to “Image”, and then clicking “Create Image”.

Step 5 – Write your website in PHP

Now, you have to write your website. This can be written in several ways. I’m going to write my website in PHP, which is a common language used for dynamic websites. I want a simple website, which will take an input name, and then say hello. So, I will need two PHP files:

index.php

<form action="greet_user.php" method="post">Name:
<input name="name" type="text" /><input type="submit" value="Submit" /></form><a href="index.php">Reset</a>

greet_user.php

&nbsp;

<a href="index.php">Reset</a>

You just have to create files that do whatever it is you want to do! There’s no need to worry about getting your website perfect at this stage though; you’ll be able to update it at any time by just updating the PHP files on your instance.

NOTE: I am taking user input here, and not carefully checking it, so this code is vulnerable to injection attacks. To see just how vulnerable, you can input

alert(“I’m insecure”)

into the Name field on this website. I’m OK with this level of vulnerability – I’m just setting up a temporary website for fun, nothing else. You should also think about possible vulnerabilities in your website when you set it up, and make sure you are OK with them.

Step 6 – Put your website onto your box

SSH onto your instance (as outlined in Step 3), and go to the folder “/var/www/html”. In that folder should be the default website (the one that we saw earlier in Step 4 that displayed the message “It works!”) in the file “index.html”. Delete that file and put your files in that folder instead. (Files can be moved from your computer onto your instance using scp. For example, if I have the file index.php on my Desktop, I could move it to my instance by running the command “sudo scp -i ~/Desktop/index.html ubuntu@:/var/www/html” from my computer. If you see permissions errors when running that command, you may not have permissions to scp into the folder “/var/www/html”; if that is the case, just scp to the location “/home/ubuntu” on your instance, then move the file around on your instance.) So on my box, I now have two files in /var/www/html:

  • index.php
  • greet_user.php

To double check your website works, go to your public DNS (the one where you used to see “It works!” and check that you can see your new website there.

You might as well back up your instance again at this point. Just follow the details in Step 4 again.

Step 7 – Set up routing

Your website is now set up. But right now, it can only be accessed using your instance’s public DNS, and you probably don’t want that. I bought the domain kristahyer.com, and I want people to see my website when they go to sayhello.kristahyer.com!

So, now you need to set up routing rules so that searches for your chosen URL end up being sent to your instance.

This step isn’t one-size-fits-all, since how you can route depends on where you bought your domain from. Since I bought mine from namecheap.com, I followed these steps:

  • I logged onto my namecheap account, went to my domain list, and clicked ‘manage’ for my domain kristahyer.com. Going to ‘Advanced DNS’ under ‘HOST RECORDS’ I saw the routing rules for my domain I’d set up previously (a placeholder would be seen here if no rules have been set up).
  • I then added a new rule. This points from my chosen URL (sayhello.kristahyer.com) to the public DNS of my instance. Since I’m editing the domain kristahyer.com, the “Host” I need to specify is just “sayhello”. Your chosen URL needs to be in your domain (it needs to end in it).

Setting up dynamic DNS

I then waited for my DNS rules to take effect. namecheap warns that this can take up to 48 hours, but for me it took less than half an hour.

And that’s it. Congratulations! Your webpage should now be visible from your desired domain.

Here you can see my greeting website, visible at sayhello.kristahyer.com:

Running dynamic website

And after submitting the name “World”….

Running dynamic website with input

Now that you’re all set up, there are more steps you can take to make your webpage more advanced, and a lot more secure (which the website I just set up was not!). But this post just involves basic setup, so I’m leaving it here.

Happy websiting!

Share

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*