Skip to main content

Host a static website on Google Drive (in 5 easy steps)

You need to host a static website but don't have the time, money or resources to set up a web server.  Perhaps you're learning to code or just doing a demo. Here's a way to set up a web site at no cost, in just a few minutes.

Step 1. Create a new folder in Google Drive.

From Google Drive, Click 'Create', select 'Folder' and enter the folder name.
(I chose 'hybrid' for this example, but you can choose anything you want).














Step 2. Share the folder.
First select the folder you created (displayed in the folder list), then click the sharing icon.









In the Sharing Settings popup, go to the 'Who has access' section and click 'Change'


The Visibility options pop up will appear. Change the Visibility option to 'Public on the web'. 
Although set by default, make sure that 'Access' is set to 'Can view'.
Click 'Save'.



















The folder is now shared. Click Done.




3. Upload your web content.
Open the folder and drag/drop your web content into the folder.
You can upload HTML, JS, CSS.  (I'm sure you can try media files as well but I haven't).

(Note: I have used Hakim El Hattab's Stroll.js CSS experiment for this example. You can find the original content at http://lab.hakim.se/scroll-effects/ ).













Double check that the files are also publicly viewable.

4. Create your site URL.
Your Google drive folder is accessed using a specific URL. The site URL has the following structure:
Google Drive host / folder ID / your web page.html

First get your folder's unique identifier. Look in your browser address bar, the URL will end with a long unique string after the last "/".




Copy that long string.  Based on this information, we have:

Google Drive Host: https://www.googledrive.com/host/
Folder UID: 0B8SIN8IVD8DGRFByVGZ0Vjdfcnc    (** yours will be different)
Web page: index.html (this is the name of your web page)

Open up your favourite browser and enter the following URL (use your folder UID and web page name)

https://googledrive.com/host/0B8SIN8IVD8DGRFByVGZ0Vjdfcnc/index.html

Your web page should now display. Yay !! Almost there.

5. Make the URL a friendly one.

That URL is a little long - so the final step is to use a URL Shortener such as bit.ly or goo.gl

Copy your URL and enter it into your chosen URL shortener. Once converted you will have a short and simple URL such as http://bit.ly/1kCcqsO or  http://goo.gl/69KvBD


























Enjoy !!


Labels:

Comments

Post a Comment

Popular posts from this blog

How to get the BBC iPlayer running when you live outside of the UK

(subtext: Get the World's most famous detective on your favourite browser) The new series of Sherlock has started on the BBC. If you live outside of the UK and you are too impatient to wait for your local TV content provider to host it for you - then fear not !! These simple instructions will get you up and running. In addition to the iPlayer you can access most of the other UK TV channels using the same method. Note: you can use the same method to access content in other countries - such as Hulu in the U.S. How it works:  In simple terms, the BBC iPlayer, like other players, perform a check to determine whether your internet access is originating from the UK.  So the trick is to ensure that your access to the BBC website will originate from the UK. First you are going to use a free piece of open source software that was designed to keep your internet access anonymous. You will add a setting that will ensure that the software makes use of servers in the UK whenever ...
12 comments
Read more

Skip the grunt work: Use AI to turn raw data into Slides (Part 1)

Scenario You've got to create a presentation using data from multiple CSV files. Typically, this means merging files into a single spreadsheet, generating charts, and copying everything into your presentation—an absolute time sink! Let’s fix that. Here’s a free, no-code approach using Google Workspace tools and a sprinkle of automation. This is Part 1 of a two-part series. The Problem Simplified: Multiple CSV files in a consistent format (I used stock data). The goal: Combine into one Spreadsheet for easy analysis and charting. How: Instead of manual copy-pasting, we’ll automate the process using Google Apps Script and Chat-GPT for code generation. What You'll Need: Google Apps account: A free Gmail account will work perfectly. Access to Google Drive , Google Sheets , and Google Slides. Chat-GPT 's free edition for code snippets. Step-by-Step Solution: 1. Collect your data Upload the CSV files to Google Drive. Copy the Drive folder ID. The folder ID is the part of the URL ...
Post a Comment
Read more