I/O Content Blog
A simple HTML, JS and CSS blog backed by I/O Content API driven CMS
This simple blog is the official I/O Content blog code, and an example of how I/O Content can be used to manage content for websites. You can also use this example to run your blog using content in your I/O Content account. The blog includes optional Disqus comments integration
This blog uses simple HTML, JS and CSS, backed by the I/O Content API which serves content entries in response to a query sent over an HTTP GET request using the io-content-js library.
The required files required to run this blog are the
style.css and the
Note this blog is not available as a bower package, and all dependencies have been copied to the respository so you can simply copy deploy this website on any web server. This will not run from the local file system, so you will need to run via your local web server (e.g. Apache / IIS) to test.
Configuring ths blog
This example pulls content hosted in our 'blog-example' sub account. You'll need to set up you're own sub account and content types and edit the sample as appropriate. Full documentation for I/O Content describes how to manage content, set up content types and query the API.
Once you have an account at I/O Content, open up app.js and edit blogConfig at the top of the file:
The dependencies for this project are:
- io-content-js - for querying the I/O content API
- AngularJS - for rendering UI / managing routes
- gridism - for a light weight CSS grid
- github-markdown-css - simple markdown / html styling
All dependencies are commited to this repository so there will be no need to reinstall from bower.
Note that I/O Content is queried via REST API, and io-content-js simply assists with making cross domain requests compatible with all major browsers.
How content is loaded
The core content fetch code is as follows:
1. Set up the content client
2. Request a list of content entries and load the first into view
Content Assets managed in I/O Content are loaded from our CDN using plain HTTPS urls. Where requesting images, our CDN offers 'on the fly' image resizing, specified here using the
?maxHeight=80 query string argument. Resized images are cached in the CDN for fast load times.
Other file types are also served over the CDN in the same manner.
Which retrieves the following image: