•   18 Comments post

Create a simple website with the Google Docs CMS

In attempt to solve one problem, I figured out a way to easily publish and manage data on the web by using a simple Google Documents spreadsheet. What I was trying to do was come up with the simplest way possible to manage my Josh Can Help network page. What I realized is that, with a little extra work, you could manage a whole website.

The Google Docs CMS

Update 5/19/2011: There was a bug in this script that only allowed for 9 menu options. Apologies for the trouble and this has been corrected. Just download the new package below and replace your index.php with the new one (make sure to update your feed URL).

See the GDocs CMS in action!

Download the GDocs CMS

For those not in the know, a CMS is a Content Management System, a web application that lets you add and edit live web content. WordPress, the system I use over-and-over (for good reason), is a CMS and a great one at that. But, in some cases, it is a bit over the top. What if you just needed to publish information without a lot of regard to the intricacies of presentation? That’s where this system comes in.

The Google Docs CMS lets you publish and manage information on the web using just a Google Docs spreadsheet published as RSS (easy to do, I’ll show you how). The script takes each row and turns it into its own page then creates a list of pages on the left. A site example (which serves as documentation) can be seen here: Google Docs CMS.

How do I use it?

All you need to do is download the package, follow my directions to create a spreadsheet, put a line of information into the script, and upload it to your web server. The script takes the Google Doc feed, parses the information for each page, and displays it a certain way.

What can I do with it?

In an effort to make these sites as easy to manage as possible, I restricted the number of built-in content to 4 types:

  • Regular paragraphs (which can accept HTML)
  • Headings (h2 tags only)
  • Images (can pull automatically from your server or an external source)
  • Links (creates  its own line and doesn’t support link text [yet])

Just indicate the content type in one column and the content itself in the next. It’s all in the documentation.

Can I customize it?

I created an external stylesheet that can be used to change how the page displays (you’ll need to know your way around CSS). I also built in a few configuration options in the beginning of the file to change a few functions. I am very much a beginner with PHP so the code should be simple enough to understand for those in the know.

Questions? Problems? Issues?

Please go ahead and leave comments below if you are having trouble or want to know how to change something. Also, if you’re a PHP developer and have some feedback for how this was implemented (good or bad), I would really appreciate it.

As an aside…

This is my first attempt at a self-contained (and remotely useful) programming project of any kind. Like I mentioned, I’m a PHP beginner but use it a lot between WordPress customizations and static sites. I really enjoy using the language and the documentation on php.net is really, really impressive (the user comments are amazing). I try to use it as much as possible and I think the only reason I’m not much better with it is that I don’t give myself (read: have) a lot of time to practice.

Anyways, this was a very eye-opening exercise and one that I enjoyed very much. Truth be told, I wrote this during a long weekend I spent back in Seattle, so, essentially, on vacation. There was a little bit of frustration but a lot of “oh wow, cool!” – enough to keep me plugging away at it. String functions in PHP are fantastic and it’s amazing how easily XML documents can be parsed with just a tiny bit of code.

I’m looking forward to putting out little piece here and there, including a WordPress plugin in the future (I think that’s just to say I can). As I mentioned above, your feedback is very important to me, particularly if you’re skilled enough to find problems in the code and can tell me how to do it better.

Thanks!

Authored by: Josh

Josh Cunningham is a life-time geek with a passion for creating great things on-line using standards-compliant, modern techniques and open source software. Josh spent the first 6 years of his career supporting, teaching and documenting mobile technology before moving out of state to pursue a degree in chemistry. He came to his senses before graduating, however, and starting learning WordPress and front-end engineering, building up a client base before he had received his degree. For the last 6 years, Josh has been teaching, learning, designing, building, and writing about the web.

