Learn to customize your own blog with confidence

Code it Pretty is an archive of tutorials from 2012-2015. Tutorial details may be outdated. More Info

How to Host a Website on Google Drive

How to host a website on Google Drive

This tutorial is obsolete. Google will deprecate this feature on August 31, 2015. You can read Google's announcement here.

Recently, Google added an exciting new feature to Google Drive — web hosting! Now you can build a website with HTML, CSS, and JavaScript files inside your Google Drive account. And did I mention that it's free? Yep, it's just one of the little perks that comes with a Google account.

You can see a live demo of a basic webpage hosted on Google Drive here.

As you can see from the lengthy, unmemorable URL of my demo site, Google Drive isn't an ideal hosting solution for your main web presence, but it's great for experimental or "limited time" sites, like event invitations or temporary promotions.

This tutorial is meant to show you how to use Google Drive for hosting, so I'm not going to cover how that demo page was designed. But, you're welcome to use its HTML & CSS for your own project if you like.

What You Need to Use This Tutorial

  • A Google account — Drive is included!
  • A plain text editor or an HTML editor (try Brackets if you don't already have a favorite.)

That's it for materials! To make use of Google Drive hosting, you should also know how to make a basic HTML website.

Step One: Prepare Your Files

At the bare minimum, to host a site on Google Drive you need to create a public file folder and put an index.html file inside it.

As you write your site's HTML, you can use relative paths for your images, CSS stylesheet, and JavaScript (if any).

Your relative path to a file within the same folder as your index.html file is just the file's name. Like this:

background-image: url(handmadepaper.png);

If you're building something a bit more complicated, you may want to organize your files into image, CSS, and JavaScript folders to keep things tidy. Your relative path to an image in a separate folder would look like this:

background-image: url(images/handmadepaper.png);

If you're using any external files in your website, like a JavaScript library or a web font hosted elsewhere, link to the secure version of that file (if possible). Google Drive sites default to https, and if you have any insecure links your visitors may get security warnings when they visit your site.

Step Two: Add Your Website to Google Drive

There are two ways to add your site to Google Drive; if you use the desktop version of Google Drive, just move your site folder into your Google Drive folder, then go to Step Three.

If you don't use the desktop Drive, you can upload the folder through the Google Drive website. The fastest way to upload a folder to Google Drive online is with the Chrome browser, since Chrome allows you to upload whole folders.

To add your website through the web interface, log in to drive.google.com. If you're on Chrome click the arrow next to the "Create" button. Then, upload your whole website folder.

If you're not on Chrome, click the "Create" button first to make a new folder within your Drive. Open that folder, then click the arrow button to upload each of your files into that new folder.

Step Three: Make Your Site's Folder Public

Once you've got your website's folder in Drive, you're just a few clicks away from publishing!

Go to the Drive website and click the checkbox next to your folder's name. Click the "Share" button above (it looks like a person with a plus sign next to their head).

On the next screen, under "Who Has Access", click the "Change" link next to the default "private" setting.

On the next screen, set the "Visibility Options" radio button to "Public on the web", then press the green "Save" button.

Step Four: Get Your Page URL

Once your website's folder is public on the web, you're ready to get its shareable URL. Go into your website's folder through the web-based Drive interface and click on your index.html file. Drive will open the file in a lightbox screen. Click the "Open" button at the lower right corner of the screen.

Once your file is open, click the "Preview" link near the top of the screen.

The preview link will take you to your live page. The URL in the address bar is your new site's URL. You can share that link with anyone and they can go check out your newest web creation!

Getting Started with Pinterest Analytics

Pinterest analytics

This post is OUTDATED. In August 2014, Pinterest completely revamped and significantly improved their analytics. An overview of the new analytics is available on the Pinterest Business blog in this post: How to use Pinterest Analytics to change the way you Pin.

It's been a long time coming, but Pinterest has finally released analytics! If you have a verified domain on your Pinterest account, you can now track stats for Pins from your website.

How to Access Pinterest Analytics

  1. Verify your website with Pinterest. Pinterest needs to know what site you own before they can show you the analytics! If you blog on Blogger, Wordpress.com, or Tumblr, you can find instructions for verifying your site here. If you're on self-hosted Wordpress, use Pinterest's meta tag instructions here.
  2. Switch to the "New" Pinterest, if you haven't already. When you log into your Pinterest account you'll be asked if you'd like to switch to the new look. Switch over and you'll be all set to check out your analytics.

Once you're verified & switched to the new Pinterest look, you can reach your analytics page by clicking on "Analytics" in the user menu dropdown at the upper right of the page.

Pinterest Site Metrics

The first page you'll see in Pinterest analytics is the Site Metrics dashboard. There's quite a bit of data there, so let's break it down.

Setting the Date Range

By default, the site metrics show you the past 14 days worth of stats. You can change the date range by using the datepicker to the left. You can quick select 7, 14, or 30 days, or you can select your own date range from the calendar. Stats go back to your original verification date (November 1, 2012 at the earliest).

Reading the Graphs

The four graphs on the Site Metrics page all have the same format — in the box to the left, you'll see a daily average of each metric, and in the graph to the right you'll see the actual daily stats from which the averages were derived.

Pins & Pinners

This shows the count of Pins from your website and how many individual people ("Pinners") Pinned something from your site.

Repins & Repinners

This shows how many times Pins from your site have been repinned, and how many people made those repins. Keep in mind, this is not a measure of repins of your Pins — it's repins of Pins from your site.

Impressions & Reach

This metric is very different from the first two stats, and it was the most elusive, until now. Impressions & Reach show you how many people are seeing your Pins, even if they didn't click on them. As Pinterest has described this metric, it seems that it measures impressions and reach of your Pins, not just Pins from your site.

"Impressions" shows how many times your Pins showed up on the main page, in search results, or on people's boards. The "Reach" shows how many people "saw" your Pins in their feed. Whether or not they actually looked at them can't be measured, but you can at least know that your Pins were on their Pinterest page.

Clicks & Visitors

If you track Pinterest visits in Google Analytics, you already have access to this information, but it's always good to have more than one source! "Clicks" shows you how many clicks went to your site from Pinterest. "Visitors" shows the number of individual people Pinterest sent you.

Most Recent, Most Repinned, Most Clicked

These three options are fairly self-explanatory; they let you see the most recent Pins from your site, the most repinned, and the most clicked in your date range. By default these are set to a one-day range, but you can use the datepicker to set a longer date range.

While this is visually very cool, it's a little tricky to get more detailed information about each of these pins. For example, if you want to find out just how many times the "Most Repinned" were repinned, you have to go to the board they were Pinned to and find the Pin to see the repin count. I don't know why this isn't just displayed on the Pin like it used to be. Maybe Pinterest will add it back :)

Go Check Out Your Stats!

You're all set to get the most out of your Pinterest analytics. Get in there and do some digging; you'll learn a lot about what your readers love about you, and you can use that to give them even more to love!