DEV Community

Cover image for GitLab Pages development client setup with Visual studio Code
ayaco
ayaco

Posted on • Edited on • Originally published at ayaco.gitlab.io

GitLab Pages development client setup with Visual studio Code

#hugo #gitlabpages #jamstack #tutorial

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

Assumption

This explanation assumes that you have a server environment with GitLab Pages/Hugo templates.

Procedure

Install Git on your PC

  1. Install Git on your PC 1. Defaults except as follows.

    • Select Visual Studio Code for Choosing the default editor used by Git.
    • Select Use external OpenSSH for Choosing the SSH executable2.

  2. 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 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.

  2. Press Clone Repository button.

  3. Specify Repository URL or... Enter the repository URL of the Hugo project in GitLab in theinput 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.
    2. Press Clone button, and displayed Clone with HTTPS is the repository URL.

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

  5. 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.

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

  7. 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.

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

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

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

  5. 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.

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

  1. 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. ↩

  2. 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). ↩

Top comments (0)