gae-static
Version:
CLI for creating static sites on Google App Engine
114 lines (95 loc) • 4.42 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="/assets/styles.css">
<title>Hello World | Static GAE Example</title>
</head>
<body>
<h1>Hello World - gae-static Project Demo</h1>
<p class="intro"><img src="/assets/gae.png" class="gae-logo"/>
This is a demo of serving a purely static website with Google App Engine on <a href="https://cloud.google.com/" target="_new">Google Cloud Platform</a>. It was created without a single line of programming code and without fiddling with a command line - perfect for designers and rapid prototyping!
<br /><br />
Google App Engine is now a great hosting solution for simple websites as well as extremely complex applications. Visit the <a href="https://github.com/blainegarrett/gae-static" target="_new">gae-static</a> Github project to easily download the sample code to start your own static website.
</p>
<h2>Project Highlights of gae-static</h2>
<ul>
<li>Host assets (html, css, js, images, etc) anywhere in your site folder structure like normal web hosting</li>
<li>Your directory roots serves up index.html files</li>
<li>Does not require any knowledge of programming languages to get your site up an running</li>
<li>Does not require fiddling with the command line to deploy to Google Cloud.</li>
<li>Easily develop your website on your own machine and deploy to Google Cloud.</li>
<li>Lighting fast and cheap (free?) to host on Google App Engine</li>
</ul>
<h2>Getting Started</h2>
<p>
To get started creating your first website, check out the <a href="/absolute-primer.html">Absolute Primer Guide</a>, which will take you through getting set up on Google Cloud Platform and Deploying your site.<br /><br />
If you run into snags, check out the <a href="http://stackoverflow.com/questions/tagged/google-app-engine" target="_new">Google App Engine channel on Stack Overflow</a>.
If you experience troubles with this tutorial or with the files you serve, feel free to <a href="https://github.com/blainegarrett/gae-static/issues/" target="_new">create an issue on our Github project.</a>
</p>
<h2>The Important Bits - app.yaml</h2>
<p>
There are only two critical things to have when setting up your project: the <i>app.yaml</i> and the <i>www</i> folder. Here are the basics of your app.yaml file:
</p>
<pre>
application: gae-static
version: 1
runtime: python27
api_version: 1
threadsafe: yes
error_handlers:
- file: 404.html
# index files
handlers:
- url: /(.+)/
static_files: www/\1/index.html
upload: www/(.+)/index.html
# site root
- url: /
static_files: www/index.html
upload: www/index.html
# For folders without trailing slashes - ideally a 301 redirect, but we're static & it isn't 2004
- url: /([^\.]+)([^/])
static_files: www/\1\2/index.html
upload: www/(.+)
# Redirect Everything else
- url: /(.+)
static_files: www/\1
upload: www/(.+)
</pre>
<h2>Examples</h2>
<p>The <a href="/assets/gae.png">App Engine icon</a> at the top of the page is served up statically.</p>
<h2>Example Folder Structure</h2>
<ul id="nav">
<li>
<a href="/">/ (root - this page)</a>
<ul>
<li><a href="/page.html">page.html</a></li>
<li><a href="/folder1/">folder1/</a>
<ul>
<li><a href="/folder1/page.html">page.html</a></li>
<li><a href="/folder1/folder11/">folder11/</a>
<ul>
<li><a href="/folder1/folder11/page.html">page.html</a></li>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>This project and help guide was created by <a href="http://blainegarrett.com">Blaine Garrett</a> but feel free to <a href="https://github.com/blainegarrett/gae-static" target="_new">contribute on Git Hub</a>!</p>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-50372615-1', 'gae-static.appspot.com');
ga('send', 'pageview');
</script>
</body>
</html>