So we've now created our Google Sheet backend for Hyde and it's published, now we need a way to display the other data we're going to put there. To do this I've stood on the shoulders of giants and used all sorts of tools and libraries. Of course I've used jQuery but the layout is nigh on pure BootStrap (I guess I should use BootStrap 3 but I've not gotten around to using it just yet). Along with those fine libraries I'm also really rather keen on jsRender so I'll sling that in there as well.
Apart from those we'll use showdown.js and highlight.js and various other things as we see fit. I've packaged all these files up in a git repo so you're welcome to download them and for testing you can place them in a folder in your Google Drive, in Dropbox folder using site44 or set up your GitHub pages.
Once you've downloaded the repo all you need to do is make a couple of changes to the index.html file. On line 24 replace [LOCATION OF YOUR BLOG] with the actual URI for your site and rename it if you like. On line 43 replace [ID OF YOUR GOOGLE SHEET] with the id of your Google Sheet. Save and you should end up with something like the image above.
On my version I've implemented a comments system using a Google Form and various bits of jiggery-pokery, by all means have a squint and implement my version if you'd like but be aware that I'll be actively developing on there on-and-off so things are likely to change.
No comments:
Post a Comment