Okay, got Node/NPM, Terminal and VSCode installed a couple posts back. Let’s move on to Git and Hugo.

Git is required to work with the blog’s remote repository on GitHub. I have already setup an account for Lynn and a remote repository of the blog on GitHub. As of writing the draft for this post, have yet to get the credentials to Lynn—account password and SSH keys.

As mentioned in the previous post Hugo is the static site generator (SSG) I have been using to generate the blog for hosting on Netlify and my own ISP account. Given that is what the remote repository is based on, I don’t think Lynn would be able to easily use a different SSG. That said I have been considering switching to another SSG. Specifically one that also allows backend services.

Don’t know which is easier so let’s start with Git (alphabetical order).

Git

I was originally going to add a link to an earlier post of mine where I had installed Git. But, I have since found a post that does a much better job describing how to install Git. So, Lynn, I suggest you take a look at this tutorial: “How to Install and Use Git on Windows”.

I use Git from the command line. I.E. in a Powershell tab in Windows Terminal. And, that’s how these instructions will be written. Though I may look at providing an alternative down the road. One such option is to install GitHub Desktop which will also install Git and provide you with a GUI for working with your repository. Though, either way, there will still be a bit of a learning curve.

Install Hugo

When I first installed Hugo I did not know about winget. So I downloaded the most recent prebuilt binary for a Windows 64 bit system. (Yes I am doing my programming, etc. in a Windows environment. Pretty much always have on PCs.) I got the “extended” version. It was a zip file, which I simply extracted into a suitable directory. The instructions said to add the Hugo executable to the system Path. I did not do so, I just use the full file path when executing commands in a Terminal window/tab. It’s saved in a personal notes file in the development directory.

figure showing the instructions for using prebuilt binaries to install Hugo

Now as mentioned in previous posts, I am a big fan of drive partitions. I have one called ‘Dev’ (E:) which I use for installing applications. And a “Dev2’ (R:) which is used for projects, courses and self-learning. Don’t expect Lynn’s PC will look anything like that. He will need to make some decisions as to where he installs the various apps and project files. That said, in my case:

  • Hugo is ‘installed’ in E:\appWeb\hugo
  • the blog is in R:\hugo\hbdsLynn

In the instructions for installing Hugo via prebuilt binaries (linked above) there is a link to the latest versions of the available binaries. At the time of writing that was version v0.119.0. That will of course change in short order. So do use the link in the instructions.

For the purposes of this post, I downloaded hugo_extended_0.119.0_windows-amd64.zip.

figure showing part of list of prebuilt binaries available
Portion of List of Available Prebuilt Hugo Binaries

Rather than use the built-in zip functions available in Windows’ File Explorer, I decided I wanted to try to extract the downloaded archive using a Terminal window and Powershell.

PS C:\Users\bark> Set-Location -Path e:\appWeb
PS E:\appWeb> New-Item -Path 'hugo' -ItemType Directory

    Directory: E:\appWeb


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2023-09-27     14:25                hugo


PS E:\appWeb> Expand-Archive -LiteralPath 'V:\download\hugo_extended_0.119.0_windows-amd64.zip' -DestinationPath e:\appWeb\hugo
PS E:\appWeb> Get-ChildItem -Path .\hugo


    Directory: E:\appWeb\hugo


Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
-a----        1980-01-01     00:00       69737472 hugo.exe
-a----        1980-01-01     00:00          11347 LICENSE
-a----        1980-01-01     00:00          12810 README.md

The commands alone were:

Set-Location -Path e:\appWeb
New-Item -Path 'hugo' -ItemType Directory
Expand-Archive -LiteralPath 'V:\download\hugo_extended_0.119.0_windows-amd64.zip' -DestinationPath e:\appWeb\hugo
Get-ChildItem -Path .\hugo

And, since the blog site already exists on my dev system and has content, a quick test.

PS R:\hugo\tooOldCode> cd ..\hbdsLynn
PS R:\hugo\hbdsLynn> e:\appWeb\hugo\hugo server -D -F
Watching for changes in R:\hugo\hbdsLynn\{archetypes,content,data,layouts,static,themes}
Watching for config changes in R:\hugo\hbdsLynn\config.toml
Start building sites …
hugo v0.119.0-b84644c008e0dc2c4b67bd69cccf87a41a03937e+extended windows/amd64 BuildDate=2023-09-24T15:20:17Z VendorInfo=gohugoio

                   | EN
-------------------+-----
  Pages            | 59
  Paginator pages  | 11
  Non-page files   | 56
  Static files     | 10
  Processed images |  0
  Aliases          | 16
  Sitemaps         |  1
  Cleaned          |  0

Built in 792 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

And, accessing localhost:1313 in a browser I get the hoped for result.

image of visible portion of Lynn's blog home page
Blog Home Page Running Locally

Netlify

Install

Wasn’t too sure where to go next. Thought about setting up a local repository by cloning the remote repository of GitHub. But thought that would make this post a touch too long. So decided to go through installing Netlify.

It is rather straightforward. The installation instructions on the Netlify site are good. But, I will run through some of that below. Once again, using Powershell in a Terminal tab/window. The directory shown on each command line are specific to my system. Yours will most certainly differ. There might be reasons to install a local version of netlify-cli, but not in our case. So am installing globally. Note: this is also how you upgrade the netlify-cli app.

The installation does take a bit of time; so be patient. install can be abbreviated using just i. But it is pretty good about showing you how things are progressing. A current installation looked like the following. Again, future installations will likely generate different output.

r:\hugo>npm install -g netlify-cli
npm WARN deprecated string-similarity@1.2.2: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated

added 298 packages, removed 11 packages, and changed 1358 packages in 4m
PS R:\hugo>

Done

I was going to cover connecting Lynn’s blog directroy to the Netlify account, but ran into all sorts of trouble because I am already connected. Not sure how I am going to get around to documenting that right. Currently working on an on-line Python bootcamp, so not much time for sorting out this and related problems.

So, that’s it for this one.

Resources