Your Domain.com & Amazon Web Services powered site in 30 minutes or less
Hello there!
As an MLH Coach, I spend a lot of time at Major League Hacking Member hackathons, where we give out free .com, .net, or .org Domain.com domains with whois privacy, along with $100 of Amazon Web Services (AWS) credit to every single attendee. It’s pretty neat but one thing I see a lot is hackers having trouble getting them to work together. Domains can be fiddly, and AWS has a vast array of services, so it can be tricky to figure out where to look, and how to get everything talking to each other properly.
In this post, we’re going to work together so that AWS manages our Domain.com domain, so that we can get a static website up and running. If you have any issues following this guide, either speak to your MLH coach if you’re at a hackathon, or leave me a comment and I’ll get back to you.
First, I’m going to run through the services we’re going to use:
Domains: A domain name, simply put, is a web address, such as google.com, or mlh.io
Domain.com: Domain.com is a ‘Domain Registrar’, which is essentially a marketplace where you can buy and configure domain names. Domain.com provides MLH student hackers with free .net, .org, or .com domains as well as whois privacy at every hackathon.
AWS: Amazon Web Services is a cloud hosting platform that provides a whole host of services on the web that you can ‘rent’. This covers anything from storage space, to servers where you can host your website, to domain management tools.
DNS: DNS or ‘Domain Name System’ refers to the naming system we use for any server on the internet. We use nameservers as servers that have records on any domain, that they can give to any system that asks about them.
Route 53: Route 53 is one of the services that AWS offers. It is a DNS routing system and allows you to manage and configure your domains in the same way as a domain registrar would, but with extra bits that make working with AWS services easier — Route 53 knows about S3 sites for example, and can set up routes to an S3 hosted website with a couple of clicks, requiring much less specific detail regarding where exactly the website is than a normal domain registrar could provide.
S3: This stands for Simple Storage Service, and is another service that AWS provides. It is a cloud file hosting system that allows you to upload files into a ‘bucket’ manually or via an API, and your users can then download them or view them with the right permissions.
Now that we’ve covered those terms, let’s get cracking!
Step 1: Register a Domain Name
Firstly, we need to register a domain name at http://domain.com/mlh. Thanks to your free domain from Major League Hacking, this won’t cost a penny for your first year of registration.
I’ve decided that I want to get my-awesome-domain.net. All we need to do is go to Domain.com, search for the domain name we want, and hope that it’s available:
We’re in luck! I can get my-awesome-domain.net. Make sure you check off Add Domain Privacy so that spammers can’t grab your e-mail from Domain Whois records.
Once we’ve selected our domain, let’s hit the checkout button in the bottom right corner.
If you don’t already have an account, you’ll be asked to create one. Hit ‘create an account’. We’ll complete the account registration in a moment.
On the next page, just hit next again if you only want the domain— addons are optional and cost additional money.
Our coupons only cover 1 year of domain registration and whois privacy, so make sure to change the registration period from 2 years to 1 year in your cart if you do not yet want to pay for the second year. Enter your coupon, and you should be all set!
You’ll finally be asked to create your account and check out, so enter a super secret password here and you’re done!
Step Two: Putting our website onto AWS S3
To have our brand new domain point to our website, we’ll need to have a website first! If you’ve already visited my awesome domain then you’ll see that I’ve put a lot of effort in to it:
Okay maybe not that much effort…
Let’s make a file called index.html in your preferred text editor, and put your HTML in there. If you’re completely new to HTML, I’d recommend looking at sites like W3Schools or StudentDev.io. I’ve just put a very simple piece of code so I know that my website is working:
<h1>This is my awesome looking website!</h1>
This will come in handy later.
Now we want to log in to our AWS account. If you’re at an MLH event, you should have an email in your inbox with a link to create a new account with $100 credit. If you’re a student, but didn’t receive an e-mail or didn’t attend an MLH event, you can still request the $100 credit by signing up at http://hackp.ac/aws!
Register for an AWS account and our AWS Educate promotion to get your $100 credit, and then come back here so that we can set up our services — I’ll wait!
It may take a few hours to get the promo code for your $100 credit, but you can still use AWS in the meantime — billing is processed at the end of the month so as long as you apply the promo code before then, it will count towards your usage!
Once you’re logged into your AWS account, hit the ‘Services’ link in the top left, and search for ‘S3’. Click the link, and you’ll end up on a page that looks like this, but with no entries in the list (unless you’ve already made a bucket):
These ‘buckets’ are just spaces where you can upload files. For now, we’re going to create one that will hold our website’s HTML files. Just hit the ‘Create bucket’ button, and you’ll be faced with a dialog:
Put the full URL for your domain as the bucket name, and then hit next until you reach the end. You’ll have a brand new bucket with nothing in it, so next we’re going to upload our home page (index.html) to it:
On the next dialog, we want to make sure that the file is available for the public to read — in this case, the public means the rest of the internet.
Hit next until the operation is completed, and you’ll have a file in S3. This means that, given a link and the appropriate access rights, anybody could come and download that file (which is exactly what your web browser does when you visit a web page — it downloads a file that dictates what the browser should display, using HTML and CSS).
Next, we need to tell S3 that we plan on hosting a website. To do this, you’ll want to head back out and then click on the bucket that you’ve uploaded your file to — then, click on the Properties tab:
We want to host a static website, so click ‘Static website hosting’ and you’ll be presented with a dialog like this:
The ‘index document’ field tells AWS which page you want to load when somebody visits your site. Put index.html in that field, since that is one of the files you’ve uploaded.
The ‘error document’ file is there incase there’s an issue that stops index.html being served to visitors. I’ve also filled in the error.html field, but I didn’t upload an error.html file because of how basic my web page is — if you want to make your own error page feel free to create a version of this file. S3 doesn’t care that the file isn’t there.
Once you’ve done that, AWS S3 now knows that you want to host a website from S3, beginning with index.html
Step 3: Getting everything talking
So, we have our domain, and we have our website’s HTML and hosting service, but neither of them are aware of the other. If you visit the domain that you’ve bought right now, you won’t get anything, as it doesn’t know where the data it’s supposed to be sending back comes from.
Click on Services, and this time search for Route 53. If this is your first time using Route 53, you’ll be presented with a screen like this:
Click on the first ‘get started now’, and then on the next screen, click on ‘create hosted zone’.
In the ‘Domain Name’ section that appears, enter the domain name you’ve bought, and then click ‘Create’. It will create a ‘Hosted Zone’, with a couple of records in it.
Next, we want to create our own record that says ‘when you visit my domain, respond with our static S3 site’. To do this, click ‘Create record set’, and in the new dialog, switch ‘alias’ to yes. Click in the ‘alias target’ field that appears, and it’ll show a drop-down, with a few things in it. We want to click the ‘S3 website endpoint’ we just created:
Click create, and we’re almost there!
Now, whenever AWS is asked for my-awesome-domain.net, it’ll respond with the web page I set up in S3 earlier. The last thing we need to do is tell Domain.com that AWS is in charge.
Step 4:
We need to tell our Domain.com domain to let AWS’ Route 53 do the talking. To do that, we need to change the nameservers. A nameserver is essentially a directory of addresses. Whenever we visit mlh.io, a request is made to a nameserver that asks ‘where is MLH.io?’. The nameserver will respond with the route to that server, according to the records it has. By switching from Domain.com to AWS nameservers, we can quickly put AWS in charge of these responses.
We’ll need both our AWS and Domain.com accounts open for this. In Domain.com, log in, and then from the main dashboard, click on the ‘DomainCentral’ link. Scroll down, and click on the domain you just acquired, and then click on the ‘Nameservers’ link when it appears:
Click the ‘Use different name servers’ radio button. Now we need to get the nameservers we want to switch to. In a different tab, head back to Route 53, click on the hosted zone we just created, and you should see 3 records similar to this:
The ‘A’ type record is the record that says to respond with our S3 website. The ‘NS’ type record is the record containing all the nameservers that have information about this domain. We want to copy each value from the ‘NS’ record into our Domain.com panel — make sure to remove the full stop from the end of each address.
Once you hit save, you’re done!
It can take up to 24 hours for all the nameservers to update and start feeding back the right information, but generally it’ll happen almost immediately, or within the first half an hour. Come back and hit CMD/CTRL-Shift-R every now and then until it appears. Clearing your browser’s cache may force it to reload quicker — and CMD/CTRL-Shift-R does exactly that
Well done! You now have your very own corner of the internet, as well as a chance at the AWS and Domain.com prizes!
If you want to learn more about building applications on AWS beyond S3, check out our previous blog post about using Elastic Beanstalk: https://news.mlh.io/deploy-your-hack-in-3-steps-intro-to-aws-and-elastic-beanstalk-02-20-2015
