This blog site construction: Latest
As discussed in previous blogs on this site, the site had its roots as a GitHub Pages site. It was then transferred to Azure Devops and further extended there with custom extensions sourced from blogs elsewhere. Custom coding was also done to facilitate features desired for this site. This article sheds more light on how the site was implemented as well as upon some new features recently added.
Previous
The Previous blog posts here covered the desired features for a blog, building the site using Jekyll, how the site was deployed using Azure Devops as the site repository, to build it and to publish it on Azure as a static web site. Also covered was how to also publish it on Azure using CDNs ,SSLs. Both of the two publish sites use custom domains.
DevOps
The site as discussed in previous blog posts .. the Web topic was built using Jekyll using a template that amongst other things support blog posts with a sidebar on the left. The site was extended in functionality and content from there. The hosting on DevOps followed the detailed instructions starting at How to deploy and host a Jekyll website in Azure blob storage using Devops and CD
Next and Previous Post Links
This was previously posted here as a separate blog. This covers implementing the autogeneration of a table towards the end of a blog that includes links to the chronological next and previous blogs as well as the next and previous blogs in the same category: Next and Previous Post Links
Latest
Scripts
Whilst these could have been created for Jekyll, some PowerShell scripts were created to clean the project and create a new post. These are in the scripts directory. There is also a set-path script to append this folder to the VS Code terminal path. Alternatively you can set it permanently in the system path. To set the path in the project’s root in the terminal run:
./scripts/set-path
This script can be viewed here: /scripts/set-path.ps1
Meta-Information
Each blog post displays meta-information from the page Front Matter:
The Front Matter for this page is:
---
layout: postpage
title: This blog site construction - Latest
category: web
tags: jekyll markdon blogsite devops
date: 2020-01-03 20:11:22
author: david_jones
excerpt_separator: <!--more-->
disqus: 1
---
The custom postpage.html template is used for posts as this generates custom features such as the posting of metainformation as above, generating list pages for categories and tags, use of Disqus for comments etc. Let’s look at some of those and other features.
Categories and Tags
These are listed, ususual in _data\sections.yml. e.g.:
- - 'web'
- 'Web Sites'
- - 'xam'
- 'Xamarin'
A post is categorised by including its short entry (e.g. web or xam) in the page’s Front Matter. For example web was used for this page, as above. When the site is built. A list of posts for each category is generated from sections.yml and a landing page is autogenerated for each. These are placed in /cats folder. A landing page listing all categories is generated with links to each category’s landing page. In the meta-info at the top of the page is a link to the category list for a page’s category. The code to implement this, including the a reference to where I found it, is in _plugins/cats.rb
Tags are not “fixed” in the site’s meta-infomation. They are page level creations in page FrontMatter.
Upon site build, all pages are interogated and a list of tags is generated. For each tag a list of posts that have that tag is generated and used as landing page for the tag (links to pages that have that tag). These pages are placed in /tags. A landing page of tags is then generated from the list of tags with a link for each tag to its landing page. The code to implement this, including the a reference to where I found it, is in _plugins/tags.rb .
To regenerate the tags and cats pages it is necessary to clear them first. The script jekyll-clean in the scripts folder does this. See scripts/jekyll-clean.ps1
new-post Script
This script new-post, located in the scripts directory, will generate a new post .md file in the _posts directory. The script contents can be viewed here: scripts/new-post.ps1. The generated post will be blank except for the Front Matter supplied. These can be supplied at the command line or if not, there is a prompt for each of the required parameters. The required parameters are shown in the example here. Alternatively they can be supplied at the command prompt where some optional parameters can be supplied:
The command prompt with parameters:
new-post <title> <subtitle> <category(short name)> <tags> [author] [disqus]
The last two parameters are optional.
It is probably simpler to run the command without parameters, enter the required ones when prompted and then enter the others when editing the page as there is a line in the Front Matter on the page for each of the optional parameters.. Remove those not used.
Also, if specifying parameters in the command line, you can only specify one tag (required) whereas when prompted for the tags you can enter a space separated list on the prompt line.
As subtitle is a required parameter, if you don’t want one then enter a single character for it. It will be removed in that case.
Further
- The date, title, subtitle and category are used in generating the post filename
- The author needs to be an author’s short name as listed in _data/authors.yml
- If a page has a subtitle, that shows on the rendered page to the right of the title (same line) but in the larger font (see top of this page). With only a title, that is displayed in the larger font.
- Also, if a subtitle is used, the sidebar menu on the left lists the subtitle for the page link whereas otherwise the title is used in the menu.
And now for the “steak knives”
Just andded a new version of this script scripts/new-post-yml.ps1 that instead of taking the Catgory as an input it it selected from a menu that is generated from the site Categories in sectionas.yml! :)
Jekyll new tab links
The code pages as above deliberately do not have the the extra infrastructure to facilitate navigation back and to other pages. They therefore launch in a new tab in the same browser.
To do this append {:target="_blank"} to the [ ... ]( ...) code.
For example, the previous link:
[scripts/new-post-yml.ps1](../Code/new-post-yml.html){:target="_blank"}
Disqus
Disqus was chosen to add comments capability to blog posts. You can either be registered with Disqus or use some of the standard credentials to login for comments. There is also a built in voting capability (thumbs up etc). The posts have a disqus property in the FrontMatter. For pages that permit comments it is set to 1, for other 0. There is an option for adding a comments policy for the site. Take the link from here to set up Disqus. Take the “I want to install ..” link. Basic level is free. You need to:
- Register and get a Disqus Shortname
- Make an entry in config.yml eg
disqus_shortname: MyBlogsShortname - Include a given page in _includes folder
- Add the disqus Front Matter property to pages
- Do other set up properties on Disqus
Google Analytics
This is used to give an analysis of traffic to your site. After registering the site with Google, you add some metadata and content similar to how Disqus was added. Start at Analytics Help
Excerpt Separator
This is specified in the Front Matter of the post. For example:
excerpt_separator: <!--more-->
All text on the on the page prior to its inclusion will appear as the page summary on the site homepage unformatted (actually in italics). The summary also appears formatted on the post when rendered, without the moniker. You can alos specify it it in _config.yml. If no excerpt seperator then the first n characters are used.
| Topic | Subtopic | |
| Next: > | .NET Core on IoT | Some key facts |
| < Prev: | Australia alight again | |
| This Category Links | ||
| Category: | Web Sites Index: | Web Sites |
| Next: > | .Net Interactive and Try .Net | |
| < Prev: | Jekyll | Next and Previous Post Links |
