Front Matter, Testing, Source Control and Deployment

Website Development

Front Matter, Testing, Source Control and Deployment

So you’ve got the structure of your site folders setup and implemented and you understand markdown and archtypes and how to generate the basic template of a content file so now it is time to start filling in the details of what the site will be. Something like the following will get you some intial content files to play with. As mentioned earlier, there is no need to be concerned that you might want to change the names or content of these files later as Hugo will deal with what it finds, when it finds it and will not care about obsolete file names or obsolete content. I guess you could say, it lives in the present, or at least it lives in whatever the present is when you choose to build the site and deploy.

hugo new content/"Website Development"/A.md
hugo new content/"Website Development"/B.md
hugo new content/"Market Analytics"/C.md
hugo new content/Phtography/D.md
hugo new content/"RF Communications"/E.md
hugo new content/"RF Communications"/F.md

Based on the automated site generation process and the addition of a theme that was covered earlier there should already be an _index.md file in the root of the content directory, but if not you can add one that will act as your “Home” page.

Hugo counts on the content of your config.xxxx file, whether xxxx is TOML, YAML or JSON, to control many aspects of how the site is rendered globally. It counts on the content of the theme.xxxx file to further refine this. For configuration items that are associated just with the page you are on, there is something called “Front Matter”. The readme.md file associated with the theme you have chosen will detail what options are avaialable with your chosen theme. For Mainroad this provides detailed information on these options. In the case of this specific page the “Front Matter” is as follows:

---
title: "Front Matter, Testing, Source Control and Deployment"
date: 2022-05-22T13:28:52-04:00
categories:
  - "Website Development"
tags:
  - "Website Development"
menu: "side" # Add page to a main, side, and footer menu
weight: -95
---

Details about the usage of Front Matter is available in the Hugo documentation. The items in this example listed as categories: and tags: are what are known as Taxonomies and control various aspects of menu generation. In the case of this site, they control what will appear in the side menus under the headings of categories and tags. These links will navigate to a list page that contains summaries of all of the content items that have specific tags and/or categories in their “Front Matter”.

The weight parameter controls how the various content files are sorted with those with the smallest weight appearing first. Weights can be negative or positive integers. This is useful when items appear in menus and when you want to establish a reading order when you break up a topic into smaller individual content elements.

At this point you are finally ready to see how your site will look. Hugo has a built in web server that will build your site from the source you have provided in the current folder and publish it to memory for review on the development machine. This is accomplished by running the command:

hugo server -D

This will generate the site and if no errors are found it will make it available for review with a browser on the local host at localhost:1313. When the hugo command line is run with the server function, the code for the site is not stored on the disk of the local machine. If you want to generate the site locally so that you can review the results of the build, you can run hugo from the command line without the server function and this will generate the site in a folder named “Public”. This is generally not neccessary unless you want to review the generated code for debugging or for a more detailed understanding of the how the items in your code are instantiated in the static web pages. The hugo command line interface CLI Documentation provides details on the many other things that you can do from the hugo command line.

If you have followed the instructions for Publishing your site on Azure you will have established a Github repository that will serve as source control for the site that you push to the production environment.

When you are satisfied with the site that you have observed locally, all that needs to be done to publish it to the production environment is to terminate the local server with CTRL-C and to execute the following code from your terminal.

git add .
git commit -m "Whatever brief message you want the commit tagged with"
git push

If all is right in the world the up-to-date version of the site will appear within a short time when the automatic publishing actions on Github have been successfully completed. If the new site does not appear you will need to login to your Github account and see if the action completed successfully and if not what errors have been generated.

So, with any luck your site is live and you have a clear understanding of how to maintain the content of the site, verify that it is what you want it to be, roll it out to source control and ultimately to publish the resulting static web site to your production environment.

Certainly there are many other approaches that one could take to bring their web presence into existence. Other “Trail Blazers” will choose other options and there will be advantages and disadvantages to any specific decision that is made. Hopefully, this “Humble Trail Blazer” has been able to provide a useful path to a useful solution and, in the process, saved you some of that valuable commodity, time, that we all have only a limited amount of.

In future posts, I will continue to drill down on things I pick up along the road. Some of these may be things that temporarily delayed me in reaching my destination, or maybe just some tricks that you may or may not have thought of. Best of success in all your endeavours.

Namaste