I needed to crank out a single-page web site for my son, to help him promote his popcorn sales for cub scouts. I decided it was a perfect opportunity to try some new things, so I jumped into WebMatrix to create the site, added it to a Git repository, and deployed it to AppHarbor under Xander’s own domain name. Start to finish, it took 30 minutes and my son gave me an A+.
Installing WebMatrix
WebMatrix is one of the easiest-to-install Microsoft products ever. Really. Just go to http://www.microsoft.com/web/webmatrix/ and click the big green button for “Install WebMatrix” or “Or try the latest Beta.” I decided to try the latest beta, and after just a couple more simple clicks and about 4 minutes, WebMatrix 2 Beta was on my machine and open.
Creating the Web Site
I clicked on Templates and since this is going to be an extremely simple, one-page site, I went for the “Empty Site” template. The Personal Site template was tempting, but over-the-top for my needs. WebMatrix created the site in moments and then gave me a nice start page. I immediately jumped to the “Files” view and here’s what I saw I was given:
I created a new Popcorn.cshtml file that contains the content my son helped author. It was a no-brainer to use the CSHTML file, as that lets me use the awesome Razor syntax as needed. I created an /images folder and a /videos folder, where I put some media I had prepared. Then I hit the Run button. Yes, I prefer Chrome.
Since I had added my content to Popcorn.cshtml, and hadn’t added anything to the Default.cshtml, I got a blank page. That’s good with me, as a default page is out of scope for tonight’s project. :-) What I really wanted to see is what I got when I browsed to /popcorn…
Perfect! Notice that I didn’t have to browse to popcorn.cshtml – just /popcorn is sufficient because ASP.NET Web Pages automatically routes this form me. That feels so much cleaner than creating a popcorn folder and adding a default.cshtml to it. So, the website is now complete and ready for source control.
Installing Git
github has an awesome page for setting up Git. There’s no need for me to repeat anything here. Just go to github’s page and then come back here when you’re ready.
Creating the Git Repository
This was easy stuff. Using Git Bash, here’s what it took to initialize the Git repository, add the website, review the pending changes, and commit them.
Deploying to AppHarbor
If you’re not familiar with AppHarbor, it’s a service that lets you host sites using Git to push a repository to the cloud (no, it’s not Azure – shame). AppHarbor will host this site for free, which is a requirement for this project. Signing up for AppHarbor was extremely simple and took about 1 minute.
Before I could deploy, I needed to first create an application. It’s a single-field form. Seriously.
After naming the application and clicking Create, I was given idiot-proof instructions for how to set up a Git repository, configure it to push to AppHarbor, and do my first push. Since I already initialized the repository, I skipped down to the “Add AppHarbor Repository and Push” section.
At that point, the site was deployed to AppHarbor and running in the cloud. Browsing to http://xanderhandley.apphb.com/popcorn/ worked. I was close to finished; I just needed to set up the custom hostname.
Using a Custom Hostname
I wanted the site to have an easy URL, with http://xanderhandley.com/popcorn as the goal. Needless to say, I already own xanderhandley.com, so I just needed to point it to AppHarbor. This was another single-field form on AppHarbor’s site, reached by clicking on the “Hostnames” menu link.
Before hitting ‘Add hostname,’ I copied the IP address to my clipboard. Then I went off to my DNS settings for the domain and configured an A record for the domain to point to that IP address. After a few minutes of propagation, it worked. http://xanderhandley.com/popcorn loads the site I created in WebMatrix just 30 minutes ago, and Xander’s now able to sell popcorn online!