DEV Community

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

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

GitLab Pages development client setup with Visual studio Code for the web

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

Tip : What is Visual Studio Code for the web?

It is a Visual Studio Code service that runs in your browser.
Even if you don't have a PC environment with Visual Studio Code installed, you can edit/commit Git repository assets such as GitLab and GitHub with just a browser, so it's convenient when you want to do a little editing on the go.
Also, when you want to try Hugo + GitLab Pages lightly, you can use it easily and quickly without polluting your own environment.

Note
: Previously, you had to use a separate service such as Gitpod, but since December 22, the standard web IDE for GitLab has been Visual Studio Code for the web, which is free and unlimited in time.

Goal

Below are the components of a blogging environment with Hugo + GitLab Pages.
The goal here is to modify the site and build/publish it using GitLab's Visual Studio Code for the web.

Blogging environment with Hugo + GitLab Pages : Web-based development client position

Assumption

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

Procedure

Launch GitLab's Visual Studio Code for the web

Log in to GitLab in a browser, open the Hugo project page and select Web IDE from the Edit drop-down below the file list, and you will see a Visual Studio Code for the web in your browser, ready to edit project assets.

Change Hugo repository assets in Visual Studio Code

Edit any file in Visual Studio Code in your browser.

Upload Hugo repository assets modified in Visual Studio Code to GitLab

Upload the modified assets to GitLab using Visual Studio Code in your browser.

Check the build/publish results done automatically in GitLab

Check build/publish results.

Top comments (0)