How To Host A Stunning & Responsive Website Like This One – For Free On Google Drive!

Most people don’t know that you can actually host full blown web site, that is responsive and uses HTML, CSS and JavaScript files, for free on Google Drive.

Update: Sadly Google has announced that they are phasing out the ability to host websites in Google Drive but you can continue to use this feature until August 31st, 2016. Read more here.

Solid - a free bootstrap theme from blacktie.co

I am going to show you how you can host a website like this one on Google Drive. A site that is built on the Twitter Bootstrap framework (don’t worry, if you know basic html then you won’t have a problem customizing Bootstrap).

The theme I will be using is a free bootstrap theme from blacktie.co and is called Solid (live demo here).

Step 1 – Download the free Bootstrap theme

Download the free theme from blacktie.co and unzip it.

Step 2 – Sign in to Google Drive

Sign in to your Google Account and go to Drive.

Google Drive

Step 3 – Create a public folder

Create a new folder in Google Drive and share it as “Public on the web.”

Google Drive

Step 4 – Upload the theme

Upload the folder named “theme” (101 files so this might take a few minutes) in the folder on Google Drive you just created.

Google Drive

Step 5 – Open index.html file

Click on index.html file and click “Open” in the bottom-right corner. In the new window click the “Preview” button in the toolbar.

Google Drive

Step 6 – The site is live!

Your responsive website based on the Twitter Bootstrap framework is now hosted on Google Drive and is “live” on the web. If everything has gone according to plan it should look like this.

That wasn’t so hard was it! Now it is up to you to customize the Bootstrap theme and make it into what you like. You can edit the files offline in notepad or using a free html editor like html-kit or notepad++.

When done you simply delete the ‘old’ file on Google Drive and upload the ‘new’ file from your computer.

A word of advice

Free web hosting with Google Drive is a good option if you want to throw up a simple website, however if you mean business I strongly recommend that you sign up with a good web hosting company.

For example Bluehost.com. For under $10 per month you will get your own domain name (included for free), email addresses, WordPress installation, around the clock support and much more.

[UPDATE]

If you want a nicer looking and more memorable URL then you should check out my comment here below on how you can prettify the URL, either using a folder alias or a subdomain or even your own domain name.

with 19 comments 0 6533

19 comments on “How To Host A Stunning & Responsive Website Like This One – For Free On Google Drive!”

  1. Pingback: How To Host A Website Like This One - For Free ...

  2. Tayller Johnson

    Thank you very much for your detailed review, you helped me a lot!

    Reply
  3. John

    Hi Matt,

    Thanks for the thoughtful posting. I’ve been searching for a solution like this.
    I’d like to ask you a quick question: If Google drive is used, can you generate a URL—or does someone just share it, like other Google Drive files?
    I came across this nicely done site for Google Map Customizing and read that this smart guy is hosting with Google using Bootstrap. Not sure how he does it. Anyway, if you need customizable Google Maps–check under “Misc” (http://www.chengfolio.com/)

    Again, Thanks for your posting.

    John

    John W Taylor

    Reply
  4. Giang Dang

    Good article. I will try it now.
    Thank you so much.

    Reply
  5. waqas butt

    something great you share with us…i love to experience this as well…btw can we attach our domain on google website? can take benefit to pursue my clients to avail this service…

    Reply
  6. Angei

    Hi! Is great to upload to your web site created with bootstrap. My website looks very different donot I did wrong, but I had a modified bootstrap template, upload the images but not the template appears, why?

    Reply
  7. Angei

    Hi! Is great to upload to your web site created with bootstrap. My website looks very different donot I did wrong, but I had a modified bootstrap template, upload the images but not the template appears, why?

    Reply
  8. Bani

    Hi Matt, thank you for your step by step method to show how to build responsive website. I must admit I have done something wrong and my website doesn’t appear online with BOOTSTRAP template. However I can view the website offline from my hard drive.

    Reply
  9. Stan

    Hi Matt,

    Thanks for all the hard work on your step by step method to show how to build responsive website using Google Drive! I followed all the steps and have managed to get the “SOLID” template to show up… problem is it only shows as text WITHOUT any formatting… any suggestions on where I’m going wrong??

    Reply
  10. Greg Nelson

    Hi there,
    I’m not able to get this working. I’m only able to see the source code displayed for the ‘Index.html” page. My Goole drive does not allow the Open function – only Open With – Google Docs etc. Not sure how to view this ‘Index ‘ page even though it is shared as ‘Public’
    please help,
    regards Greg

    Reply
    • Matt @ HostingKingdom

      Hi Greg, you won’t be able to open and edit the html file directly in Google Docs. You can only preview html files in Gdocs. You’ll have to work on it locally (e.g. notepad) and the upload and rewrite the current .html file. Alternatively, install the Google Drive Desktop App, edit your files locally, save and changes will be uploaded automatically. Good luck, I hope you get it to work. Send me an email to hello at hosting kingdom dot com and I’ll try to help you. Cheers Matt

      Reply
  11. Krzysztof DÄ…browski

    it does’t work any more…

    Reply
  12. Lena

    Hey
    First thanks for this great solution!
    Second: is it possible to use my google sites url for this? Friends of mine really like the bootstrap design i created and want it. but the have already paid for google sites and now i don’t know how it should work out… Any advise?
    Thanks!

    Reply
  13. Michael

    Hey,

    Is there a way to ask you question privately pertaining to this awesome blog entry?

    Thanks,
    Michael

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *