Absolute Primer Guide - Your First Google Cloud Site

This is a demo of serving a purely static website with Google App Engine on Google Cloud Platform. It was created without a single line of a programming code and without fiddling with a command line - perfect for designers and rapid prototyping!

Google App Engine is now a great hosting solution for simple websites as well as extremely complex applications. Visit the gae-static Github project to easily download the sample code to start your own static website.

Project Highlights of gae-static

• Host assets (html, css, js, images, etc) anywhere in your site folder structure like normal web hosting
• Your directory roots serves up index.html files
• Does not require any knowledge of programming languages to get your site up an running
• Does not require to fiddle with the command line to deploy to Google Cloud.
• Easily develop your website on your own machine and deploy to Google Cloud.

Getting Started

To get started creating your first website, check out the Absolute Primer Guide, which will take you through getting set up on Google Cloud Platform and Deploying your site.

If you run into snags, check out the Google App Engine channel on Stack Overflow. If you experience troubles with this tutorial or with the files you serve, feel free to create an issue on our Github project.

There are a couple steps to get your site on Google Cloud, but here is a thorough how-to for beginners.

Step 1: Download gae-static

1. Go to the gae-static project page on Github and download the ZIP. There should be a big button on the lower right column. Here is a direct link as well.
2. Unzip this file and remember where unzipped it to.

Step 2: Setting up your Google Cloud Account

1. Go to Google Cloud Developer Console and create a new project.
2. Enter a Project Name like My Cool Website and select an Project Id. Write this down, you'll need it in later steps. We'll use mycoolsite through the rest of this how-to.
3. Once you create your application (you may need to refresh the page to see it listed), click on its name (e.g. My Cool Website). Ensure "App Engine" is listed in the column on the left
4. You now have a website! You can view it at http://mycoolsite.appspot.com/ - You should see an error page with The requested URL / was not found on this server.. That is because we need to put your website there yet!

Step 3: Creating Your Static Website

Now that you are set up on Google Cloud Platform, lets get some content up there to serve

1. Download and install the Google Appengine SDK - Pick the Python version since you won't be writing code - just be sure to pick your correct operating system.
2. Once Installed, run the SDK (AppengineLauncher on Mac) and create a new project in the file menu. When asked for your Application Id, enter the Project Id you used above (e.g mycoolsite)
3. This will now create a folder named mycoolsite wherever you selected it to live.
4. Next, open the contents of gae-static folder from Step 1
5. Copy the www folder from the unzipped gae-static to the mycoolsite folder
6. Copy the app.yaml file from the unzipped gae-static to the mycoolsite folder
7. Next open the app.yaml in your favorite text editor. Change the first line to application: mycoolsite from application: gae-static
8. In the SDK program, click on Run. After a few seconds, you should be able to then click "Browse" which will open up a new browser window with your application in it.
9. You should see a page with "Hello World - gae-static Project Demo" at the top of the page
10. If so, you're almost done!
11. Click Deploy in the SDK program. You'll need to enter the username and password you used when you set up your application on Google Cloud Platform.
12. Go to your brand new website at http://mycoolsite.appspot.com/

Step 4: Start Making Your Own Content

Now that you have a site up and running, it is time to create your own content. Here are some tips:

• Start by deleting everything in the www folder. You can access all of the content again via http://gae-static.appspot.com including this help file.
• Copy the contents of your own existing static project (from Dream Weaver, etc)
• Repeat Step 3 to see your work and deploy your own site to the cloud.

Advanced Topics

• Pointing your own domain at your project (coming soon)
• Creating snapshots of your website so you can revert changes if needed (coming soon)

This how to was created by Blaine Garrett but feel free to contribute on Git Hub!