GitLab Pages development client setup with Visual studio Code
Tags: hugo, gitlabpages, jamstack, tutorial
Published: 2022-07-23 13:22:00

Learn how to set up a blog server development client with Hugo + GitLab Pages using Visual Studio Code. It’s free.

## Goal

Below is a configuration diagram (example) of a blogging environment with Hugo + GitLab Pages. The goal here is to build a Visual Studio Code environment on a Windows PC that modifies GitLab's Hugo repository assets, modify the site, and build/publish it.

![Blogging environment with Hugo + GitLab Pages : Development client position](https://ayaco.gitlab.io/zerogravity/en/docs/setup/client/feature.svg)

## Assumption

This explanation assumes that you have followed the "[Server with Hugo + GitLab Pages](https://ayaco.gitlab.io/zerogravity/en/docs/setup/server/)" and prepared a server environment built with the GitLab Pages/Hugo template.

## Procedure

### Install Git on your PC

1. Install [Git](https://git-scm.com/) on your PC [^wsl]. Defaults except as follows.
	- Select Visual Studio Code for `Choosing the default editor used by Git`.
	- Select `Use external OpenSSH` for `Choosing the SSH executable`[^ssh].

1. At the command prompt, run the following
	```
	> git config --global user.name "(name of user for local Git environment)"
	> git config --global user.email "(email address of user for local Git environment)"
	```

### Install Visual Studio Code on your PC

Install [Visual Studio Code](https://code.visualstudio.com/) on your PC.

### Download GitLab's Hugo repository assets in Visual Studio Code

1. Press `Source Control` icon on the left bar of Visual Studio Code.

1. Press `Clone Repository` button.

1. Specify `Repository URL or... Enter the repository URL of the Hugo project in GitLab in the `input area`, and press the Enter key. 

	How to find the repository URL is as follows.
	1. Log in GitLab by browser, and open `Repository`-`Files` screen of Hugo project.
	1. Press `Clone` button, and displayed `Clone with HTTPS` is the repository URL.

1. You will be asked for your GitLab login username/password, enter it and press Enter.

1. You will be asked where to download the assets. Enter the information and press the Enter key, and a project directory will be created under the directory you specified, and the files will be downloaded under that directory.

1. When asked if you want to open the downloaded assets, select Open.

1. When asked if you trust the assets, select Trust, and the downloaded assets will appear in the left tree.

### Change Hugo repository assets in Visual Studio Code

Edit any file in Visual Studio Code.

### Upload Hugo repository assets modified in Visual Studio Code to GitLab

1. Press `Source Control` icon on the left bar.

1. Press `+` (stage all changes) button under `Changes` in the left pane, and the modified files will move to `Staged Changes`.

1. Enter the changes in the `message` input area at the top of the left pane.

1. Press `commit` button in `Source Control` at the top of the left pane, and the changed files will disappear from the `staged changes`.

1. Press `Synchronize Changes` button under `Source Management` at the top of the left pane, and the asset will be upload to GitLab and automatically start the build.

### Check the build/publish results done automatically in GitLab

1. Log into GitLab with a browser, open the Hugo project page, and see the changes you entered in Visual Studio Code and the `✓` (Pipeline: passed) icon appear above the file list.

1. Open the site in a browser and verify that the changes have been reflected.



[^wsl]: You can also use WSL (Ubuntu), but I don't recommend it if you only use it for blog development, because it eats up space and expands the time and effort of preparation and management.
[^ssh]: Since OpenSSH is included from the beginning in recent Windows, there is no need to install it again. If you are worried, you can choose `Use bundled OpenSSH` (default).