Bootstrap, Hugo and hugo-mod-bootstrap-scss

Joerg · July 27, 2023, 8:49am

I want to use bootsrap 5 for a homepage. I have hugo extended, golang, git local on the computer installed. After run go mod init example.com and go mod tidy the directory resoures/_gen/assets is empty.

I want to change the theme colors and the font to roboto. Then as fallback I want to use the other fonts that are set up in bootstrap.

In whitch Directory sould this entry: assets/scss/bootstrap/styles.scss?

@import "bootstrap/bootstrap";

$white: #ffffff;

$theme-colors: (
    "light":      #b2d7e8,
    "dark":       #0d0b0d,
    "primary":    #990033,
    "secondary":  #42475f,
    "info":       #68919d,
    "success":    #559300,
    "warning":    #ffb955,
    "danger":     #ea0064,
);

I was of the opinion that the scss files of Bootstrap are in this directory. The next step is to copy the corresponding css and js files to /staic and /js. Are the css and js files generated by themselves?

config.yaml

baseURL: http://example.org/
languageCode: en-us
title: Test site
theme: example

module:
  imports:
    - path: github.com/gohugoio/hugo-mod-bootstrap-scss-v5

markup:
  goldmark:
    renderer:
      unsafe: true

[code-server@localhost example.com.com]$ go mod init example.com
go: creating new go.mod: module example.com
go: to add module requirements and sums:
        go mod tidy
        
[code-server@localhost example.com]$ go mod tidy
go: warning: "all" matched no packages

[code-server@localhost example.com]$ hugo server
go: no module dependencies to download
go: added github.com/gohugoio/hugo-mod-bootstrap-scss-v5 v1.0.0
hugo: collected modules in 636 ms
Watching for changes in /home/code-server/Workspace/example.com/{archetypes,content,data,themes}
Watching for config changes in /home/code-server/Workspace/example.com/config.yaml
Start building sites … 
hugo v0.115.4-dc9524521270f81d1c038ebbb200f0cfa3427cc5+extended linux/amd64 BuildDate=2023-07-20T06:49:57Z VendorInfo=gohugoio

go.mod

module example.com

go 1.20

require github.com/gohugoio/hugo-mod-bootstrap-scss-v5 v1.0.0 // indirect

go.sum

github.com/gohugoio/hugo-mod-bootstrap-scss-v5 v1.0.0 h1:ImJHfWXVsUkCuull09NqcTpTx5bVnEBYyWlVE04paA0=
github.com/gohugoio/hugo-mod-bootstrap-scss-v5 v1.0.0/go.mod h1:OkLoYy/rU+UFHFd/TPzRxfgXkaOtqqW+mEQGBUzydk4=
github.com/twbs/bootstrap v5.0.2+incompatible/go.mod h1:fZTSrkpSf0/HkL0IIJzvVspTt1r9zuf7XlZau8kpcY0=

razon · July 27, 2023, 10:47am

It’s not a solution.

The github.com/gohugoio/hugo-mod-bootstrap-scss-v5 was archived, I’d suggest using the github.com/gohugoio/hugo-mod-bootstrap-scss instead.

Joerg · July 27, 2023, 1:39pm

This is my head.html. Why is the css file not generated. The page is displayed but without the formatting of Bootstrap.

<!-- Required meta tags -->
<meta charset="utf-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">

<!-- Bootstrap CSS -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous"> -->

<!-- Dart Sass -->
{{ $opts := dict "transpiler" "dartsass" }}
{{ $scss := resources.Get "scss/styles.scss" }}
{{ $styles := $scss | resources.ToCSS $opts }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" />

<title>
{{- if .IsHome -}}
{{- .Site.Title -}}{{ with .Site.Params.slogan }} - {{ . }}{{ end }}
{{- else -}}
{{- .Title }} - {{ .Site.Title -}}
{{- end -}}
</title>

razon · July 28, 2023, 12:50pm

I’d suggest posting more details of your code, such as the code of the assets/scss/styles.scss.

A test repo would be better.

Joerg · July 28, 2023, 1:49pm

Hello razon,

here is the GitHub Repo: git clone GitHub - joergklein/example.com

The theme is in /themes/example.

Thank you for the help.

razon · July 28, 2023, 2:13pm

Works as expected, I think it just a browser cache issue.

Btw, as I mentioned above, I’d suggest using the github.com/gohugoio/hugo-mod-bootstrap-scss instead of github.com/gohugoio/hugo-mod-bootstrap-scss-v5.

module:
  imports:
    - path: github.com/gohugoio/hugo-mod-bootstrap-scss/v5

The trailing /v5 is how Hugo/Go module versioning, see Go Modules: v2 and Beyond.

For changing the Bootstrap SCSS vars, you’ll need to define those vars on the top of @import "bootstrap/bootstrap";. For example.

$primary: red;
@import "bootstrap/bootstrap";

For more advanced usages, such as removing components, see Sass · Bootstrap v5.3.

Joerg · July 28, 2023, 3:03pm

If you have nothing changed and it works? Great but I don’t understand it. When I start from my VS Code-Server whitch runs on a virtual machine, It doesn’t work. I deleted the browser cache, but nothing helped. I get this error message: https://dev.example.com/scss/styles.css net::ERR_ABORTED 404 (Not Found).

2nd. If I change to - path: github.com/gohugoio/hugo-mod-bootstrap-scss than I get this error message:

Error: command error: failed to load modules: failed to get ["-d" "github.com/gohugoio/hugo-mod-bootstrap-scss@upgrade"]: failed to execute 'go [get -d github.com/gohugoio/hugo-mod-bootstrap-scss@upgrade]': failed to execute binary "go" with args [get -d github.com/gohugoio/hugo-mod-bootstrap-scss@upgrade]: go: github.com/gohugoio/hugo-mod-bootstrap-scss@upgrade: no matching versions for query "upgrade"
 *errors.errorString

razon · July 28, 2023, 3:18pm

It should be github.com/gohugoio/hugo-mod-bootstrap-scss/v5 as the README mentioned.

Could you provide your Hugo command? How do you serve the files? Have you tried native Hugo server command (just hugo server)?

Joerg · July 28, 2023, 3:24pm

go mod init example.com
go mod tidy
hugo server

this are the commands that I use.

The browser showed me this line https://dev.example.com/proxy/1313/ I use the code-server with a nginx-proxy manager.

razon · July 28, 2023, 3:45pm

I haven’t been experiencing with the code-server and nginx-proxy manager, but I think that is the point, since the RelPermalink and other URL-related vars are related to the baseURL.

In this case, the RelPermalink generated /scss/styles.css, when you access https://dev.example.com/proxy/1313/, the browser loads the https://dev.example.com/scss/styles.css while it should load the https://dev.example.com/proxy/1313/scss/styles.css (not sure).

I guess that modify the baseURL as same as the proxy given may help, it is a configuration issue, but I couldn’t provide more helpful info.

hugo server -b URL

Joerg · July 28, 2023, 3:51pm

Web Server is available at //URL:1313/ (bind address 127.0.0.1)

hugo server -b URL
Watching for changes in /home/code-server/Workspace/kwpse.com/{archetypes,assets,content,data,themes}
Watching for config changes in /home/code-server/Workspace/kwpse.com/config.yaml
Start building sites … 
hugo v0.115.4-dc9524521270f81d1c038ebbb200f0cfa3427cc5+extended linux/amd64 BuildDate=2023-07-20T06:49:57Z VendorInfo=gohugoio


                   | EN  
-------------------+-----
  Pages            |  4  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 12  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 634 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //URL:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

razon · July 28, 2023, 3:52pm

The URL is a placeholder, please replace it with the one nginx-proxy given, I’m not sure if it works.

Joerg · July 28, 2023, 4:18pm

I have no idea how to configure the NGINX Proxy Manager to display the css files and images. I am grateful for any advice.

[code-server@localhost example.com]$ hugo server
Watching for changes in /home/code-server/Workspace/example.com/{archetypes,assets,content,data,themes}
Watching for config changes in /home/code-server/Workspace/example.com/config.yaml
Start building sites … 
hugo v0.115.4-dc9524521270f81d1c038ebbb200f0cfa3427cc5+extended linux/amd64 BuildDate=2023-07-20T06:49:57Z VendorInfo=gohugoio


                   | EN  
-------------------+-----
  Pages            |  4  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 12  
  Processed images |  0  
  Aliases          |  0  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 591 ms
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

After opening in the browser the page is displayed without css and images.

https://dev.example.com/proxy/1313/

razon · July 29, 2023, 1:16pm

What about hugo server -b http://localhost:1313/proxy/1313/. The problem is that the style URL should be /proxy/1313/scss/styles.scss (in this case) not /scss/styles.scss, to fix this, specify the sub-path to match the nginx-proxy given may help.

Joerg · July 31, 2023, 10:14am

I found the solution.

relativeURLs: true

Tank you for the help

system · August 2, 2023, 10:14am

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Bootstrap and hugo setup support	9	996	May 10, 2023
Trying to use BootStrap as a module support	5	512	January 17, 2023
How do I add Bootstrap as a module? support modules	6	1473	September 18, 2023
Working example of Hugo Modules and Bootstrap .scss files? support	10	4042	May 8, 2020
Can't add Bootstrap Module support modules	1	1536	October 17, 2020

Bootstrap, Hugo and hugo-mod-bootstrap-scss

Related topics