alguidelines.dev - Business Central Design Patterns – Install Hugo

Docs: Devcontainer with VS Code

Mon, 01 Jan 0001 00:00:00 +0000

Use a local devcontainer

If you don’t want any local setup (apart from Docker Desktop), but still run your own Hugo instance, you can make use of the preconfigured devcontainer. If you want to learn more about the concept, visit https://code.visualstudio.com/docs/remote/containers. To use it, you need to take the following steps:

Start Docker Desktop and switch to Linux containers by right-clicking on the Docker logo in the system tray and selecting “Switch to Linux containers…”. If you only see “Switch to Windows containers…”, then you are already switched to Linux containers. If anything goes wrong, check if you are on the latest version of Docker Desktop and have the WSL2 integration enabled. If you have all that in place and it still doesn’t work, check the extended installation documentation here

Consequences of switching
When switching to Linux, you will probably see a warning that tells you that you “will not be able to manage the Windows containers until you switch back to Windows containers”. That means that the Docker Desktop management GUI can only show either the Windows containers or the Linux containers and if you switch to Linux, you consequently won’t see the Windows containers until you switch back. But the Windows containers will continue to run, you won’t loose data and you can keep using them e.g. for Business Central development, you just can’t manage them through the Docker Desktop GUI
Install the Remote development extension pack in Visual Studio Code
Run the action “Remote containers: Clone Repository in Container Volume” and select the fork you created. If you haven’t done that before, go through the docs.
Wait for a bit. When you do this for the first time, it can take a couple of minutes. Next time it will be faster…
After a while, you will have VS Code with the cloned repository and the terminal should show something like “Done. Press any key to close the terminal.”
Run the action “Tasks: Run task” and select “Start local Hugo Server” from the list. If you don’t see that entry, you might have to reload your VS Code window and try again
After Hugo has generated the site, you will get a notification that offers you to “Open a browser”. Click on that and you will see your local instance of the AL guidelines! Again, on the first try it will be a bit slow and sluggish, but the second one should be fast.
Now you can make changes and just save them. If you open the terminal, you will see a message that tells you that a change was detected and the site was rebuilt. After that, the change should automatically appear in your browser

Here is a walkthrough of the full process:

Your browser does not support the video tag.

Use GitHub Codespaces

What is also great about this, is that you can also use GitHub Codespaces with that setup. In that case, steps 1-5 become two clicks… Here is another full walkthrough:

Your browser does not support the video tag.

Docs: Manually on Windows 11

Mon, 01 Jan 0001 00:00:00 +0000

This guide will walk You thrugh installing Hugo on a Windows 11 PC. For the official install guide, You can wisit https://gohugo.io/getting-started/installing/.

Download Binaries

The path of least resistance is to just download the .zip file from the official Hugo GitHub Repository here.

The theme that are used, needs the extended version of Hugo, so make sure to download the extended version by ensuring the file name starts with hugo_extended...

info

For the purpose of this install guide, we are assuming You will want to follow the “standard” used by Hugo for installing. We will be creating a Hugo folder in the root of C:\. That folder will have a Bin folder for the binaries, and a Sites folder for each website You are building.

Once You are done, You should have a folder structure that looks like this:

C:\Hugo
├── Bin # Binaries
└┬─ Sites # Hugo Site Repositories
 └── alguidelines # Hugo Source for alguidelines.dev

After downloading the .zip file, extract the zip-file to c:\Hugo\Bin

Add Hugo to Path

After copying the binaries to Your PC, You will need to add Hugo binaries to the %PATH% system environment variables.

To do that, search for environment

once you see the Edit the system environment variables, open it and select Environment Variables

Once the Environment Variables screen is open, highlight the Path lines and press the Edit... button

Now press New and add the C:\Hugo\Bin to the path. Press OK and OK to save the new Path

Once complete. You should now be able to preview the Hugo site on http://localhost:1313 by opening a command promt, and open the C:\Hugo\Sites\alguidelines folder and execute Hugo Serve

Docs: Powershell on Windows 11

Mon, 01 Jan 0001 00:00:00 +0000

It is possible to use a powershell script and Chocolatey to install and other dependencies. Execute the following script:

Set-ExecutionPolicy Bypass -Scope Process -Force
[System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072
Invoke-Expression ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
choco install -y nodejs
choco install -y hugo-extended

Once complete, in root of of the repository execute the following commands

git submodule update --init --recursive --depth 1
npm install

alguidelines.dev - Business Central Design Patterns – Install Hugo

Docs: Devcontainer with VS Code

Use a local devcontainer

Consequences of switching

Use GitHub Codespaces

Docs: Manually on Windows 11

Download Binaries

info

Add Hugo to Path

Docs: Powershell on Windows 11