Simple Web Page Using Google App Engine
Link:http://diywebguide.com/hosting/free-web-site-hosting-using-google-app-engine/
index.py
import os
from google.appengine.ext.webapp import template
from google.appengine.ext import webapp
from google.appengine.ext.webapp.util import run_wsgi_app
class MainPage(webapp.RequestHandler):
def get(self):
template_values = {
'title1': "DIY",
'title2': "Web Guide for App Engine",
'slogan': "A DIY primer for deploying to App Engine",
'message1': """
<p>The whole idea here is to show how to set up a simple static web site
on Google App Engine. I want to create an easy way to host your modest web
site on App Engine. My approach is dead simple. All I use is some boilerplate
code almost anyone can follow. You can have multiple pages and use template
variable features that are part of App Engine's WebApp Framework. Most modest
web sites don't do much more than this. Your certainly free to expand on what
you find here.</p>""",
}
path = os.path.join(os.path.dirname(__file__), 'index.html')
self.response.out.write(template.render(path, template_values))
class AboutPage(webapp.RequestHandler):
def get(self):
template_values = {
'title1': "DIY",
'title2': "Web Guide for App Engine",
'slogan': "Deploying Static Sites to App Engine",
'message1' : "",
}
path = os.path.join(os.path.dirname(__file__), 'about.html')
self.response.out.write(template.render(path, template_values))
application = webapp.WSGIApplication(
[('/', MainPage),
('/index.html', MainPage),
('/about.html', AboutPage)],
debug=True)
def main():
run_wsgi_app(application)
if __name__ == "__main__":
main()
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="images/Underground.css" type="text/css" />
<title>Underground Index</title>
</head>
<body>
<!-- wrap starts here -->
<div id="wrap">
<!-- header -->
<div id="header">
<span id="slogan">{{ slogan }}</span>
<!-- tabs -->
<ul>
<li id="current"><a href="index.html"><span>Home</span></a></li>
<li><a href="index.html"><span>Archives</span></a></li>
<li><a href="index.html"><span>Downloads</span></a></li>
<li><a href="index.html"><span>Services</span></a></li>
<li><a href="index.html"><span>Support</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
</ul>
</div>
<div id="header-logo">
<div id="logo">{{title1}}<span class="red">{{title2}}</span></div>
<form method="post" class="search" action="#">
<p><input name="search_query" class="textbox" type="text" />
<input name="search" class="searchbutton" value="Search" type="submit" /></p>
</form>
</div>
<div id="sidebar" >
<h1>Sidebar Menu</h1>
<div class="left-box">
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li><a href="#TemplateInfo">Template Info</a></li>
<li><a href="#SampleTags">Sample Tags</a></li>
<li><a href="http://www.styleshout.com/">More Free Templates</a></li>
<li><a href="http://www.4templates.com/?aff=fenstermacher">Premium Templates</a></li>
</ul>
</div>
<h1>Site Partners</h1>
<div class="left-box">
<ul class="sidemenu">
<li><a href="http://affiliates.westhost.com/z/12/CD883/">WestHost</a></li>
<li><a href="http://www.4templates.com/?aff=fenstermacher">4templates</a></li>
<li><a href="http://store.templatemonster.com/?aff=fenstermacher">TemplateMonster</a></li>
</ul>
</div>
<h1>Wise Words</h1>
<div class="left-box">
<p>"Big men and big personalities make mistakes and admit them.
It is the little man who is afraid to admit he has been wrong"</p>
<p class="align-right">- Dr. Maxwell Maltz</p>
</div>
<h1>Support Styleshout</h1>
<div class="left-box">
<p>If you are interested in supporting my work and would like to contribute, you are
welcome to make a small donation through the
<a href="http://www.styleshout.com/">donate link</a> on my website - it will
be a great help and will surely be appreciated.</p>
</div>
</div>
<div id="main">
<h1>How it works</h1>
{{message1}}
<p>For a little more information on this template and how to get it see <strong><a href="about.html">the about page.</a></strong></p>
<p>Please read the article that accompanies this page on <strong><a href="http://diywebguide.com/hosting/free-web-site-hosting-using-google-app-engine/">The DIY Web Guide.</a></strong></p>
<a name="TemplateInfo"></a>
<h1>Template Info</h1>
<p><strong>Underground 1.1</strong> is a free, W3C-compliant, CSS-based website template
by <strong><a href="http://www.styleshout.com/">styleshout.com</a></strong>. This work is
distributed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5 License</a>, which means that you are free to
use and modify it for any purpose. All I ask is that you include a link back to
<a href="http://www.styleshout.com/">my website</a> in your credits.</p>
<p>For more free designs, you can visit
<a href="http://www.styleshout.com/">my website</a> to see
my other works.</p>
<p>Good luck and I hope you find my free templates useful!</p>
<p class="comments align-right clear">
<a href="index.html">Read more</a> :
<a href="index.html">comments(3)</a> :
10.18.06
</p>
<a name="SampleTags"></a>
<h1>Sample Tags</h1>
<h3>Code</h3>
<p>
<code>
code-sample { <br />
font-weight: bold;<br />
font-style: italic;<br />
}
</code></p>
<h3>Example Lists</h3>
<ol>
<li>example of</li>
<li>ordered list</li>
</ol>
<ul>
<li>example of</li>
<li>unordered list</li>
</ul>
<h3>Blockquote</h3>
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p></blockquote>
<h3>Image and text</h3>
<p><a href="http://getfirefox.com/"><img src="images/firefox-gray.jpg" width="100" height="120" alt="firefox" class="float-left" /></a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum
odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna.
In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar
ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.
</p>
<h3>Example Form</h3>
<form action="#">
<p>
<label>Name</label>
<input name="dname" value="Your Name" type="text" size="30" />
<label>Email</label>
<input name="demail" value="Your Email" type="text" size="30" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<br />
<input class="button" type="submit" />
</p>
</form>
<br />
</div>
<!-- wrap ends here -->
</div>
<!-- footer starts here -->
<div class="footer">
<p>
© 2006 <strong>Your Company</strong>
Design by: <a href="http://www.styleshout.com/">styleshout</a> |
Valid <a href="http://validator.w3.org/check/referer">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
<a href="index.html">Home</a> |
<a href="index.html">Site Map</a> |
<a href="index.html">RSS Feed</a>
</p>
</div>
</body>
</html>
about.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />
<link rel="stylesheet" href="images/Underground.css" type="text/css" />
<title>Underground About</title>
</head>
<body>
<!-- wrap starts here -->
<div id="wrap">
<!-- header -->
<div id="header">
<span id="slogan">{{ slogan }} </span>
<!-- tabs -->
<ul>
<li id="current"><a href="index.html"><span>Home</span></a></li>
<li><a href="index.html"><span>Archives</span></a></li>
<li><a href="index.html"><span>Downloads</span></a></li>
<li><a href="index.html"><span>Services</span></a></li>
<li><a href="index.html"><span>Support</span></a></li>
<li><a href="about.html"><span>About</span></a></li>
</ul>
</div>
<div id="header-logo">
<div id="logo">{{title1}}<span class="red">{{title2}}</span></div>
<form method="post" class="search" action="#">
<p><input name="search_query" class="textbox" type="text" />
<input name="search" class="searchbutton" value="Search" type="submit" /></p>
</form>
</div>
<div id="sidebar" >
<h1>Sidebar Menu</h1>
<div class="left-box">
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li><a href="#TemplateInfo">Template Info</a></li>
<li><a href="#SampleTags">Sample Tags</a></li>
<li><a href="http://www.styleshout.com/">More Free Templates</a></li>
<li><a href="http://www.4templates.com/?aff=fenstermacher">Premium Templates</a></li>
</ul>
</div>
<h1>Site Partners</h1>
<div class="left-box">
<ul class="sidemenu">
<li><a href="http://affiliates.westhost.com/z/12/CD883/">WestHost</a></li>
<li><a href="http://www.4templates.com/?aff=fenstermacher">4templates</a></li>
<li><a href="http://store.templatemonster.com/?aff=fenstermacher">TemplateMonster</a></li>
</ul>
</div>
<h1>Wise Words</h1>
<div class="left-box">
<p>"Big men and big personalities make mistakes and admit them.
It is the little man who is afraid to admit he has been wrong"</p>
<p class="align-right">- Dr. Maxwell Maltz</p>
</div>
<h1>Support Styleshout</h1>
<div class="left-box">
<p>If you are interested in supporting my work and would like to contribute, you are
welcome to make a small donation through the
<a href="http://www.styleshout.com/">donate link</a> on my website - it will
be a great help and will surely be appreciated.</p>
</div>
</div>
<div id="main">
<a name="TemplateInfo"></a>
<h1>Template Info</h1>
<p>This template is a lightly modified version of <strong>Underground 1.1</strong>, a free, W3C-compliant, CSS-based website template by <strong><a href="http://www.styleshout.com/">Styleshout.com</a></strong>. You can download this template along with associated App Engines files at <strong><a href="http://diywebguide.com/hosting/free-web-site-hosting-using-google-app-engine/">The DIY Web Guide.</a></strong> The modifications are meant to demonstrate use of Google App Engine as a tool to host simple static web sites. Although you can use this version of the template as is, it's easy to modify any of the StyleShout free templates, or any other page templates, for that matter, for use with App Engine.</p>
<p>Erwin Aligam has created a wonderful collection of free templates. Consider visiting <strong><a href="http://www.styleshout.com/">his web site</a></strong> for a check of the selection of styles. Also, please read his terms of use and consider making a small donation if you use his page designs.</p>
<p>This work is
distributed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5 License</a>, which means that you are free to
use and modify it for any purpose.</p>
<p class="comments align-right clear">
<a href="index.html">Read more</a> :
<a href="index.html">comments(3)</a> :
10.18.06
</p>
<a name="SampleTags"></a>
<h1>Sample Tags</h1>
<h3>Code</h3>
<p>
<code>
code-sample { <br />
font-weight: bold;<br />
font-style: italic;<br />
}
</code></p>
<h3>Example Lists</h3>
<ol>
<li>example of</li>
<li>ordered list</li>
</ol>
<ul>
<li>example of</li>
<li>unordered list</li>
</ul>
<h3>Blockquote</h3>
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat....</p></blockquote>
<h3>Image and text</h3>
<p><a href="http://getfirefox.com/"><img src="images/firefox-gray.jpg" width="100" height="120" alt="firefox" class="float-left" /></a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec libero. Suspendisse bibendum.
Cras id urna. Morbi tincidunt, orci ac convallis aliquam, lectus turpis varius lorem, eu
posuere nunc justo tempus leo. Donec mattis, purus nec placerat bibendum, dui pede condimentum
odio, ac blandit ante orci ut diam. Cras fringilla magna. Phasellus suscipit, leo a pharetra
condimentum, lorem tellus eleifend magna, eget fringilla velit magna id neque. Curabitur vel urna.
In tristique orci porttitor ipsum. Aliquam ornare diam iaculis nibh. Proin luctus, velit pulvinar
ullamcorper nonummy, mauris enim eleifend urna, congue egestas elit lectus eu est.
</p>
<h3>Example Form</h3>
<form action="#">
<p>
<label>Name</label>
<input name="dname" value="Your Name" type="text" size="30" />
<label>Email</label>
<input name="demail" value="Your Email" type="text" size="30" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<br />
<input class="button" type="submit" />
</p>
</form>
<br />
</div>
<!-- wrap ends here -->
</div>
<!-- footer starts here -->
<div class="footer">
<p>
© 2006 <strong>Your Company</strong>
Design by: <a href="http://www.styleshout.com/">styleshout</a> |
Valid <a href="http://validator.w3.org/check/referer">XHTML</a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
<a href="index.html">Home</a> |
<a href="index.html">Site Map</a> |
<a href="index.html">RSS Feed</a>
</p>
</div>
</body>
</html>