Fine Tuning Pelican: Connecting with Readers

Preface¶

This is one of the articles in a series about how I fine tuned my Pelican+Elegant web site to make it “more mine”. For other articles in the series, click on the title of the article under the heading “Fine Tuning Pelican” on the right side of the webpage.

Unlike my series on Choosing and Setting Up Pelican, these articles are intended to be byte sized, addressing specific fine tunings I made to my own website. As such, the first article in this series contains a Disclaimer section with generic information for each of the articles in the series.

Introduction¶

One of the most important things for a website to focus on is to connect to the people that are viewing the website. That focus is usually geared towards the readers that are attracted to the website’s content and retaining that focus. To retain this connection, a website needs to employ a number of tools to engage the readers and maintain their attention. Without employing these tools, any readers of the site will be transient and unlikely to return. This article discusses the tools that my website uses to engage and attempt to retain readers.

Social Media¶

As social media is so pervasive in today’s society, it is pivotal to add links to your social media accounts, as detailed in the Elegant article on displaying social media profiles. For my website, that configuration boiled down to the following configuration:

SOCIAL_PROFILE_LABEL = u'Stay in Touch'

SOCIAL = (
          ('GitHub', 'https://github.com/jackdewinter', 'github-alt'),
          ('linkedin', 'https://www.linkedin.com/in/jackdewinter/', "linkedin"),
          ('RSS', 'https://jackdewinter.github.io/feeds/all.atom.xml'),
          )

Together, these configuration settings provide for the Stay in Touch section at the bottom of the right sidebar, containing icons that will take you to social media associated with the website. The one outlier to this is the RSS icon that appears at the end of the other icons. While technically not a form of social media, by following the Elegant steps outlined here, this useful icon is added and placed in a location that is easily accessible for any readers to use in their automation.

Allow Readers To Comment¶

To establish a sense of community and utility with the website, it is important to allow readers to make comments on your articles. While some of those comments may not always seem nice, it is important to try and engage with each reader’s comment, and figure out a positive manner in which to respond to it.

While Pelican does not support any commenting system itself, the Elegant theme has supported Disqus for a long time, and recently added support for Utterances. Going through the obvious features of each of these platforms, I quickly constructed the following table:

Based on that information, choosing Utterances was an easy choice for me. Registering with Utterances is also easy, with Elegant having taken care of a number of the steps for us.

Enabling Utterances For The Repository¶

Going to the Utterances website, my first pass at trying to figure out how to register was an utter bust, and I confess that I was somewhat confused. Taking a step back, I was able to figure out the following flow:

• made sure I have a GitHub account
• went to the Utterance application page
• clicked on the Configure button at the top right of the page
• picked the User or Group containing the project where the target repository for the comments is
• my repository for the website is jackdewinter\jackdewinter.github.io, so I selected jackdewinter
• verified my access to setup the account by providing the password
• this verification may not occur if you have verified your access within the last 10-15 minutes
• selected the repository jackdewinter.github.io from the drop-down list
• pressed the Save button to save these changes

While I was able to get this flow right on the first try, it did take me an additional time or two to get the flow documented correctly. Other than that, it was really easy to setup, with no misleading steps along the way.

Enabling Utterances In Elegant¶

Once I had the GitHub portion of Utterances set up, it was time to setup Elegant to make use of that setup. Following Elegant’s article on Comments - Enabling Utterances, I quickly came up with the following configuration changes:

UTTERANCES_REPO = "jackdewinter/jackdewinter.github.io"
UTTERANCES_LABEL = "Comments"
UTTERANCES_FILTER = False
UTTERANCES_THEME = "github-light"

In order of appearance in the above code block, the comments will appear as issues in the GitHub repository jackdewinter/jackdewinter.github.io tagged with the label Comments. At the bottom of each article, the Comments section is not be filtered out by default, shown to the reader using the github-light theme.

With these configuration settings in place, a quick publishing and hosting of the website showed that comments were now enabled for articles!

Testing Utterances¶

With the configuration in place, I performed a couple of quick tests of the newly installed comment system. Picking an article at random, I scrolled down to the bottom where a Comments section awaited me. Signing in through GitHub, I was then able to leave a comment that was persisted after a couple of page refreshes.

Opening a new tab in the same browser, I navigated over to my jackdewinter.github.io repository and clicked on the Issues button to open the Issues page for the repository. There under the Issues section was the URL of article that I selected with a Comments label on it. Opening up the issue, I was greeted with the test comments that I had entered previously.

Tuning Utterances¶

After reading the other articles in that section of the Elegant documentation, two other articles leapt out as being useful. During testing, I had noticed that there weren’t any text or images that separated the article from the comments, and I wanted to change that. The article on Comments - Invite Visitors To Comment provided a nice way to do this, so I followed their suggestions and made the following change to the configuration:

COMMENTS_INTRO="So what do you think? Did I miss something? Is any part unclear? Leave your comments below."

Another thing that I noticed during testing was that the comments were filed under an issue with the URL of the article. I want to be able to make small changes to the article title if need be, therefore basing the issue on the article’s URL is less than optimal. Luckily, the authors of Elegant thought about this problems and have an article on Comments - Thread Id that deals with it.

Without any changes, each issue will be attributed to the URL of the article. In the case of this article, that URL ends with:

/2019/10/01/fine-tuning-pelican-connecting-with-readers/

By adding the following line to this article’s metadata:

comment_id: fine-tuning-pelican--connecting-with-readers

the issue that is created for the article is instead fine-tuning-pelican--connecting-with-readers.

What Was Accomplished¶

At the start of this article, I stressed that a big part about a successful website is the ability to engage readers and maintain their attention. The first tool is to use the social media section of the sidebar that is available with Elegant. The second tool is to have an active comment system for each article that is easy to use. With two small fine-tunings to the Elegant configuration, both of these tools were configured for the website, and working great!

While this was one of the aspects of running a website that I was worried about, having great documentation from Elegant ( Comments - Invite Visitors To Comment ) and Utterances made this a snap to setup.

Like this post? Share on: Twitter ❄ Facebook ❄ Email