DEV Community

Cover image for GitLab Pages development client setup with Gitpod
ayaco
ayaco

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

GitLab Pages development client setup with Gitpod

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

Note
: Gitpod's free plan is capped at 50 hours/month (Plans and pricing - Gitpod).
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) 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

Assumption

This explanation assumes that you have followed the "Server with Hugo + GitLab Pages" 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, 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".

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

Top comments (0)