DEV Community: ayaco

"Squoosh" is an image compression application

ayaco — Sat, 24 Jun 2023 12:11:11 +0000

Introducing Squoosh, an online image compression application that reduces file size while maintaining visual quality. It is Free.

Operating environment

It works with browsers of various platforms.
This is just a guess since I can't find any description of the supported environment, but it is expected to work with Chrome/Firefox/Safari on the following platforms.。

Windows	Mac	iPad	iPhone	Android
○	○?¹	○	○?¹	○

Functionality and operability

It is a very high-performance application that can tune various parameters while comparing the image quality/file size before and after compression, and create a convincing one.
At the same time, it also performs format conversion, so for example, by converting a JPEG photo of several MB taken with a camera into a WebP/AVIF format with a high compression ratio, it is possible to significantly reduce the size to several hundred KB while maintaining the apparent image quality.

Below is a screen shot of a 252KB PNG illustration with the number of colours reduced and compressed down to 52.1KB.
If you zoom in, you can see that dither appears in the spectacle lenses and hair in the compressed image on the right.
Here, the colours have been deliberately reduced in an exaggerated manner so that the difference in image quality can be seen, but with appropriate tuning, the image quality can be maintained to such an extent that it cannot be seen even if you strain your eyes.

Other features include the fact that images are processed locally, without being sent to a server.
This can be used in cases where online tools are difficult to employ for information management reasons.
In fact, it worked even when Wifi was switched off.

However, it is not possible to specify and compress multiple files at once.
In cases where you want to upload a large number of images at once, this may be a drawback.

Competitive comparison

TynyPNG

This is a free online application that allows you to compress multiple images together.
Maximum of 20 images.
Parameter tuning is not available.

ILoveIMG

This is a free online application that allows you to compress multiple images together.
I didn't know what the maximum number of images was, but I were able to do at least 40.
Parameter tuning is not available.
Apart from compression, you can also resize and reformat.

Difference in functionality between free and paid versions

There is no paid version.
All features are free.

Official site

Site	URL
Home	https://squoosh.app/
Documentation	None
Tutorial	None

{.gridfc30p}

"?" are those I have not actually confirmed to work. ↩

Apply Universal

ayaco — Wed, 21 Jun 2023 23:01:18 +0000

Learn how to apply the Hugo's "Universal" theme.

Goal

Below are the components of a blogging environment with Hugo + GitLab Pages.
The goal here is to change the theme body in the GitLab Hugo theme/content repository to Universal, replace the theme settings/content with the Universal sample, change the CI/CD settings for Universal, and build/publish the sample site.

Assumption

This explanation assumes that you have a server environment with GitLab Pages/Hugo templates and a development client environment with Visual Studio Code.

Application method

Modify theme body, theme settings/contents in Visual Studio Code

Delete all Hugo repository assets managed by Visual Studio Code except for /.gitlab-ci.yml.
Create a symbolic link to the Universal repository under /themes in the Hugo repository assets managed by Visual Studio Code by running the following in the Visual Studio Code terminal.
```
> cd (the root directory of the Git project)
> mkdir themes
> git submodule add https://github.com/devcows/hugo-universal-theme.git themes/hugo-universal-theme
```

Copy /themes/hugo-universal-theme/* in the Hugo repository assets managed by Visual Studio Code to /.

Hugo repository assets
├ content           ← copy from exampleSite
├ data              ← copy from exampleSite
├ static            ← copy from exampleSite
├ themes
├ .gitlab-ci.yml
├ .gitmodules
└ config.toml       ← copy from exampleSite

Open /config.toml in Visual Studio Code and change baseurl to root URL of the sample site.

Caution
: ""Error: failed to load modules:..." when applying theme" may need to be addressed.

Change CI/CD settings in Visual Studio Code to match the theme

Delete /.gitlab-ci.yml in the Hugo repository assets managed by Visual Studio Code.
Open .gitlab-ci.yml for GitLab Pages/Hugo template in your browser, download it, and copy it to the / of the Hugo repository assets you manage in Visual Studio Code.

Open /.gitlab-ci.yml in Visual Studio Code, change image to non hugo:std, comment out the hugo mod description and add a git submodule description.

...
image: hugomods/hugo:std                        ← change (hugo:exts is also acceptable)
...
default:
  before_script:
#   - hugo mod get -u $THEME_URL                ← comment out
    - git submodule update --init --recursive   ← add
...

Upload changes made 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.

Troubleshooting

"Error: failed to load modules:..." when applying theme

Phenomenon

When applying a theme using /themes/hugo-universal-theme/exampleSite/config.toml, the following error occurs.

: Error: failed to load modules: module "universal" not found in "/builds/universal"; either add it as a Hugo Module or store it in "/builds".: module does not exist

Cause

Error in themesDir in config.toml. The value has been set to "../..".

Remedy

Correct the value of themesDir in config.toml to "themes".

    ...
    themesDir = "themes"
    ...

"Universal" is a clean and stylish theme for corporate websites

ayaco — Wed, 21 Jun 2023 22:51:49 +0000

The following are the features of Hugo's "Universal" theme.

Feature

Universal is a theme for corporate websites.
The large number of images and carousels give the viewer a bright corporate image.
A full set of interactive functions for users, such as site search with Google, a commenting system with Disqus and a contact form with Formspree, are built in, allowing you to quickly build a full-fledged corporate site.

Official site

Site	URL
Hugo theme introduction	https://themes.gohugo.io/themes/hugo-universal-theme/
Sample/Demo	https://devcows.github.io/hugo-universal-theme/
Documentation	https://github.com/devcows/hugo-universal-theme/blob/master/README.md
Repository	https://github.com/devcows/hugo-universal-theme

Markdown notation in Hugo

ayaco — Sat, 23 Jul 2022 14:57:47 +0000

This section shows how to write Markdown manuscripts in Hugo.

Basic Markdown

For more information on how to write Markdown, see Hugo - Markdown Guide.

Assign CSS classes to elements written in Markdown

See attribute in Goldmark - Hugo for more information. An overview is given below.

Put the following in /config.toml.

[markup.goldmark.parser.attribute]
block = true

Write class names such as {.classA .classB} on the next line of the block element written in Markdown in the original document.
```
* Fruit
  * Apple
  * Orange
  * Banana
  {.fruits}
* Dairy
  * Milk
  * Cheese
  {.dairies}
{.list}
```

Write HTML directly instead of Markdown

See unsafe in Goldmark - Hugo for more information. An overview is given below.

Put the following in /config.toml.

[markup.goldmark.renderer]
unsafe = true

Write HTML for the manuscript.

* Fruit            ← I can write Markdowns and ...
* Dairy
{.list}

<ul class="list">  ← I can write HTML too.
  <li>Fruit</li>
  <li>Dairy</li>
</ul>

Writing with shortcodes

Shortcodes are pre-defined HTML snippets by Hugo and various themes.
They include embedding videos and Instagram/Twitter articles that are difficult to express with Markdown alone, and generating links from manuscript paths that require server processing. See below for details.

Shortcode provider	URL
Hugo	https://gohugo.io/content-management/shortcodes/#what-a-shortcode-is
Theme:Beautiful Hugo	https://github.com/halogenica/beautifulhugo#extra-shortcodes
Theme:Docsy	https://www.docsy.dev/docs/adding-content/shortcodes/

”MediBang Paint” is a handwriting raster image editing application

ayaco — Sat, 23 Jul 2022 14:54:04 +0000

Introducing MediBang Paint, a raster image editing application specialized for hand-drawn illustrations such as manga. It is free.

Operating environment

Works on various platforms. For details, see "System Requirements" for various platforms in Download - MediBang Paint.

Windows	Mac	iPad	iPhone	Android
○	○	○	○	○

Functionality and operability

It has a rich set of brushes whose thickness and density can be controlled by brush pressure, functions that add smoothness and expression to lines such as shake correction and rulers, drawing modes/clips in layers equivalent to Photoshop, and functions that enhance the texture of the paint such as the abundant screen tones that are added every day.

Interesting features are the screen tones and script brushes. Using screen tones to turn clothes into polka dots, or using star-shaped radial brushes to draw colorful backgrounds, these features are unique to manga production apps and can be used to create a comical look.

Competitive comparison

ibisPaint

A free manga creation application that is twinned with MediBang Paint is ibisPaint.

However, I do not use ibisPaint because it displays what I write as blurry¹ and I cannot properly judge the quality of my work.

Difference in functionality between free and paid versions

A paid version is also available, but it is equivalent to the free version in terms of editing functions. For more information, see MediBang Premium - MediBang Paint.

Official site

Site	URL
Home	https://medibangpaint.com/
Documentation	https://medibangpaint.com/use/
Tutorial	https://medibangpaint.com/tutorial/

I have not checked if it is blurry on other than Android. ↩

”Photopea” is a raster image editing application

ayaco — Sat, 23 Jul 2022 14:49:33 +0000

Introducing Photopea, an online raster image editing application that can be used in a Photoshop-like fashion. It is free.

Operating environment

It works with browsers of various platforms. This is just a guess since I can't find any description of the supported environment, but it is expected to work with Chrome/Firefox/Safari on the following platforms.

Windows	Mac	iPad	iPhone	Android
○	○?¹	○	○?¹	○

Functionality and operability

Although it is inferior to the industry standard Photoshop in terms of number of functions, it has a sufficient feature set for blog illustrations and photos, including cutting and pasting photos and screenshots, color adjustments, advanced correction tools, paint brushes/buckets/text and vector creation, drop shadows and other effects, halftones/sketch-like filters, etc.

The usability is comparable to Photoshop. Menus, toolbars, layers, and swatches are all the same, so Photoshop users should have no stress. For those who don't know Photoshop, you won't be confused as to where to find the features you want to use, but you may be overwhelmed by the many features/options.

Below is an example of photo brightness correction. When brightening a dark original image, if the entire image is brightened, the colors in the originally bright areas will be blown out or glare, but by selectively brightening only the neutral colors, the result will look natural. This is the same as in Photoshop, and I appreciate it.

Competitive comparison

GIMP

The free alternative to Photoshop is GIMP. In terms of number of functions and users, GIMP > Photopea, and there is a lot of documentation.

However, GIMP's operations are unique and I could not master them. For example, a simple operation such as "select a part of an image as a range and move it" was not clear to me just by looking at the GUI, and I had to Google it.

Difference in functionality between free and paid versions

There is no paid version. All features are free.

Official site

Site	URL
Home	https://www.photopea.com/
Documentation	https://www.photopea.com/learn/
Tutorial	https://www.photopea.com/tuts/

"?" are those I have not actually confirmed to work. ↩

"Corel Vector", "Linearity Curve", and "Inkscape" are vector image editing applications

ayaco — Sat, 23 Jul 2022 14:45:09 +0000

For those who have a free Gravit Designer account, I introduce "Corel Vector" as a vector image editing application that can be used like Illustrator. For those who do not have a Gravit Designer account, I introduce "Linearity Curve" for Mac/iPad and "Inkscape" for Windows and other platforms. They are free.

Corel Vector

For a long time, it was called "Gravit Designer" and was the definitive vector image editing application that could be used free of charge in an Illustrator-like...

Note that in August 2022, concurrent with the name change, new free version accounts will no longer be issued.
This means that Corel Vector is only available for free to those who have a free Gravit Designer account.¹

Operating environment

It works with Chrome/Firefox/Safari/Edge and other browsers on various platforms.
For more information, see Frequently asked questions - Corel Vector, "What do I need to run Corel Vector?" for more information.

Windows	Mac	iPad	iPhone	Android
○	○	○	○	○

Functionality and operability

Although it is inferior to the industry standard Illustrator in terms of the number of functions, it has a sufficient set of functions for creating SVG for blog logos and illustrations, such as path object/text creation, fill/stroke editing, drop shadow and other effects, object merging/cropping/masking, etc. The set is complete.

All the basic information that can be set is visible and laid out according to a certain rule, so there is no need to wonder where the function you want to use is located.
The left pane is the layers, the right pane is the operation panel for the selected object, and the menu switches according to the type of object, allowing speedy access to various functions.

Even if you don't know Illustrator, if you are familiar with Microsoft PowerPoint shapes, you should be able to operate it without problems.

Cautions for SVG output

SVGs output by Corel Vector do not link line widths when resizing the entire image.

This can be addressed by doing one of the following

Open the output SVG in a text editor and remove vector-effect="non-scaling-stroke". This is already supported by all major browsers except IE, so this site has implemented this action.
Convert line to fill. If there are many objects, conversion takes a lot of time.

Official site

Site	URL
Home	https://www.coreldraw.com/jp/product/vector/
Documentation	https://documentation.corelvector.com/
Tutorial	https://learn.corel.com/graphics-tutorials/corel-vector-tutorials/

Linearity Curve

This is another free vector image editing application that is Illustrator-like.
In January 2023, it was renamed from "Vectornator" and has a new look and feel.

Operating environment

It works on various Apple-based platforms.
For more information, see Linearity Curve - App Store.

Windows	Mac	iPad	iPhone	Android
	○	○	○

Functionality and operability

Like Corel Vector, it has a sufficient feature set for the purpose of creating SVGs for blog logos and illustrations, and the GUI is easy to understand.
The toolbar is on the left, and the right pane is the operation panel for the selected object and the layer panel.

The support for Apple Pencil and the ability to draw hand-drawn illustrations was superior to the free version of Corel Vector.

Official site

Site	URL
Home	https://www.linearity.io/
Documentation	https://www.linearity.io/academy/curve/
Tutorial	https://www.linearity.io/academy/curve/tutorials/

Inkscape

It is a free vector image editing application that can be used in place of the oldest Illustrator.

Operating environment

It works on various PC-based platforms.
For more information, see Download - Inkscape.

Windows	Mac	iPad	iPhone	Android
○	○

Functionality and operability

The feature set is sufficient for the purpose of creating SVGs for blog logos and illustrations.
It is comparable to Illustrator in terms of number of functions and users, and has a lot of documentation.

However, the operations are unique and I could not master them.
For example, a simple operation such as "drawing an R-shaped rectangle" was not clear to me just by looking at the GUI, and I had to Google it.
It was also a shock to me that the operation "drawing an R-shaped hexagon" was different from the operation to draw an R-shaped rectangle.

The legacy and cluttered appearance was also a negative for me personally, and I could not bring myself to continue using it.

Official site

Site	URL
Home	https://inkscape.org/
Documentation	https://inkscape.org/learn/books/
Tutorial	https://inkscape.org/learn/tutorials/

Feature Comparison of Free Vector Image Editing Apps

This page compares the basic features of Corel Vector, Linearity Curve, Inkscape, and other free vector image editing apps within the scope of creating SVGs for blog logos and illustrations.

Path Editing

Corel Vector and Photopea are excellent for re-editing compound paths after creation.
Without this function, you have no choice but to re-create the path from scratch if you want to adjust the overlap to match the overall balance.

App	Corel Vector	Linearity Curve	Inkscape	LibreOffice Draw	Boxy SVG	Vectr	Photopea
Basic shapes	★	★	★	★	★	★	★
Freehand	★	★	★	★	★	★	★
Anchor/Bezier	★	★	★	★	★	★	★
Compound path²	★	☆	☆	☆	☆	☆	★

Path Attributes

Corel Vector, Linearity Curve, and Vectr are excellent for setting rounded corner attributes on anchors.
Any anchor on any shape can be selectively rounded and re-edited, allowing for a wider range of expression.

App	Corel Vector	Linearity Curve	Inkscape	LibreOffice Draw	Boxy SVG	Vectr	Photopea
Corner radius - for whole³	★	★	★	☆	☆	★
Corner radius - for anchor	★	★				★
Line - width	★	★	★	★	★	★	★
Line - color⁴	★	☆	★	☆	★	☆	★
Line - dash	★	★	★	★	★	★	★
Line - arrow	★	★	★	★	★
Line - position⁵	★	★					★
Line - join⁶	★	★	★	★	★		★
Line - end⁷	★	★	★	★	★		★
Fill - color	★	★	★	★	★	★	★
Effect⁸	★	★	★	★	★	★	★

Object Insertion

There is not much difference, but LibreOffice Draw, Photopea, which does not allow re-editing of imported SVGs, may be inconvenient.

App	Corel Vector	Linearity Curve	Inkscape	LibreOffice Draw	Boxy SVG	Vectr	Photopea
Text	★	★	★	★	★	★	★
SVG⁹	★	★	★	☆	★	★	☆
Raster image	★	★	★	★	★	★	★

Object Management

Vectr, which cannot be edited as a group and has no layer concept, is inconvenient when the number of elements is large.

App	Corel Vector	Linearity Curve	Inkscape	LibreOffice Draw	Boxy SVG	Vectr	Photopea
Group¹⁰	★	★	★	★	★	☆
Layer	★	★	★	★			★

Others

All apps except Boxy SVG, which cannot output files in the free version, have basic functionality.

App	Corel Vector	Linearity Curve	Inkscape	LibreOffice Draw	Boxy SVG	Vectr	Photopea
Grid - display	★	★	★	★	★	★	★
Grid - snap	★	★	★	★	★	★	★
SVG/PNG output	★	★	★	★		★	★

TIPS
: If you select and copy what you have written in Boxy SVG, you will get the SVG XML in the clipboard, which you can save as a file to create an SVG file.
However, you need to replace <!doctype html><svg viewBox=... with <?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns="http://www.w3.org/2000/svg" viewBox=... at the beginning.

General Comments

In terms of functionality, Corel Vector > Linearity Curve > Inkscape.

Boxy SVG was superior in both functionality and usability.
While other applications save their own editing information in their own files, Boxy SVG is based on the concept of editing SVG itself, so there are no restrictions such as this file can only be opened with this application.
It seems that a free version will be released in the future¹¹, so I had high expectations for it.

Corel Vector doesn’t have a FREE version. Those who had a free account for Gravit will remain free, but it is not available for new users.. ↩
Unite/Subract/Intersect/Exclude. ☆ means that a compound path cannot be re-edited after it has been created. ↩
☆ means that rounded corners setting is only allowed for specific shapes. ↩
☆ means that gradients cannot be set. ↩
Center/Inside/Outside. ↩
Bevel/Miter/Round. ↩
Butt/Round/Square. ↩
There are many things, but only the drop shadow is the subject of this check. ↩
☆ means that the imported SVG cannot be edited, or that it is virtually uneditable, with line/fill separation, text loss, etc. ↩
☆ means that the group cannot be edited as is. ↩
Switch to "Freemium" pricing model. ↩

Apply Docsy

ayaco — Sat, 23 Jul 2022 14:23:00 +0000

Learn how to apply the Hugo’s “Docsy” theme.

Goal

Below are the components of a blogging environment with Hugo + GitLab Pages.
The goal here is to change the theme body in the GitLab Hugo theme/content repository to Docsy, replace the theme settings/content with the Docsy sample, change the CI/CD settings for Docsy, and build/publish the sample site.

Assumption

This explanation assumes that you have a server environment with GitLab Pages/Hugo templates and a development client environment with Visual Studio Code.

Application method

Modify theme body, theme settings/contents in Visual Studio Code

Delete all Hugo repository assets managed by Visual Studio Code except for /.gitlab-ci.yml.
Open Docsy sample project in your browser, download all files and copy them to / of your Hugo repository assets managed by Visual Studio Code.
```
Hugo repository assets
├ assets           ← copy the download
├ content          ← copy the download
├ layouts          ← copy the download
├ hugo.yaml        ← copy the download
├ go.mod           ← copy the download
├ go.sum           ← copy the download
└ .gitlab-ci.yml
```
Note that the theme body /themes is not registered as a Hugo repository asset.
It will be dynamically imported at build time by subsequent CI/CD configuration changes.
Open /hugo.yaml in Visual Studio Code and change the baseurl to root URL of the sample site.

Change CI/CD settings in Visual Studio Code to match the theme

Delete /.gitlab-ci.yml in the Hugo repository assets managed by Visual Studio Code.
Open .gitlab-ci.yml for GitLab Pages/Hugo template in your browser, download it, and copy it to the / of the Hugo repository assets you manage in Visual Studio Code.

Open /.gitlab-ci.yml in Visual Studio Code, make sure hugo:exts is specified in image, change THEME_URL to Docsy, and add PostCSS installation description.

...
image: hugomods/hugo:exts                              ← confirm

variables:
  HUGO_ENV: production
  THEME_URL: "github.com/google/docsy"                 ← change

default:
  before_script:
    - hugo mod get -u $THEME_URL
    - npm install postcss postcss-cli autoprefixer     ← add
...

Upload changes made 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.

Troubleshooting

"Error: failed to load modules:..." when applying theme as Hugo Module

Phenomenon

If you apply the theme as a Hugo Module instead of apply by Git submodule or other method docs/get-started/docsy-as-module/), the following error occurs.

: Error: failed to load modules: module "..." not found in "..."; either add it as a Hugo Module or store it in "...".: module does not exist

Cause

Due to some changes in Hugo, higo mod init in GitLab CI/CD seems to cause an error.
See Issue of GitLab Pages exaples for details.

This issue did not occur until Hugo V0.109.0, so it seems to be caused by a change in V0.110.0 or later.

Remedy

Delete higo mod init in .gitlab-ci.yml and register the locally generated go.mod and go.sum in the repository beforehand.
See Merge request for GitLab Pages exaples for details.

If you are in a hurry, you can also specify Hugo V0.109.0 (the version that worked reliably) in .gitlab-ci.yml.

...
image: registry.gitlab.com/pages/hugo/hugo_extended:0.109.0
...

Mermaid script is always loaded

Phenomenon

Mermaid script is always loaded on the page, regardless of whether mermaid is used or not, incurring unnecessary loading costs.

<script src="https://cdn.jsdelivr.net/npm/mermaid@9.3.0/dist/mermaid.min.js" integrity="sha512-ku2nmBrzAXY5YwohzTqLYH1/lvyMrpTVxgQKrvTabd/b/uesqltLORdmpVapYv6QhZVCLUX6wkvFaKOAY4xpUA==" crossorigin="anonymous"></script>

Cause

Due to specification changes in Docsy V0.7.0.
Just having a definition of [params.mermaid] in hugo.config now enables mermaid, even if enable=false.

[params.mermaid]
enable = false

For more information, see Source of Docsy.

Remedy

Delete the definition of [params.mermaid] in hugo.config.
For more information, see Discussion of Docsy.

”Docsy” is a formal theme for technical documentation

ayaco — Sat, 23 Jul 2022 14:18:00 +0000

The following are the features of Hugo’s “Docsy” theme.

Feature

Docsy is a theme for technical documentation sites. It can provide comprehensive information on a single technical theme by classifying and presenting it in a multifaceted manner using a table of contents, tags/categories, etc., or by providing direct access through keyword searches, thereby quickly providing necessary information to visitors who want to solve problems.

This site is also Docsy-based. I was originally a fan of Beautiful Hugo, but as the amount of technical information increased, I wanted to use a table of contents to organize and present the information, so I switched.

Although it is designed for technical documentation, it can also have a blog section, so it was perfect for me as I want to write mainly about technology, but also about gadgets and daily life. Also, the front page can be graphically finished, whereas the formal-looking documentation section is more formal, so it can be enjoyed in a variety of ways.

Official site

Site	URL
Hugo theme introduction	https://themes.gohugo.io/themes/docsy/
Sample/Demo	https://example.docsy.dev/
Documentation	https://www.docsy.dev/
Repository	https://github.com/google/docsy

Apply Beautiful Hugo

ayaco — Sat, 23 Jul 2022 14:13:26 +0000

Learn how to apply the Hugo's "Beautiful Hugo" theme.

Goal

Below are the components of a blogging environment with Hugo + GitLab Pages. The goal here is to change the theme body in the GitLab Hugo theme/content repository to Beautiful Hugo, replace the theme settings/content with the Beautiful Hugo sample, change the CI/CD settings for Beautiful Hugo, and build/publish the sample site.

Assumption

This explanation assumes that you have a server environment with GitLab Pages/Hugo templates and a development client environment with Visual Studio Code.

Application method

Modify theme body, theme settings/contents in Visual Studio Code

Delete all Hugo repository assets managed by Visual Studio Code except for /.gitlab-ci.yml.

Open BeautifulHugo's project in your browser, download all files and copy them to the / of your Hugo repository assets managed by Visual Studio Code. in your Hugo repository assets managed by Visual Studio Code.

Hugo repository assets
├ content          ← copy the download(/exampleSite)
├ layouts          ← copy the download(/exampleSite)
├ static           ← copy the download(/exampleSite)
├ hugo.toml        ← copy the download(/exampleSite)
├ go.mod           ← copy the download
└ .gitlab-ci.yml

Open /hugo.toml in Visual Studio Code and change baseurl to root URL of the sample site, comment out theme = “beautifulhugo” and uncomment theme = "github.com/halogenica/beautifulhugo".
Open go.mod in Visual Studio Code and add -example at the end of the module name.
```
module github.com/halogenica/beautifulhugo-example
```

Change CI/CD settings in Visual Studio Code to match the theme

Delete /.gitlab-ci.yml in the Hugo repository assets managed by Visual Studio Code.
Open .gitlab-ci.yml for GitLab Pages/Hugo template in your browser, download it, and copy it to the / of the Hugo repository assets you manage in Visual Studio Code.

Open /.gitlab-ci.yml in Visual Studio Code, change image to hugo:std and change THEME_URL to BeautifulHugo.

...
image: hugomods/hugo:std                         ← change (hugo:exts is also acceptable)

variables:
  HUGO_ENV: production
  THEME_URL: "github.com/google/beautifulhugo"   ← change

default:
  before_script:
    - hugo mod get -u $THEME_URL
...

Upload changes made 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.

"Beautiful Hugo" is a simple and clean theme for miscellaneous blogs

ayaco — Sat, 23 Jul 2022 14:00:00 +0000

The following are the features of Hugo’s “Beautiful Hugo” theme.

Feature

Beautiful Hugo is a beautiful theme with a simple typography-driven screen structure. The balance between the placement and size of images and text is superb, making it easy for anyone to create a sophisticated website.

The official images don't do justice to Beautiful Hugo's capabilities, so I'll use my past blog as an example. Both the front page and the post pages effectively use eye-catching images to enjoy a very blog-like atmosphere.
I have tweaked the parts a bit, such as making the post images photo-like and numbering the headlines, but the placement/size/colors remain the same as the originals.

Official site

Site	URL
Hugo theme introduction	https://themes.gohugo.io/themes/beautifulhugo/
Sample/Demo	https://pages.gitlab.io/hugo/
Documentation	https://github.com/halogenica/beautifulhugo/blob/master/README.md
Repository	https://github.com/halogenica/beautifulhugo

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

ayaco — Sat, 23 Jul 2022 13:42:00 +0000

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.

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.