Transitioning to Hugo for static site generation

[cchesser]

We have been maintaining the site with Jekyll, but that has a burden of maintaining several of the dependencies (Ruby and all the related gems). We are wanting to make it easier for other Cerner engineers to contribute to this for generating content. It is desirable to evaluate to moving to using Hugo for our site generation for the following benefits:

• Hugo makes it very easy for other OSes (Windows/Mac) for generating content
• We can leverage other ecosystems that are making use of Hugo to simplify our build / preview content (ex. pull request preview builds)
• Removes the added management of all of these language specific dependencies that we are not interested in maintaining (Ruby and gem versions)
• Helps us re-evaluate our theme in this transition to leverage existing themes and build them to be with a newer Cerner theme.

Preview of this site can be seen on this draft PR that is collected all the changes: #147

List of TODOs

• [x] Update all the images to reference the figure short code for image processing - @alex-bezek

• [x] Update to all Hugo frontmatter, which includes assigning to "authors" array, vs "author"

• [x] Update theme for image processing for the "images" frontmatter assignment to assist with nested directories of images (allowing images hosted in folders per blog post)

• [x] Update the iframe references for embedded YouTube references (currently not rendering at all) - @alex-bezek

• [x] Style the header bar with a darker color for some contrast - @cchesser (decided to use a thin Cerner purple border)

• [x] Social links in the footer should ideally prompt you to follow on that platform - @cchesser

• [x] Refresh the open-source page layout, and get it updated with newer projects (perhaps look at ways to keep this dynamic based on the cerner GitHub org) - @cchesser

• [x] Ensure old links still work by either making sure the new paths match the old (currently its /blog vs /posts) or see if permalinks fix it and add those to frontmatter

• [x] Fix styling on Culture page, possibly refresh the look and feel if we want. Update content/images as well - @alex-bezek

• [x] Adding search in the header of the site, to make it easy to find content - @cchesser

• [x] Support pagination of all the blog posts - @cchesser

• [x] Update Tech-Talk page to embed youtube channel so it stays up too date - @cchesser

• [x] Fix links to other articles that use ({% post_url 2013-11-12-cerner-tech-talks %}) - @cchesser

• [x] Code Syntax highlighting doesn't have line numbers anymore - @cchesser

• [x] Embed CernerEng Twitter feed on the Culture page (at the bottom) - @cchesser

• [x] Update open source page, re-org content based on popularity and add links to blog posts describing them - @cchesser

• [x] Adjust font on the main title to be font-weight-bold - @cchesser

• [x] Update Culture page content for sections - @cchesser

• [x] Fix Heroku PR builds by supplying the -b option for the base URL (fix RSS feed link,

• [x] Create documentation page on how to create a new blog post (a mini styleguide with the common markdown and shortcodes to use). This includes adding photos for authors (example) - @cchesser

• [ ] Clean up some of the image formatting with TODO statements. Some where in tables with unique sizes. Determine if they are all fine stacking or if we need some other patterns - @cchesser

• [ ] Update all links from engineering.cerner.com to be relative, so preview builds stay within the site

• [x] Update color for banner bar to be blue (vs. purple) - @cchesser

• [x] On a minimal view (i.e. phone), the menu isn't working to expand options for header. Need to correct this so it is easy to navigate.

Bonus

This are tasks that are identified, which are not required but tracking them so they are not lost.

• [x] Hyperlinks aren't blue for some reason. Maybe i'm just used to it, but should we change that?
• [ ] Refactor the Tech Talks page to use shortcodes to reduce all the Bootstrap boilerplate
• [x] Add child pages for DevCon + ShipIt to the Culture page. These can be two card views that can then be opened into their pages, including a highlighting video.

[mjhenkes]

I put out a pr to setup heroku pr deployments for the new hugo version of the site. https://github.com/cerner/cerner.github.io/pull/141

[cchesser]

Thank you @mjhenkes!

[cchesser]

I applied a9e9c78 to add pagination support to the site. It flexes on the first page to have the main featured content.

[cchesser]

Applied changes with b1de1f0, which updated posts using code fences to indicate larger blocks to have line numbers. Also, updated the main logo image (slightly cleaner look). Marking the "Code Syntax highlighting doesn't have line numbers anymore" as done.

[cchesser]

Applied changes with 91d8dd7, which now hosts a tech-talks page, with embedded YouTube players which are based on playlists, with a primary feature on our Tech Talks playlist (the one that routinely gets content). Then there are groups of cards (by 3), for all the other playlists on our YouTube channel. By having embedded players for the playlists, they will stay current without changing the page. The only time we need to change the page, is when there is a new playlist (yearly with DevCon).

I also applied aliases for both the open-source + tech-talks to map to what they were before if there were any direct links to these pages. I follow-up (which isn't necessary), is the tech-talks page has a lot of boilerplate Bootstrap content, which I could simplify with Hugo shortcodes. Will add that to the lists of TODOs, with an indicator is bonus.

[cchesser]

Applied fb55f2e which resolves all the post_url references, using Hugo's ref links (which also statically validates the reference).

[cchesser]

Applied df3c797 which decorates links with Cerner blue for content pages (blog articles), but not on links on the landing page (blog posts in the card views).

[cchesser]

Added several changes (1ff3e033279d5ae460122a858d6d5f5144ce3cfa, df470a6e55d1ece25187e7792407d86c2b515120) which support a Lunr search across a generated JSON file created from Hugo site generation. All content which is being generated is therefore searchable.

When testing out the search, we are now generating pages for authors. Therefore, you can search for author, and get to a generated page of all the posts they have created. When doing this, I discovered I needed to clean-up our authors front-matter for all the articles that had multiple contributors. Broader set of changes applied here: de53c92cfd2c95a58e8669f0c212332e653caba2

[cchesser]

Applied several feedback changes on the site via: 9fb2198

• Blue bar for top banner
• Embed Twitter feed on culture page
• Updated text on Culture page
• Updated open-source page (added clara-rules, removed scrimp, re-organized order by popularity, added links to blog announcements)
• Changed font for title / sub-title on landing page
• Corrected Heroku PR builds so search / RSS feed works (changes to base URL)

[cchesser]

Example differences on banner / title:

[cchesser]

Fixed the navbar expansion when on a mobile device (was a bug with jQuery 3.5.0), so updated to 3.5.1 that fixed it: 7bd0c89

Example on devtools simulator for phone (before the expansion wouldn't even work):

This set of changes also fixed some other weird quirks when further testing:

• Card views on other suggested blog posts (bottom of an article), all the text would be in blue since the entire card was a link (so changed the styling to stop that)
• Changed the summary text that is generated on the cards to be escaped HTML, as there was some garbled summary views for escaped characters.