18 comments

  1. Max commented on December 3, 2009   —   Link      Reply

    Hi, Josh!

    I tried to use Your great CMS with russian letters. And the script is not possible to find the needed page. http://spreadsheets.google.com/pub?key=tA7qtUybWQF21KoXbUrI3Pg&single=true&gid=0&output=html – here is the excel file. and here is the result – http://go2cyprus.ru/. Everything works except the page with russian name.

    Is it possible to fix this? Or is it possible to have different words for page URL and link in the navigation menu?

    Waiting for Your reply. Thanks in advance!

    Max

  2. Josh commented on December 3, 2009   —   Link      Reply

    Hey Max, thanks for the comment… sorry for the confusion with the approval thing!

    It looks like you’re outputting as HTML rather than RSS so that might be a problem (your output should be RSS and look like this: http://spreadsheets.google.com/feeds/cells/tDnaIRLX1kMMO02Fcgb7vkg/od6/public/basic?alt=rss). But when I go to your site, it seems like everything is going OK except for the 404 page. I think that there is a problem with PHP reading the Russian character(s). You get a 404 when the script doesn’t find a match between what is in the query string (page=?-???) and what is in the Google Doc.

    Try outputting the spreadsheet as RSS and post that link and we’ll see if we can find the problem. I might be able to change something small to have ti work with these characters (and maybe others like Japanese or Arabic).

    Thanks Max!

  3. Max commented on December 3, 2009   —   Link      Reply

    Josh,

    Thanks for a quick reply!

    I gave the wrong link )) http://spreadsheets.google.com/feeds/cells/tmL0MooJayZKUBtHrNYTd3w/od6/public/basic?alt=rss – here is RSS. In the index.php file everything is correct.

    Russian characters render correctly in RSS and in the URL, but the script does not understand it.

    Maybe it is possible to make two variables: first – will be the ID (name) in the URL (here I may write ‘about’), second – will be part of navigation list (and here I may output Russian version of ‘about’). I think that it might work for all languages (if it is possible of course).

  4. Josh commented on December 3, 2009   —   Link      Reply

    Happy to help… I just re-added comments on here and I’m psyched to see some interaction on here.

    OK, I figured out the problem. When you input Russian (or any other character) into a URL string, it encodes it in a particular way. My script was comparing the unconverted information from the Google Doc to the encoded info from the URL so it never found a match in your page list. All I had to do was decode the URL and it works just fine!

    I need to make a new download package and upload it to the server. I’ll do that later on today and you’ll see an updated version at the green link above (there will be some indication it’s updated).

    Thanks for helping me find a fairly critical issue!

  5. Max commented on December 3, 2009   —   Link      Reply

    thanks for your help, Josh! U really can help :)!
    i will write a comment after some tests)

    Good luck 2 u, Josh! Keep up good php work :)

  6. Rob commented on January 29, 2010   —   Link      Reply

    Really cool. Really simple.

  7. peter commented on April 13, 2010   —   Link      Reply

    cool post. to be truthful i am not sure i got it completely. but, wanted to chip in and leave a comment anyway. are you a writer by vocation?, because your blog is really good.

  8. Carita Liebhardt commented on May 30, 2010   —   Link      Reply

    very interesting, learned a lot!.

  9. Phillip commented on April 25, 2011   —   Link      Reply

    Hey Josh,

    Great concept and Great Script!

    I am using it to set up a little display site for a friend who has his book in spreadsheet form. (Not ready for publishing so I can’t put URL here) It is working for first nine rows, then not. Looking in the XML, all the pages are there, they are just not all displaying in the CMS view. Any ideas? I can send you urls oflist of you email me.

    Thanks for your help.

    • Josh commented on April 25, 2011   —   Link      Reply

      Thanks for the comment… I’ll send you an email and see if we can figure it out!

  10. Danilo Figueiredo commented on May 20, 2012   —   Link      Reply

    Great post. I just published my portfolio ( http://www.grifo.tv ) built with CoffeeScript, Backbone.js, jQuery Isotope, Paper.js and Google Docs spreadsheet as CMS. It is opensourced on Github ( https://github.com/grifotv/grifotv-portfolio ), feel free to fork it.

    • Josh commented on May 20, 2012   —   Link      Reply

      Wow! That looks great, nice work with that! How do you like working with Backbone?

  11. Danilo Figueiredo commented on May 20, 2012   —   Link      Reply

    Backbone is great, works really well with CoffeeScript.

    • Josh commented on May 21, 2012   —   Link      Reply

      Very cool, I’ll have to get more familiar with it…

  12. richard commented on November 29, 2012   —   Link      Reply

    Hi Josh,

    This is amazing, just what I need to run a catalogue site with multi-contributors. Just wondering if you might be able to point me in the right direction to make a slight amendment to the way it displays.

    I want the home page to display all the links (as it does now) but on the actual pages themselves just a striped back nav menu with “home” “contact” etc. I guess it’s just a case of putting an “if” clause in somewhere, just not sure at what point I’d need to add it.

    Thanks

    Richard

    • Josh commented on November 29, 2012   —   Link      Reply

      Thanks Rich, glad you’re getting use out of it!

      Looking at this quickly … the list on the left is

        , which you can find in index.php. Use $_SERVER[‘REQUEST_URI’] to figure out if you’re on the home page or not and serve a different menu if you’re not.

        Hope that helps!

  13. richard commented on November 29, 2012   —   Link      Reply

    Top stuff. Got it working with a little trail and error.

    If anyone else is after same functionality then the code I used is below (Iexpect some of this will go missing as I’m not sure how to paste code!):

    if (($_SERVER[‘REQUEST_URI’]) == ‘/index.php’)
    {

    $theNav = ‘
    ‘;

    foreach ($allLinks as $oneLink)
    {
    $linkText = str_replace(‘-‘, ‘ ‘,$oneLink);
    $theNav .= ‘
    ‘ . $linkText . ‘‘;
    }

    $theNav .= ‘
    ‘;

    } else

    $theNav = ‘
    ‘;

    $theNav .= ‘
    Home‘;

    $theNav .= ‘
    ‘;

  14. Josh commented on April 7, 2013   —   Link      Reply

    Thanks Richard … this is going to go through a refactor here soon.

Leave a Reply

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

Comments are held for moderation