GitLab Pages development client setup with Gitpod
Tags: hugo, gitlabpages, jamstack, tutorial
Published: 2022-07-23 13:42:00

Learn how to set up a blog server development client with Hugo + GitLab Pages using Gitpod. It's free.

## Introduction : What is Gitpod?

This is a browser-based Visual Studio Code service. Even if you do not have your own PC environment with Visual Studio Code installed, you can edit/commit Git repository assets such as GitLab and GitHub using only a browser, which is convenient when you want to do some editing on the go.

![Blogging environment with Hugo + GitLab Pages : Gitpod development client position](https://ayaco.gitlab.io/zerogravity/en/docs/setup/client-gitpod/gitpod.png)

Note
: Gitpod's free plan is capped at 50 hours/month ([Plans and pricing - Gitpod](https://www.gitpod.io/pricing)).
I reached the limit in 2 weeks....
It seems that you need to write articles separately and only do commits here.

Note
: Although on a trial basis, [GitLab's Web IDE has been a browser-based Visual Studio Code (beta version)](https://docs.gitlab.com/ee/user/project/web_ide_beta/) since December 22, 2010.
It is free and can be used for an unlimited amount of time.
If this becomes the official version, I will be grateful as a user, but I wonder what will happen to Gitpod.

## 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 in Gitpod that modifies Hugo repository assets in GitLab, and to modify the site and build/publish it by manipulating Visual Studio Code from a browser such as iPad/Android.

![Blogging environment with Hugo + GitLab Pages : Gitpod development client position](https://ayaco.gitlab.io/zerogravity/en/docs/setup/client-gitpod/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

### Create a Workspace with Visual Studio Code to modify GitLab's Hugo repository assets in Gitpod

As shown in [the URL example](https://www.gitpod.io/docs/getting-started#start-your-first-workspace), if you open the GitLab repository URL in your browser with `gitpod.io/#` at the beginning, a Workspace will be created and your browser will display Visual Studio Code with cloned Hugo 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

Implement "[Upload Hugo repository assets modified in Visual Studio Code to GitLab - Dev client with VSCode](https://ayaco.gitlab.io/zerogravity/en/docs/setup/client/#upload-hugo-repository-assets-modified-in-visual-studio-code-to-gitlab)".

Note
: When pushing a file, an "An operation requires additional permissions: read_repository. Please grant permissions and try again." error occurs. I don't know what the problem is, since the file is actually pushed, but by checking the GitLab `read_repository` permission on the `Integrations` screen that appears by pressing the `Open Access Control` button next to the error message, I can solve the problem. 

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

Implement "[Check the build/publish results done automatically in GitLab - Dev client with VSCode](https://ayaco.gitlab.io/zerogravity/en/docs/setup/client/#check-the-buildpublish-results-done-automatically-in-gitlab)".