You have worked hard on your webpages, and styles sheets, Javascript, and Processing JS. The next step is, of course, to show everyone your hard earned pages. What better way could there be then a free way?
This tutorial will show you how to host a free website with Google using their servers and webspace. We will be using Google's app engine to do this. In order to make a webpage you will need to know some html and css, or find someone who can help you. You can learn html/css/javascript for free on Khan Academy. If you do not know how to program then I recommend using Google Sites instead of Google App Engine. This website is hosted on Google app engine. This tutorial follows what I did to start this website.
Ok let's get started!
First, go to appengine.google.com click on create application
You will need to choose an application identifier. Keep in mind that your website url will be: your-application-identifier.appspot.com. Thus, my application identifier is: elijah-site
Next choose an Application Title. I am not sure what that is for, I have never seen it used.
Dont worry about the Authentication Options. You can change those later, just leave it on Open to all Google Accounts users.
When you are done, click on Create Application.
Ok you have a website, now to put stuff in it!
From now on I will be telling you how to do this with Python, Google App Engine lets you use Python, PHP, Go, or Java, So if you know one of the programing languages then feel free and use it, but my tutorial will not help much.
Alright, you are going to need to download Python and install it on your computer. Go to python.org and install python 2.7.9.
Now, you need to download and install Google's App Engine SDK. Go to cloud.google.com/appengine and install Google App Engine SDK for Python.
Now you need to get the python code and YAML code that will run/upload your website. I have the code in a zip for you, but if you would rather not download it I will go over the code below.
In that zip you will find some .html webpages, you can get rid of those if you want, or you can keep them for testing.
The parts that we need are the app.yaml, the main.py, the index.yaml, the robots.txt, and the favicon.ico.
app.yaml
Open the app.yaml with TextWrangler. It is free on the mac app store, not sure about windows. the first section should look like this,
application: my-app-id
version: 1
runtime: python27
api_version: 1
threadsafe: true
the application is your application id. change my-app-id to your id.
the version is the version number of your website, leave that at 1 for now.
The runtime is python27 because you are using python 2.7.
Just leave the api_version at 1.
Move on to the next section of the document. It will look like this:
handlers:
- url: /(.*\.(gif|png|jpg|ico|js|css|pde))
static_files: \1
upload: (.*\.(gif|png|jpg|ico|js|css|pde))
- url: /robots.txt
static_files: robots.txt
upload: robots.txt
- url: /sitemap.xml
static_files: sitemap.xml
upload: sitemap.xml
- url: .*
script: main.app
The top part says that if a file ends in, gif, png, jpg, ico, js, css, or pde, then to upload that file directly to the program or person that requested it, aka static files. The robots.txt part says that if someone goes to the url: /robots.txt to give them the robots.txt file. The sitemap.xml is just like the robots.txt. The last bit says that if there is anything else that did not get taken care of by the parts above it, then run the python code main.py. This is the part that will render and give your html files to the user.
There is a lot you can do with the app.yaml file. Read Google's tutorial on app.yaml to learn more
main.py
If open the main.py in TextWrangler you will see this:
import os
import jinja2
import webapp2
JINJA_ENVIRONMENT = jinja2.Environment(
loader=jinja2.FileSystemLoader(os.path.dirname(__file__)),
extensions=['jinja2.ext.autoescape'],
autoescape=True
)
class MainHandler(webapp2.RequestHandler):
def get (self, q):
if q is None:
q = 'index.html'
self.response.headers ['Content-Type'] = 'text/html'
template = JINJA_ENVIRONMENT.get_template(q)
self.response.out.write(template.render())
app = webapp2.WSGIApplication([('/(.*html)?', MainHandler)], debug=True)
At the top the program is importing os, jinja, and webapp2. Webapp 2 is what receives the get and post requestes and allows you to do things when that happens. Jinja 2 is what renders your html code and gives it to the user. OS helps jinja know where the html is.
Next an environment is created for jinja. The OS is for jinja's loader.
Then comes the webapp. The program defines a new class called MainHandler which is a webapp2 request handler. Inside that class the program defines a function that is called when the program receives a get request. Next, if there is no page specified (ie /) then index.html is used. Thus index.html is your homepage. Then the program sends an http header, and jinja renders your html page. Last but not least, the page is given to the user self.response.out.write(template.render()).
After that is a line tells the program when to call the class MainHandler. Following the WSGIApplication is a dictionary that maps urls to classes. This particular dictonary says that if the url ends in .html then then call the class MainHandler.
To learn more about jinja you can read this. If you want to learn more about the main.py then read Google's python tutorial
robots.txt
Robots.txt is used to stop web crawlers like Google from indexing pages on your website, thus they will not appear in a Google search. The way that robots.txt is set up now is to allow all crawling on your website. If you want to disallow crawling replace the robots.txt with:
User-agent: *
Disallow: /
favicon.ico
The favicon, favorite icon, is and ico that web browsers display next to the url and for a bookmark. This default favicon is the google app engine symbol. If you want to make your own favicon use Microsoft Paint or I use PaintBrush for Mac to make a 32×32 RGB image. You will need to convert that image to ico. There are plenty of online converts for you to use. Stick that file in the root folder of your website, and add this in the head of your index.html <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" >. Just be warned that your browser stores the favicon for a little while. What that means is that you will not see the change right away. You can either wait for a few days, or use another computer.
Deploying Your Code
Open GoogleAppEngineLauncher click on File, New Application.
Enter your application id and choose a place for GoogleAppEngineLauncher to create a new folder for your website. I use my desktop.
Click on Create
A new folder should have appeared in the place specified, replace the contents of the folder with your app.yaml, main.py, robots.txt, index.yaml, favicon.ico, and the html pages, if you are using them, from the zip.
Once everything is in the folder click on Deploy in the Launcher
Wait until it finishes, then go to your web browser and type in your URL which will be: appid.appspot.com where appid is your application id.
Wow your website is online!
Every time you change any code click on deploy and your new website will be available to the whole world!
Now it is time to learn about the SDK and the dashboard.