Back to blog

How to create a blog with enduro.js

Monday, 16 January, 2017

Complete example files is available at: https://github.com/Gottwik/enduro_samples/tree/master/simple_blog

This is a short guide on how to get a simple blog up and running on your website in these easy 4 steps:

Create blog entries

Each entry is nothing more than a generator item. To set it up create a template in /pages/generators/blog.hbs. To keep it simple, just have this there:

<article>
    <h1>{{blog_title}}</h1>
    <p>{{blog_text}}</p>
</article>

As you can see, each blog entry will have it's title and text. So let's set up the content file. Create a first blog entry in /cms/generators/blog/hello-blog.js with this content:

{
    blog_title: 'This is a hello blog entry',
    blog_text: 'You just learned how to create a blog with enduro.js'
}

Run enduro dev and notice your blog page is live at localhost:3000/blog/hello-blog. Nice, right?

Create blog list page

Now we need to create a page that will display all the blog entries. Just go ahead and create file /pages/blog.hbs with this content:

{{#blog}}
    {{#each this}}
        <article>
            <h2>{{blog_entry.title}}</h2>
            <p>{{{blog_entry.text}}}</p>
            <a href="/blog/{{page_slug}}">Read more...</a>
        </article>
    {{/each}}
{{/blog}}

Notice the blog helper. This helper will provide the list of articles. Go ahead and create it in /assets/hbs_helpers/blog.js with this content:

var _ = require('lodash')
var Promise = require('bluebird')

enduro.templating_engine.registerHelper('blog', function (options) {

    // will store all the blog entries
    var blog_entries

    // get_cms_list will return a structured list of all pages in a project
    return enduro.api.pagelist_generator.get_cms_list()
        .then((pagelist) => {

            // will store the promises from reading all the blog entries
            var get_content_promises = []

            blog_entries = _.chain(pagelist.structured.blog)
                .filter((o) => { return typeof o === 'object' }).value() // filter pages only

            // goes through all the blog entries and loads their content
            for (page_id in blog_entries) {
                var page = blog_entries[page_id]

                function get_content (page) {
                    get_content_promises.push(enduro.api.flat.load(page.fullpath).then((content) => { page.blog_entry = content }))
                }

                get_content(page)
            }

            return Promise.all(get_content_promises)
        })
        .then(() => {

            // pass blog entries as context for the template
            return options.fn(blog_entries)
        })
})

This implementation uses lodash and bluebird promises. These are used in enduro.js, but we should still declare them as dependencies of this particular project by running npm i lodash bluebird -S

Hey, we are done. Your blog list is accessible on localhost:3000/blog

Adding more blog entries

You can always just create another file in the /cms/generators/blog folder which will create more pages for you.

Nicer way to do this is to add a blog template at /cms/generators/blog/blog.js. This will defines the structure for a blog entry:

{
    blog_title: '',
    blog_text: ''
}

Now add a admin user by running enduro admin add test test which you use to login at localhost:5000/admin. Now you can add blog articles using the admin as well.

Next steps

You know...

Back to blog

Shout out to pexels and freepik