devoalda.gitlab.io/content/en/posts/Hugo.md

author	authorEmoji	title	description	date	draft	hideToc	enableToc	enableTocContent	tocPosition	tocLevels	image	tags	series	categories
Devoalda	🐺	Hugo CI/CD Deployment with Gitlab	Hugo CI/CD Deployment with Gitlab	2022-08-25T18:15:01+08:00	false	false	true	true	inner	h1 h2 h3 h4	images/postImages/hugo.svg	gitlab Hugo program CI/CD	Web Development	gitlab Hugo CI/CD

Introduction

Hugo is an open-source static website generator written in GO, I'm using it as a website generator for this particular website.

This is a guide on how to deploy a static website with hugo and gitlab

Purpose of this guide

This documentation serves as a guide for me to look back on when I need to deploy websites using Gitlab's CI/CD or Hugo and alternatives.

You will be able to use this guide as reference for deploying your own websites!

Cloning the repository

This will clone the repository of the website with the theme

git clone --recurse-submodules https://gitlab.com/devoalda/devoalda.gitlab.io.git

Hugo

This command will run a server on localhost:1313

hugo server

Running hugo alone will Build the website and output the statistics and build time with any errors that might come up during the build

For more detailed hugo commands please read their documentation

Theme

This is the theme I'm using currently Here are more themes to checkout

Configuration

This Documentation contains the configuration file structure and the different configuration files

Shortcodes

[Here] are the documentation for shortcodes, those listed below are just some I'll use more frequently

Code Shortcode

{{< codes java javascript >}} {{< code >}}

System.out.println('Hello World!');

{{< /code >}} {{< code >}}

console.log('Hello World!');

{{< /code >}} {{< /codes >}}

Image

{{< img src="/images/header/background.jpg" title="Sample Image" caption="Image with title, caption, alt, ..." alt="image alt" width="700px" position="center" >}}

Tabs

{{< tabs Windows MacOS Ubuntu >}} {{< tab >}}

Windows section

console.log('Hello World!');

{{< /tab >}} {{< tab >}}

MacOS section

Hello world! {{< /tab >}} {{< tab >}}

Ubuntu section

Great! {{< /tab >}} {{< /tabs >}}

Gitlab CI/CD with Hugo

This is the gitlab's CI/CD .yml file, available through the side pane > CI/CD > Editor

# This file is a template, and might need editing before it works on your project.
---
# All available Hugo versions are listed here:
# https://gitlab.com/pages/hugo/container_registry
image: registry.gitlab.com/pages/hugo:latest

variables:
	GIT_SUBMODULE_STRATEGY: recursive

test:
	script:
		- hugo
	except:
		- master

pages:
	script:
		- hugo
	artifacts:
		paths:
		- public
	only:
		- master