29  Building our Ship’s log blog

OK, now we are going to apply this “baking” concept to our Ship’s Log blog pages. We’ll automagically create a new page for each blog entry that has been written in a Google Doc.

Remember we need three things: The data, the template, and a config to marry them.

29.1 The blog data

  1. Open this Pirate blog doc. As you do so, you’ll be asked to make a copy of your own, which I want you to do.
  2. Click on the Share button and make the document “viewable” to “Anyone with the link”. This has to be done to download the data into our project.
  3. Look at the structure of the data
    • The parts between :skip and :endskip are directions and examples for you.
    • Below that are three blog entries. The only difference between this and the books example is a new structure for [.+post] at the beginning of the blog text, which also has the ending []. This structure allows us to have clean paragraphs of text in our blog entries.

29.2 Config the data

  1. Open your project.config.json file.
  2. In the files array, we need to add a new value. You can copy/paste one of the other examples, but make sure you include the comma that separates each entry.
    • Update the fileID with the ID of your new Google Doc. It’s the part of the URL just before /edit/.
    • Set the type as “doc”.
    • Set the name as “blog”.
  3. Save the file.
  4. In your Terminal, quit browsersync with Control-c.
  5. Run gulp fetch.
Warning

If you had problems with gulp fetch before and went through these steps then you already have the data and can move on. But do reach out to me so we can fix it.

The gulp fetch process should now download four files, and “blog” should be one of them. If it doesn’t work, read the error. If it says something about “Unexpected token” or “parse error”, then it’s likely your project.config.json file is not configured properly. If it says something like “The caller does not have permission”, then you haven’t set your Google Doc to be “viewable” to “Anyone with the link”.

29.3 Create the bake-blog template

Now that we have data, we need to create our template. Because baking templates are a bit special, I like to name them with the word “bake-” so I know what they are being used for.

  1. Create a new file in src/njk/_templates/ called bake-blog.njk.
  2. Put the following code inside the template and save it. I’ll explain it after.
{% extends '_templates/base.njk' %}
{% set relative_path = "../" %}
{% from '_macros/prose.njk' import prose %}

{% block page_title %}{{ headline }}{% endblock %}

{% block page_description %}{{ headline }} by Capt. Crit McGillicutty{% endblock %}

{% block content %}
  <article class="container">
    <div class="row">
      <div class="col-sm-4">
        <img src="../img/pirate.jpg" alt="pirate character" class="img-fluid">
        <p class="byline">By Crit McGillicutty<br>
        <span>Island Breeze Tribune</span></p>
        <hr class="d-sm-none">
      </div>
      <div class="col-sm-8">
        <img src="../img/{{ image }}" alt="" class="img-fluid mb-4">
        <h1>{{ headline }}</h1>
        {{ prose(post) }}
      </div>
    </div>
  </article>
{% endblock %}

This code is very similar to the bake-books.njk template with these exceptions:

  1. {% from '_macros/prose.njk' import prose %} near the top of the file is something we need to process our multi-paragraph blog post.
  2. { prose(post) } is the variable to pull that post data. We are wrapping that “post” data in the prose macro to create a new <p> tag for each paragraph.
  3. Also note the src tag for the images. They have to include ../img/ as part of the path because we’ll be building these pages inside a blog/ directory, and the photos are in the parent directory inside an img/ folder.

All that code was pre-written because this is a common thing we have to do in projects. All you need to do is to remember that when you use multiple paragraphs you have to format your original Google Doc correctly (with the [.+tag_name] thingy), to include the macro, and to wrap the item in prose(tag_name).

29.4 Marry the data to the template

Now it’s time to match these two things in our our config file.

  1. Open the project.config.json file.
  2. In the to_bake array, add another item like the existing one, making sure that you have a comma between them.
    {
      "template": "bake-blog",
      "data": "blog",
      "array": "blogs",
      "slug": "slug",
      "path": "blog"
    }

Note the differences in the key values. Review these key values and compare them to the books example. All the values are new (though we used the term “slug” in both data sets).

With this configuration, we will create our new pages inside a folder called “blog”, and each page will be named using the slug value – which is a url-friendly date in our data – so the pages will end up something like blog/2019-10-18.html.

29.5 Let’s bake

OK, now it’s magic time. We have to restart our dev environment to get everything baking.

  1. In your Terminal, quit browsersync.
  2. Run gulp dev.
  3. If you look in your docs/ folder, you should see a new blogs/folder with two pages inside.
  4. In your browser, you should be able to modify the URL to be http://localhost:3000/blog/2019-10-18.html and see the first blog post. (Your number after localhost: might be different, though.)

29.6 Add a blog loop to the index

Now it’s time to include a list of our blog entries on the index page. You’ll use what you’ve learned about loops when you did the pirate ships and then apply them here. I’ll guide you a little, but I want to you to think a bit about it on your own.

I’d like you to build a list of blog entries on the home page, and include the date of the entry, the headline and link to the blog entry. Here are some hints and things to think about.

  1. You have the blog data in context to use in a “for” loop. You are pulling from blog.blogs.
  2. You can build the HTML within the loop and use the data variables to get the headline, date and slug. The slug can be used to build the href to the blog entry. Just think about the path of where the blogs posts are relative to the index. The pages end in .html.
  3. If you build the loop in the same row/col as your intro text, then it will be the same width as that and look pretty decent.

The “look” of these are up to you. You might keep it simple.

29.7 Add a new blog entry

Once you have your index blog post loop going, I want you to add another blog to your Google Doc and fetch it into your project. Some thoughts on that:

  1. There is a template at the top of the Doc. You can copy/paste that below the :endskip and fill it out.
  2. Set the slug as 2019-10-20.
  3. Use the kraken03.jpg photo.
  4. Add your own pirate ipsum or write something yourself, but use multiple paragraphs.
  5. You’ll need to quit your browsersync and use gulp fetch to get the updates. Once you run gulp dev again you should see the new entry.

29.8 Clean up and republish to Github

Let’s finish this out.

  1. Clean up _includes/nav.njk to remove the bits about the example index and the Library books, since we aren’t using those. You might peruse that books list while you are there, as it is another example of using loops.
  2. Make sure all your pages have a good page title and page description. Remember that you update this using a block page_title and block page_description.
  3. Commit everything and push it again to Github. Make sure your site works well on the published link, as sometimes issues arise in publishing that are not apparent in your dev environment.
  4. Turn in your Github repo link to the Canvas assignment.

Your done!