I have couple of startup ideas where I first need a simple web page, email and document archive.

Here I discuss how to create a quick startup office and static web pages. I use my recent project privu.net as an example.

Especially I tell how to configure static pages into Amazon S3 and how to configure DNS for mixed Google/Amazon configuration.

Google Apps and Amazon S3

It is pretty straightforward to use Google Apps for Business. Currently you have to pay of the service but I still have some free accounts to deploy.

The only cost is domain name ~10 dollars / year. Google gives some recommendations on domain name service providers. I use EuroDNS but it is bit more expensive than american alternatives like GoDaddy. It used to be cheaper to buy domain via Google but I think that is not the case any more.

Google Apps for Business looks like other Google applications: email, calendar, drive. However, you can customize pages for you company and have user groups, own email addresses, special emails (like info@privu.net).

Screen capture

Fig. 1. A picture of privu.net Google Apps for Business mail page branded with prototype logo.

The weak point of Google Apps is the product Google Sites. You can create web page but tools are painful and there will always be a Google disclaimer in the bottom of the page. Not very professional.

I recommend using Amazon S3. S3 is a part of AWS like EC2 and it has specialized in storing simply files, "buckets". It is very fast, cheap (a simple static web server hardly costs more that couple of dollars per month). it scales to very high load and is relatively easy to use. But you have to remember that even Amazon does not want it to be called as a web server and it is not possible to make dynamic content (users, databases,…) there. Nothing fancy but it works in this simple case.

I skip here how to create a S3 account. It is relatively easy but requires a credit card. Account is same as US Amazon if you happened to buy a book from there. You may even get some free months for testing.

Do your first page using Inkscape

My recommendation for your first web page is a picture that you make using Inkscape drawing program. It is free and it is full of impressive features. And it is relatively easy to learn. It is a vector drawing program meaning that it is easy to modify your pages afterwards. There are also tools to tear pictures to tiles so that they can be used in much more advanced pages. I don’t go into details but the result should be a PNG image (don’t throw away the source file in SVG). If you don’t have better plan, use modern standard size of a web page 960x600 pixels. Even modern smartphones zoom that nicely into the screen.

S3 Web Server

You have to create a s3 bucket (~directory) in your account as your web server. It has to match your domain name, e.g. mine is www.privu.net. Then you have to go the properties of this bucket and enable ‘Static website hosting’.

Capture of screen how to turn S3 web server on

I put index.html as the error document because I want even every wrong link to end to my front page.

image2

Additionally (VERY IMPORTANT) you have to allow your web pages to be read by the web server. You have to edit the following cryptic code to the permissions / Editing Bucket Policy:

image3

(Blogger does not survice these code examples within text (it interprets HTML as formatting characters). Code examples are therefore pictures.)

HTML and CSS files

Content is loaded into the bucket, typically index.html, styles.css and image.png. You can not serve only image, you need a HTML-file to load it. It is a good practice to keep content and appearance in a different file, thus a very simple HTML file and a very simple CSS file.

These are the minimal files from the www.privu.net. http://www.privu.net/index.html (ctl-U to see the code) and http://www.privu.net/styles.css.

The content file index.html imports the image file image.png. Headers tell that this is HTML5 (no junk after DOCTYPE), language of the content is Finnish, the content coding is UTF-8 (like always nowadays). Title will be the title of the browser tab where you open the file.

Some important notes: search engines will not look for text in your image file. You have to put good hints for search engines in "description". And it is a good idea to use only Google web fonts in your image because then you can add text to your picture using HTML with the same font.(*) This example has a placeholder to add Google web font Open Sans if needed, but currently it is commented out.

image4

It is also good to remember that search engines like your page much more if the image has alt text and the page loads fast. Check that the image is not more than couple of hundreds of kilobytes. Mine is 118 kB. My page loads from Amazon Virginia to my Chrome browser in Finland typically in 1.8 seconds (privu.net without www adds 0,1s). You can use Chrome F12 tool to see the code and in Network tab there is exact timing of page load (open it first and then shift-refresh).

The appearance file only tells to justify the picture to the middle of the page and makes background light gray (pure white anywhere is almost always a very bad idea).

image5

This is all the code what is needed to get you image served as a web page.

We can access our pages now at http://www.privu.net.s3-website-us-east-1.amazonaws.com/.

image6

Nice but no cigar yet.

Virtual server configuration www.privu.net

We have to get S3 to work as a virtual server. That means that we see the web pages at address http://www.privu.net and also http://privu.net should work.

Amazon gives instructions with their own name server but it seems to work also with my name server provider with these instructions.

First, a nice picture. Hopefully it does not discourage you.

image7

First there is a case where we want to redirect privu.net into www.privu.net. Let’s dicuss it later.

Second there is a case where we search www.privu.net. You have to configure your nameserver so that it contains configuration where:

www

is a CNAME to:

www.privu.net.s3-website-us-east-1.amazonaws.com.

Note the dot at the end of the address. In most nameservers it is not optional! Without that, the address is relative to the current domain - the server adds .privu.net to the end without dot.

CNAME (canonical name) restarts the name resolution process from the beginning with the new name. Essentially it is an alias mechanism but it has some limitations.

When asked for www.privu.net, my nameserver now returns IP address of the Amazon S3 web server, 72.21.211.128 when I last tried (it may change!).

In early years of web, the URL was strictly http://web-server-address/file. Now our name server returned wrong address. This URL will be asked from S3 Web server that is serving plenty of virtual web servers. How it separates the requests?

When we ask for a page "/" from Amazon web server. The header starts like:

GET / HTTP/1.1
Host: www.privu.net

The client has added a second header line where is the host of the original request. The server looks for the line Host to find out to which virtual server the request is going.

[If something is wrong, you can not debug virtual servers using a browser. There is no way to tell the IP address of the real server and the name of the virtual server at the same time (AFAIK). You can either use telnet command (both in Linux and in Windows command line): ‘telnet 72.21.211.128 80’ and then write the previous header and one empty line. A handier tool is called netcat (nc). The following line returns index.html from server www.privu.net (in Linux command line, available also for Windows with some syntax differences):

echo -e "GET / HTTP/1.1\\nHost: www.privu.net\\n\\n" \| nc 72.21.211.128 80

but this was pretty advanced.]

Your changes in nameserver configuration propagate very slowly to the actual use because the domain information is very heavily cached, hours or even a day!

Mail configuration in DNS server

The next thing you want to understand from the name server configuration is that you want your mail xxx@privu.net to go to Google. How we do that if http://privu.net goes to Amazon?

Name server has several types of resources. When you want to access web server, you use A-records. When you want to send mail, you use MX records. Therefore they do not mix.

You should have a line like:

MX aspmx.l.google.com.

in your nameserver configuration to send e.g. info@privu.net into Google Apps mail system. (Remember the trailing dot!)

Translating http://privu.net to http://www.privu.net

You do not want to have two web servers, therefore you want to forward users from http://privu.net into http://www.privu.net (or vice versa).

You can not use CNAME to do that. Because you have MX records in your root domain privu.net, it is not allowed to create CNAME alias that forwards privu.net into www.privu.net. It would forward your mail also to Amazon S3 Web Server.

First strategy is to create a S3 bucket privu.net and configure it as a forwarding web server. Then privu.net is addressed to S3 Web Server in DNS A records. This is not very nice because then we have to put fixed IP address to the S3 Web Server to the configuration and Amazon may change that any time.

I decided to use URL forwarder by my DNS provider (EuroDNS). Most DNS providers have something like that.

When the client requests address for http://privu.net, EuroDNS replies with the address of their own URL forwarder. When client tries to contact to that web server (again virtual server so that the real target is in ‘Host:’ line) the web server answers with ‘301 moved permanently’ message to www.privu.net.

After this, the client browser behaves like the user had used http://www.privu.net directly. This adds two roundtrips (to Luxembourg in my case), so it is important that www.privu.net is really the most likely used form by users.

Summary

You can get IT of an startup easily running using Google Apps but to get professional static web pages requires you to use Amazon S3.

It is easy to make static web pages but to configure DNS is the most difficult part of the operation. This article tells how the DSN configuration was done in one case.

(*) You can download all the Google web fonts to Inkscape using directions in http://www.webupd8.org/2011/01/automatically-install-all-google-web.html. Because there are hundreds of fonts, it makes Inkscape font menu pretty slow. You are warned.