Dave Olverson


December 12, 2012

It’s Not That Vain: Make a Personal Website

Note: This project requires some web/technical know-how.  I have tried to make it as straightforward as possible and I strongly recommend taking on this project as gaining a base-level of technical know-how is a great asset, but if this is too much for you, I still recommend finding someone who IS web-savvy to help you as creating a personal website is important.

It seems natural that the first project I post about is the creation of a personal website, since I just completed my own!  Getting a “YourName.com” address is more than just an annoying way to show yourself off to friends.  I stumbled across Shane Garrison’s post on why you should own yourname.com and agreed with most of the reasons. I especially like the idea of controlling the content that appears when people search for you. And as humans move more of our daily functions online, a personal website is only going to become more important.

Side note: in other “controlling content” news, I am still trying to have some of the less flattering images of me that pop up when you google image search my name, removed.

So let’s do this.  Let’s create a personal website for you.  First of all, let’s look at what it will cost:

  • Money: $12 per year for domain registration + maybe a couple bucks per month for hosting (via Amazon Web ServicesTotal: ~$40/year
  • Time: This depends on how much you want to put into your design.  I will cover how I went about designing my site in a later post.

That’s it!  So how did I do it?  Here are the steps:

  1. Purchase a domain through eNom.com (or your preferred site).  If yourname.com isn’t available, try adding a middle initial.
  2. Sign up for Google Apps.  When I set my site up, you could easily sign up for a free account (which included domain management) at www.google.com/a.  However, they have since ended the “free” version of it, or so it seemed.  FEAR NOT!  There is a workaround for the free version.  Just follow the steps in this video.
  3. Connect your domain to Google Apps - when you sign into Google Apps, on the top bar, click on “Domain Settings”, then below that “Domain Names” and right below that is a button that says “Add a domain or domain alias”.  Go through the process that comes up.  If you are having issues, here is the Google Help document.

Great!  You have now secured your domain and set it up!  You can even set up e-mail such that [anything]@yourname.com forwards to your regular e-mail address. So for instance, you could send me an e-mail at iloveyourblog@daveolverson.com and it will come to me, even though I never set up that e-mail address.  Here’s how to do it.

Now before we get into hosting your actual site (where the files actually live), I wanted to discuss a few options. Originally, I set up an Apache server on my home computer (basically, that just means when anyone accessed my website, they would be pulling it from my personal computer instead of a server somewhere).  I did this because it was free to do.  However, the problems with it are a) it is slow, b) when I turn my computer off, my website goes down, c) I can’t update my website easily from other computers.

My friend and web guru, Mike Hearn suggested I move to Amazon Web Services, as the cost for the amount of traffic I will be getting is minimal.  So, with that, back to the setup:

  1. Sign up for Amazon Web Services - The signup is free (actually, when you put your credit card in, they may charge you $1 to confirm that it is real).  Then, in the AWS Management Console (top-right drop down menu), activate the services you need.
    1. S3 - this is where you will actually place the files.  You have to create a bucket, name it “yourname.com”, upload your html files (again, I will cover the creation of the actual site in a later post), and then right-click each one and click “Make Public”.  The last step is right-clicking your bucket in the left menu and choosing “Properties”, then in the bottom window that pops up, click on the “Website Tab” - check “Enabled” and put “index.html” or whatever you want your main page to be in “Index Document” and save!  Be sure to copy the link that is at the very bottom for the next step.
    2. Cloudfront - This is the service that copies your website to servers all over the world!  You will always have backups and your site will never go down.  This is an easy step.  Just go to Cloudfront, “Create Distribution” and insert the address that you copied from the S3 step.  Save it and then select your new distribution.  At the top, click distribution settings, and copy the “Domain Name” that comes up.
    3. Route 53 - This is the service that will enable anyone visiting yourname.com to see the site you just uploaded to Amazon.  We are just connecting the dots here.  This one can be a bit tricky, so be forewarned.  First, “Create Hosted Zone” as “YourName.com” (no www at the beginning).  This will automatically create two entries or “Record Sets” - don’t change those.  Then you have to click “Create Record Set” a few times and enter info to get the following to show up (we will go over the A type server in a moment):
  1. Connecting eNom - Sign into your eNom account, go to yourname.com and look for “Set Nameservers”.  Remember those numbers that were created in Route 53 under the “Type NS”?  Copy those four nameserver addresses over to this account and save.
  2. Connecting Google Apps to Route 53 - Go back to google apps > “Domain Settings” > “Domain Names” and click the link to redirect yourname.com to www.yourname.com. On the next screen, type in “www” and continue.  Then, make sure to copy the IP values and put them into Cloudfront as an A Type Server as shown above and save that.
  3. That’s it!  Now you just have to wait (up to 72 hours, but usually not nearly that long) for everything to update.  Assuming you uploaded working html files to S3 and made them public, you should be good to go!  If there is an issue, you can usually pinpoint it by checking if your site works using the S3 url that was generated, the Cloudfront url, and yourname.com - that way you can see which one(s) aren’t working and pinpoint the problem.

That was a longer post than I expected it to be, but hopefully that gets you through the ENTIRE process.  Feel free to post any questions you may have and I will try to answer them.  Also, if you are stuck, Googling for answers is always helpful!

Thanks again to Mike Hearn for coaching me through much of this process!

Share On Twitter Share On Facebook Share On StumbleUpon Share On LinkedIn Share On Tumblr Share On Reddit
comments powered by Disqus
Page 1 of 1