February 12, 2013

Fast & Super easy Web hosting & editing with Google Drive & Notepad++

@reicek
Google Drive Developer Expert




Anyone else likes Coding on Notepad++? It's my personal favourite! (yeah, I'm kinda oldschool) anyway, just found out that opening the files on my Google Drive Desktop with Notepad++ to edit my public HTML/CSS/Javascript on the cloud allows me to update my pages super easy.

It's a super lightweight approach that runs smoothly even on a netbook... and the changes gets reflected on your pages almost instantly! I just click on "Save All", wait a few seconds until the Drive icon stops blinking... and voila! You can even check the behavior of your code very quickly just by refreshing the page on different browsers, which is really fast even on a netbook... Priceless (Literally, because it's all free!).

Kudos for the Google people for making this possible... Publishing/editing html code have never been so easy...

It works with most SDK´s (E.g.Netbeans), but Notepad++ its lightweight, free, and doesn't require setup... Using this approach, even from scratch you can get all you need to make/administer some nice sites, for free in less than 10 minutes and still have some nice features beyond simple Notepad editing...

To create a folder on Google Drive to host your code, create a folder from Google Drive and right click on it, click on "Share" and then make it "Public to the web". If you put a index.html file, it will open it by default, if not, it will open a page with a list of the files (links included) inside the folder.

To access the folder as a web site first you need the folder's id , to find it go to the public folder you created on Google Drive and check the URL at the top of your browser in the following part:

https://drive.google.com/#folders/folderId

Now replace it on this new URL, this will be the public URL of your new html site/app

https://googledrive.com/host/folderId

But the URL it's too long and hard to remember right? Well, don't worry since the guys from gweb.io created a very easy way to add (for Free!) a custom URL for your gDrive hosted apps/sites, you can even use your own domain if you want to!

To get a custom URL for your public gDrive folders, go to gweb.io, find the folder you just made public and write the URL that you wish for it and click add, if you don't have your own domain you can use for free URLs like this one:

customUrl.gweb.io

Done, it's THAT easy! Remember this works for any kind of files hosted on Drive, you can take advantage of the collaborative nature of Google Docs and use a gDrive public folder for you next homework, business project or even photos and videos.

Here you can check a nice example of a webpage that uses Google Drive HTML hosting and gweb.io custom URL service:

http://alpezlanding.gweb.io/

This approach it's awesome for Fast and Collaborative HTML Project Development, it makes it so easy to work with the designer and the client for all changes gets reflected instantly on the published prototype, both designers and programmers can test for changes (big and subtle) on the site itself and do all the necessary fine tuning.

So the next time a client tells something like "and would the title look in red?", it will only take you seconds to update it and you can say, "ok, click "Refresh" on your browser and you can see for yourself", everyone will be so happy.

Looking to get even more juice out of Google Drive HTML hosting service? Check out this article about how enable Offline functionality to your gDrive hosted sites and apps.

Happy coding!