Permalink
Browse files

New Article: Host a Static Website on Amazon S3

  • Loading branch information...
1 parent 7722613 commit 25c0d7394d7b5183e36296c9c5187cb80ac47f6c @studiomohawk committed Mar 17, 2011
@@ -0,0 +1,86 @@
+---
+layout: post
+title: "Host a Static Website on Amazon S3"
+published: true
+---
+
+You may already noticed that Amazon S3 is able to host static websites now.
+If you are like me, you always wonder what the fuss about all the cloud talking among developers.
+And I'm not that kinda guy who can let it go or pretend it's nothing.
+So here I am, I'm having the cloud experience right now.
+
+## \_layouts is now hosted on Amazon S3.
+
+Does my website need a could server?
+I'm pretty sure it doesn't, but I've learned few things and it was fun doing it.
+
+I'll share my little experiment with whoever read this blog.
+I don't think no one does, so it'll be like my memo.
+
+## Motivation behind it
+
+I did want to know what it's all about to have my site on cloud.
+I stumbled upon press release of Amazon saying S3 is now capable to host static
+websites.
+And I do have static website created by
+[Jekyll](https://github.com/mojombo/jekyll).
+
+Then I found an article by digital inspiration, [How to Host Your Website on Amazon S3](http://www.labnol.org/internet/web-hosting-with-amazon-s3/18742/).
+
+## Let's get to the tutorial part
+
+I've follow the tutorial except when he uses Amazon S3 Console.
+Since I am using Jekyll, I've learned to use rsync to upload my update to the
+server.
+
+Though I've never tried, I assume I cannot use ssh and rsync to Amazon S3. So
+I went out to search alternatives.
+What I've found was [S3sync](http://www.s3sync.net/wiki).
+It's easy to install on my Mac.
+
+{% highlight sh %}
+gem install s3sync
+{% endhighlight %}
+
+It's written in ruby and packaged using gem (though it's not the latest one).
+It's not a equivalent of rsync but pretty much the same.
+I still need to read the document but it is fairly easy to use if you already
+familiar with rsync.
+
+I did used Amazon S3 Console to create a bucket (which is like a directory for
+Amazon Web Service, I guess), to make contents of bucket public and to make
+a bucket treated as website.
+All of those is one time task so I don't need to do that again for while.
+(S3Sync has a sibling command called s3cmd which arrows you to create a bucket)
+
+## There are few things you need to be aware of
+
+If you need to have your domain points to Amazon S3 (I assume that's mostly
+everybody), you need to name your bucket **www.YOUR-DOMAIN-NAME.WHATEVER** like
+this.
+
+**www** is crucial since you need change something called CNAME setting on your
+domain provider(Mine is GoDaddy).
+I still don't quite understand what CNAME is after reading Wikipedia entry, but
+I'm guessing that you only can point subdomain (and I'm guessing www IS a
+subdomain) with CNAME.
+
+Well, I've tried without **www** but no luck so if you know better than I am
+please help me on this.
+
+And since Amason S3 is not an Apache server, you can't use .htaccess to do all
+the tricks.
+
+I need help on this one too.
+
+**Are there anyway I can do .htaccess tricks on Amazon S3?**
+
+That's it!
+Isn't it easy and fun?
+
+I do still have a few minor things to iron out, but I can live with it, at
+least for a while.
+
+If you are a server ninja who can help me, please give me your shout at [Twitter@cssradar](http://twitter.com/#!/cssradar).
+If you are like me and having problems on hosting static website on Amason S3,
+I'd love to help you.
@@ -91,7 +91,7 @@ <h3 id='currently_using'>Currently Using</h3>
<li>
<p><a href='https://github.com/indirect/jekyll-postfiles'>indirect&#8217;s jekyll_postfiles</a></p>
-<p>A plugin adds files for each post. You can add files on post basic. You need to create a directory named after the post in _postfiles, then you can refer to the file using /2011/01/09/jekyll_newbie_guide/YOURFILENAME.EXTENSION . I need this to show screen shots of my theme.</p>
+<p>A plugin adds files for each post. You can add files on post basic. You need to create a directory named after the post in _postfiles, then you can refer to the file using /2011/01/09/jekyll-newbie-guide/YOURFILENAME.EXTENSION . I need this to show screen shots of my theme.</p>
</li>
</ul>
@@ -121,6 +121,15 @@ <h3 id='will_look_into'>Will Look into</h3>
</div>
</div><!-- id="main" -->
+ <nav class="pagenation">
+ <ul>
+
+
+ <li class="next right"><a rel="next" href="/2011/03/16/hosting-on-amazon-s3/" class="btn" title="View Host a Static Website on Amazon S3">Next</a></li>
+
+ </ul>
+ </nav>
+
<footer id="foot">
<div class="foot_inner">
<div class="hasGrid">
@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
+<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
+<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="google-site-verification" content="VCjPu4enLtZl8QXpuPVxY6vMufxe68UrchkhHkzz1zA">
+ <link href="http://feeds.feedburner.com/_layouts" rel="alternate" title="_layouts | themes for jekyll" type="application/atom+xml">
+ <link rel="stylesheet" media="all" href="/stylesheet/master.min.css">
+ <link rel="stylesheet" media="all" href="/stylesheet/mediaqueries.css">
+ <script src="/script/modernizr.js"></script>
+
+ <title>Host a Static Website on Amazon S3 | _layouts | themes for jekyll</title>
+ <meta name="description" content="You may already noticed that Amazon S3 is able to host static websites now.If you are like me, you always wonder what the fuss about...">
+
+</head>
+
+<body class="post">
+ <div id="page">
+ <header id="head">
+ <div class="head_inner">
+ <ul>
+ <li class="logo"><a href="/">_layouts</a></li>
+ <li class="tagline">themes for jekyll</li>
+ </ul>
+ </div>
+ </header><!-- id="head" -->
+
+ <div id="main" role="main">
+ <div class="main_inner">
+ <header class="hd_article">
+ <h1>Host a Static Website on Amazon S3</h1>
+ <div class="meta">
+ <date title="2011-03-16T00:00:00+09:00">
+ <span class="published">Published: </span>
+ <span class="day">16</span>
+ <span class="month"><abbr>Mar</abbr></span>
+ <span class="year">2011</span>
+ </date>
+ </div>
+ </header>
+ <article class="the_article">
+ <div class="article_inner">
+ <div class="content"><p>You may already noticed that Amazon S3 is able to host static websites now.<br />If you are like me, you always wonder what the fuss about all the cloud talking among developers.<br />And I&#8217;m not that kinda guy who can let it go or pretend it&#8217;s nothing.<br />So here I am, I&#8217;m having the cloud experience right now.</p>
+
+<h2 id='_layouts_is_now_hosted_on_amazon_s3'>_layouts is now hosted on Amazon S3.</h2>
+
+<p>Does my website need a could server?<br />I&#8217;m pretty sure it doesn&#8217;t, but I&#8217;ve learned few things and it was fun doing it.</p>
+
+<p>I&#8217;ll share my little experiment with whoever read this blog.<br />I don&#8217;t think no one does, so it&#8217;ll be like my memo.</p>
+
+<h2 id='motivation_behind_it'>Motivation behind it</h2>
+
+<p>I did want to know what it&#8217;s all about to have my site on cloud.<br />I stumbled upon press release of Amazon saying S3 is now capable to host static websites.<br />And I do have static website created by <a href='https://github.com/mojombo/jekyll'>Jekyll</a>.</p>
+
+<p>Then I found an article by digital inspiration, <a href='http://www.labnol.org/internet/web-hosting-with-amazon-s3/18742/'>How to Host Your Website on Amazon S3</a>.</p>
+
+<h2 id='lets_get_to_the_tutorial_part'>Let&#8217;s get to the tutorial part</h2>
+
+<p>I&#8217;ve follow the tutorial except when he uses Amazon S3 Console.<br />Since I am using Jekyll, I&#8217;ve learned to use rsync to upload my update to the server.</p>
+
+<p>Though I&#8217;ve never tried, I assume I cannot use ssh and rsync to Amazon S3. So I went out to search alternatives.<br />What I&#8217;ve found was <a href='http://www.s3sync.net/wiki'>S3sync</a>.<br />It&#8217;s easy to install on my Mac.</p>
+<div class='highlight'><pre><code class='sh'>gem install s3sync
+</code></pre>
+</div>
+<p>It&#8217;s written in ruby and packaged using gem (though it&#8217;s not the latest one).<br />It&#8217;s not a equivalent of rsync but pretty much the same.<br />I still need to read the document but it is fairly easy to use if you already familiar with rsync.</p>
+
+<p>I did used Amazon S3 Console to create a bucket (which is like a directory for Amazon Web Service, I guess), to make contents of bucket public and to make a bucket treated as website.<br />All of those is one time task so I don&#8217;t need to do that again for while.<br />(S3Sync has a sibling command called s3cmd which arrows you to create a bucket)</p>
+
+<h2 id='there_are_few_things_you_need_to_be_aware_of'>There are few things you need to be aware of</h2>
+
+<p>If you need to have your domain points to Amazon S3 (I assume that&#8217;s mostly everybody), you need to name your bucket <strong>www.YOUR-DOMAIN-NAME.WHATEVER</strong> like this.</p>
+
+<p><strong>www</strong> is crucial since you need change something called CNAME setting on your domain provider(Mine is GoDaddy).<br />I still don&#8217;t quite understand what CNAME is after reading Wikipedia entry, but I&#8217;m guessing that you only can point subdomain (and I&#8217;m guessing www IS a subdomain) with CNAME.</p>
+
+<p>Well, I&#8217;ve tried without <strong>www</strong> but no luck so if you know better than I am please help me on this.</p>
+
+<p>And since Amason S3 is not an Apache server, you can&#8217;t use .htaccess to do all the tricks.</p>
+
+<p>I need help on this one too.</p>
+
+<p><strong>Are there anyway I can do .htaccess tricks on Amazon S3?</strong></p>
+
+<p>That&#8217;s it!<br />Isn&#8217;t it easy and fun?</p>
+
+<p>I do still have a few minor things to iron out, but I can live with it, at least for a while.</p>
+
+<p>If you are a server ninja who can help me, please give me your shout at <a href='http://twitter.com/#!/cssradar'>Twitter@cssradar</a>. If you are like me and having problems on hosting static website on Amason S3, I&#8217;d love to help you.</p></div>
+ </div>
+ </article>
+ </div>
+ </div><!-- id="main" -->
+
+ <nav class="pagenation">
+ <ul>
+
+ <li class="before left"><a rel="prev" href="/2011/01/09/jekyll-newbie-guide/" class="btn" title="View Jekyll Newbie Guide">Before</a></li>
+
+
+ </ul>
+ </nav>
+
+ <footer id="foot">
+<div class="foot_inner">
+ <div class="hasGrid">
+ <div class="left alpha grid-6"><h4>about</h4>
+<p>
+_layouts is a theme gallery for Jekyll powered websites. Themes are created by me, Yuya Saito who is an web designer/front-end developer in Tokyo, Japan.<br>
+Unless otherwise noted, themes here are all MIT licenced which means you can do whatever you want as long as you don't sue me. <br>
+You can read more detail on my github repository.<br>
+And of course, this site is powered by <a href="https://github.com/mojombo/jekyll">jekyll</a>.<br>
+The font I'm using is <a href="http://www.theleagueofmoveabletype.com/fonts/1-junction">Junction</a> via @font-face by <a href="http://www.theleagueofmoveabletype.com/">The League of Moveable Type</a>
+</p>
+</div>
+ <div class="right omega grid-6"><h4>if you like what i've done</h4>
+<ul>
+ <li>Follow me at <a href="http://forrst.com/people/studiomohawk" rel="me">Forrest</a></li>
+ <li>Or <a href="http://twitter.com/#!/cssradar" rel="me">Twitter</a></li>
+</ul>
+<h4>contact</h4>
+<ul>
+ <li><a href="http://twitter.com/#!/cssradar" rel="me">cssradar@twitter</a></li>
+ <li><a href="https://github.com/studiomohawk/_layouts/issues" rel="me">Report issue@github</a></li>
+ <li><a href="https://github.com/studiomohawk/_layouts/" rel="me">And yes, you can fork it</a></li>
+</ul>
+</div>
+ </div>
+</footer><!-- id="foot" -->
+
+ </div><!-- id="page" -->
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
+<!-- You may want to stats with your blog if not you should erase this file and remove inculude link from
+You don't need to edit this file, you can set your ID at _config.yml -->
+<script>
+ var _gaq = [['_setAccount', 'UA-61203-14'], ['_trackPageview']];
+ (function(d, t) {
+ var g = d.createElement(t),
+ s = d.getElementsByTagName(t)[0];
+ g.async = true;
+ g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g, s);
+ })(document, 'script');
+</script>
+
+
+</body>
+</html>
View
@@ -42,7 +42,9 @@
<h2>Recent Articles</h2>
<ul class="recent">
- <li><a href="/2011/01/09/jekyll_newbie_guide/" title="Jekyll Newbie Guide">Jekyll Newbie Guide</a></li>
+ <li><a href="/2011/03/16/hosting-on-amazon-s3/" title="Host a Static Website on Amazon S3">Host a Static Website on Amazon S3</a></li>
+
+ <li><a href="/2011/01/09/jekyll-newbie-guide/" title="Jekyll Newbie Guide">Jekyll Newbie Guide</a></li>
</ul>
</div>
View
@@ -4,15 +4,67 @@
<title>_layouts | themes for jekyll</title>
<link href="http://www.layouts-the.me/atom.xml" rel="self"/>
<link href="http://www.layouts-the.me"/>
- <updated>2011-03-15T22:24:32+09:00</updated>
+ <updated>2011-03-17T23:29:41+09:00</updated>
<id>http://layouts.studiomohawk.com/</id>
<entry>
+ <title>Host a Static Website on Amazon S3</title>
+ <link href="http://www.layouts-the.me/2011/03/16/hosting-on-amazon-s3/"/>
+ <updated>2011-03-16T00:00:00+09:00</updated>
+ <id>http://www.layouts-the.me/2011/03/16/hosting-on-amazon-s3</id>
+ <content type="html">&lt;p&gt;You may already noticed that Amazon S3 is able to host static websites now.&lt;br /&gt;If you are like me, you always wonder what the fuss about all the cloud talking among developers.&lt;br /&gt;And I&amp;#8217;m not that kinda guy who can let it go or pretend it&amp;#8217;s nothing.&lt;br /&gt;So here I am, I&amp;#8217;m having the cloud experience right now.&lt;/p&gt;
+
+&lt;h2 id='_layouts_is_now_hosted_on_amazon_s3'&gt;_layouts is now hosted on Amazon S3.&lt;/h2&gt;
+
+&lt;p&gt;Does my website need a could server?&lt;br /&gt;I&amp;#8217;m pretty sure it doesn&amp;#8217;t, but I&amp;#8217;ve learned few things and it was fun doing it.&lt;/p&gt;
+
+&lt;p&gt;I&amp;#8217;ll share my little experiment with whoever read this blog.&lt;br /&gt;I don&amp;#8217;t think no one does, so it&amp;#8217;ll be like my memo.&lt;/p&gt;
+
+&lt;h2 id='motivation_behind_it'&gt;Motivation behind it&lt;/h2&gt;
+
+&lt;p&gt;I did want to know what it&amp;#8217;s all about to have my site on cloud.&lt;br /&gt;I stumbled upon press release of Amazon saying S3 is now capable to host static websites.&lt;br /&gt;And I do have static website created by &lt;a href='https://github.com/mojombo/jekyll'&gt;Jekyll&lt;/a&gt;.&lt;/p&gt;
+
+&lt;p&gt;Then I found an article by digital inspiration, &lt;a href='http://www.labnol.org/internet/web-hosting-with-amazon-s3/18742/'&gt;How to Host Your Website on Amazon S3&lt;/a&gt;.&lt;/p&gt;
+
+&lt;h2 id='lets_get_to_the_tutorial_part'&gt;Let&amp;#8217;s get to the tutorial part&lt;/h2&gt;
+
+&lt;p&gt;I&amp;#8217;ve follow the tutorial except when he uses Amazon S3 Console.&lt;br /&gt;Since I am using Jekyll, I&amp;#8217;ve learned to use rsync to upload my update to the server.&lt;/p&gt;
+
+&lt;p&gt;Though I&amp;#8217;ve never tried, I assume I cannot use ssh and rsync to Amazon S3. So I went out to search alternatives.&lt;br /&gt;What I&amp;#8217;ve found was &lt;a href='http://www.s3sync.net/wiki'&gt;S3sync&lt;/a&gt;.&lt;br /&gt;It&amp;#8217;s easy to install on my Mac.&lt;/p&gt;
+&lt;div class='highlight'&gt;&lt;pre&gt;&lt;code class='sh'&gt;gem install s3sync
+&lt;/code&gt;&lt;/pre&gt;
+&lt;/div&gt;
+&lt;p&gt;It&amp;#8217;s written in ruby and packaged using gem (though it&amp;#8217;s not the latest one).&lt;br /&gt;It&amp;#8217;s not a equivalent of rsync but pretty much the same.&lt;br /&gt;I still need to read the document but it is fairly easy to use if you already familiar with rsync.&lt;/p&gt;
+
+&lt;p&gt;I did used Amazon S3 Console to create a bucket (which is like a directory for Amazon Web Service, I guess), to make contents of bucket public and to make a bucket treated as website.&lt;br /&gt;All of those is one time task so I don&amp;#8217;t need to do that again for while.&lt;br /&gt;(S3Sync has a sibling command called s3cmd which arrows you to create a bucket)&lt;/p&gt;
+
+&lt;h2 id='there_are_few_things_you_need_to_be_aware_of'&gt;There are few things you need to be aware of&lt;/h2&gt;
+
+&lt;p&gt;If you need to have your domain points to Amazon S3 (I assume that&amp;#8217;s mostly everybody), you need to name your bucket &lt;strong&gt;www.YOUR-DOMAIN-NAME.WHATEVER&lt;/strong&gt; like this.&lt;/p&gt;
+
+&lt;p&gt;&lt;strong&gt;www&lt;/strong&gt; is crucial since you need change something called CNAME setting on your domain provider(Mine is GoDaddy).&lt;br /&gt;I still don&amp;#8217;t quite understand what CNAME is after reading Wikipedia entry, but I&amp;#8217;m guessing that you only can point subdomain (and I&amp;#8217;m guessing www IS a subdomain) with CNAME.&lt;/p&gt;
+
+&lt;p&gt;Well, I&amp;#8217;ve tried without &lt;strong&gt;www&lt;/strong&gt; but no luck so if you know better than I am please help me on this.&lt;/p&gt;
+
+&lt;p&gt;And since Amason S3 is not an Apache server, you can&amp;#8217;t use .htaccess to do all the tricks.&lt;/p&gt;
+
+&lt;p&gt;I need help on this one too.&lt;/p&gt;
+
+&lt;p&gt;&lt;strong&gt;Are there anyway I can do .htaccess tricks on Amazon S3?&lt;/strong&gt;&lt;/p&gt;
+
+&lt;p&gt;That&amp;#8217;s it!&lt;br /&gt;Isn&amp;#8217;t it easy and fun?&lt;/p&gt;
+
+&lt;p&gt;I do still have a few minor things to iron out, but I can live with it, at least for a while.&lt;/p&gt;
+
+&lt;p&gt;If you are a server ninja who can help me, please give me your shout at &lt;a href='http://twitter.com/#!/cssradar'&gt;Twitter@cssradar&lt;/a&gt;. If you are like me and having problems on hosting static website on Amason S3, I&amp;#8217;d love to help you.&lt;/p&gt;</content>
+ </entry>
+
+ <entry>
<title>Jekyll Newbie Guide</title>
- <link href="http://www.layouts-the.me/2011/01/09/jekyll_newbie_guide/"/>
+ <link href="http://www.layouts-the.me/2011/01/09/jekyll-newbie-guide/"/>
<updated>2011-01-09T00:00:00+09:00</updated>
- <id>http://www.layouts-the.me/2011/01/09/jekyll_newbie_guide</id>
+ <id>http://www.layouts-the.me/2011/01/09/jekyll-newbie-guide</id>
<content type="html">&lt;h2 id='a_newbielike_me_guide_for_jekyll'&gt;A Newbie(like me) Guide for Jekyll&lt;/h2&gt;
&lt;h3 id='toolsfor_mac'&gt;Tools(for Mac)&lt;/h3&gt;
@@ -61,7 +113,7 @@
&lt;li&gt;
&lt;p&gt;&lt;a href='https://github.com/indirect/jekyll-postfiles'&gt;indirect&amp;#8217;s jekyll_postfiles&lt;/a&gt;&lt;/p&gt;
-&lt;p&gt;A plugin adds files for each post. You can add files on post basic. You need to create a directory named after the post in _postfiles, then you can refer to the file using /2011/01/09/jekyll_newbie_guide/YOURFILENAME.EXTENSION . I need this to show screen shots of my theme.&lt;/p&gt;
+&lt;p&gt;A plugin adds files for each post. You can add files on post basic. You need to create a directory named after the post in _postfiles, then you can refer to the file using /2011/01/09/jekyll-newbie-guide/YOURFILENAME.EXTENSION . I need this to show screen shots of my theme.&lt;/p&gt;
&lt;/li&gt;
&lt;/ul&gt;
View
@@ -58,7 +58,15 @@
<ul class="posts">
<li class="article-link">
- <a href="/2011/01/09/jekyll_newbie_guide/" class="h3">Jekyll Newbie Guide</a>
+ <a href="/2011/03/16/hosting-on-amazon-s3/" class="h3">Host a Static Website on Amazon S3</a>
+ <small>
+ <date>16 Mar 2011</date>
+ </small>
+ </li>
+
+
+ <li class="article-link">
+ <a href="/2011/01/09/jekyll-newbie-guide/" class="h3">Jekyll Newbie Guide</a>
<small>
<date>09 Jan 2011</date>
</small>
Oops, something went wrong.

0 comments on commit 25c0d73

Please sign in to comment.