diff --git a/content/en/posts/Hugo.md b/content/en/posts/Hugo.md new file mode 100644 index 0000000..6cde198 --- /dev/null +++ b/content/en/posts/Hugo.md @@ -0,0 +1,124 @@ +--- +author: "Devoalda" +authorEmoji: 🐺 +title: "Hugo CI/CD Deployment with Gitlab" +description: Hugo CI/CD Deployment with Gitlab +date: 2022-08-25T18:15:01+08:00 +draft: false +hideToc: false +enableToc: true +enableTocContent: true +tocPosition: inner +tocLevels: ["h1", "h2", "h3", "h4"] +image: images/postImages/hugo.svg +tags: +- gitlab +- Hugo +- program +- CI/CD +series: +- Web Development +categories: +- 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](https://github.com/zzossig/hugo-theme-zzo) +```shell +git clone --recurse-submodules https://gitlab.com/devoalda/devoalda.gitlab.io.git +``` + +# Hugo +This command will run a server on localhost:1313 +```shell +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](https://gohugo.io/commands/hugo/) +## Theme +[This](https://github.com/zzossig/hugo-theme-zzo) is the theme I'm using currently +[Here](https://zzo-docs.vercel.app/) are more themes to checkout + +### Configuration +This [Documentation](https://zzo-docs.vercel.app/zzo/configuration/configfiles/) 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 >}} + ```java + System.out.println('Hello World!'); + ``` + {{< /code >}} + {{< code >}} + ```javascript + 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 + ```javascript + 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 +```shell +# 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 +``` diff --git a/public/images/postImages/hugo.svg b/public/images/postImages/hugo.svg new file mode 100644 index 0000000..1f6a79e --- /dev/null +++ b/public/images/postImages/hugo.svg @@ -0,0 +1,7 @@ + + + + + + +