At the present time, everyone is hosting a personal or portfolio website to showcase his information on the Web. If you wish to host your own personal website but don’t really have to budget for it, this post is right up your alley.
This simple tutorial will show you how you can host a basic website (built using HTML & CSS) on Google’s servers, for free. And you can easily complete this between 1 and 3 hours.
Technically, Google does not provide free hosting solutions, but they do provide a Platform As A Service (PAAS) known as Google App Engine (GAE). This tutorial uses App Engine’s ‘Static files’ feature to host a static HTML-CSS website on GAE’s servers.
At the end of this tutorial you will be getting your own personal website at a customized sub-domain address like so: <your-custom-name>.appspot.com. You can make it your contact page, to connect with potential clients or to expand
Make a personal website using a free HTML-CSS website template
Download and Install Python and GAE SDK
Sign up for Google App Engine
Create app at Google App Engine
Develop app using GAE Python SDK
Deploy/upload your custom app to GAE servers
Let’s get to it.
Task 1: Make A Personal Website
Building a website from scratch can be hard and tricky, especially if you are not a hardcore web designer or an expert with writing tagged elements in html. However you can always work on a web template and customize it into your own version. Here are just a few good, easy-to-edit, andCreative Commons licensed website templates:
To make the website template your own, download the templat from the given links above, unzip the files and edit the index.html or other .html files. You can use any text editor to edit these files like Notepad or WordPad, but Notepad++ is easier and highly recommended. Add your information, e.g., name, skills, work, portfolio, contact information, etc. and save the file.
Alternatively, if you want to do more on your website, you can try learning HTML5 & CSS. We have plenty of HTML5/CSS tutorials to learn from. Do check them out.
Task 2: Get Python And GAE SDK
Next, download and install the following software for editing and deploying apps to GAE servers.
Replace <your-app-name-here> with your application identifier on the first line of this file.
Save this file and close WordPad.
To add your personal website’s files to your local GAE app:
Open the local parent directory of your GAE app.
Open your app’s directory.
Delete the files named favicon.ico and main.py present in this directory.
Create a new directory (or folder) named www inside this directory. (If you want to change this directory’s name, you have to rename this directory and replace all www in your new directory’s name in the app.yaml file.)
Copy your website’s files (all files and sub-directories inside its folders, e.g. index.html) to thiswwwdirectory.
If everything goes well, then your app’s directory will have two files (app.yaml and index.yaml) and a sub-directory (www). The sub-directory ‘www’ will have your website’s files and folders.
Task 6: Deploy/Upload Your Custom App To GAE Servers
You have created your local GAE app and now, you need to check and deploy/upload your app to GAE servers.
To check your local GAE app:
Choose your app in GAE Launcher.
Click on Run.
You will be shown your website in the web browser on your computer. (If you don’t, backtrack and check to see if you followed the instructions in the tutorial correctly.)
To deploy your GAE app:
Choose your app in GAE Launcher.
Click on Deploy.
You will be asked for your gmail id and password. Enter your account’s credentials and pressOK.
You will see a Python window detailing the progress of the upload operation. It will take some time to upload your app depending on your Internet connection’s speed.
If you followed the whole procedure precisely, then by this time, you must be having your own website hosted on the web. You can check your website at <your-app-name>.appspot.com If you successfully hosted your website at Google App Engine, don’t forget to share your App Engine’s website address through comments.