Bulma releases packaged for use with Hugo as module or using git.
This is a brute force repacking of Bulma release to ease up adding it to a Hugo site.
If you have problems/issues with Bulma itself, please use the Bulma issue tracker.
Anything regarding packaging may be addressed here Bulma 4 Hugo
Set up a your Hugo site and cd
to site root folder.
Now add Bulma 4 Hugo to your site using one of the below methods
First install Go (needed for Hugo modules)
initialize your Hugo site as module
hugo mod init your_module
add the module to your site config file:
Hugo.yaml
module:
imports:
- path: github.com/irkode/bulma4hugo
Hugo.toml
[module]
[[module.imports]]
path = "github.com/irkode/bulma4hugo"
Add Bulma 4 Hugo either using plain clone or as submodule.
HINT: we have no branches for the Bulma releases, just tags:
Example: release
0.7.5
is tagged asv0.7.5
Clone
git clone --depth 1 --branch v0.7.5 https://github.com/irkode/bulma4hugo.git themes/bulma4hugo
Submodule
To use a git submodule you must ofc hava a git repository for your site. If your's is not git init .
It's not possible add a submodule using a tag. so you will have to something like:
git submodule add https://github.com/irkode/bulma4hugo.git themes/bulma4hugo
cd themes/bulma4hugo
git checkout v0.7.5
cd ../..
git add themes/bulma4hugo
git commit -m "bumped Bulma 4 Hugo to release 0.7.5"
Each release also has it's files added as .zip
and .tar.gz
archives attached.
bulma4hugo-1.02
folder to bulma
If you want to keep the version suffix, make sure to include it in your theme
site parameter.
Add the theme to your site configuration
Hugo.yaml
theme: bulma4hugo
Hugo.toml
theme = "bulma4hugo"
If you kept the version information in the folder name when using the source variant. Use bulma4hugo-1.0.2
After installing Bulma 4 Hugo you may refer to the Bulma css, sass files from /assets/bulma
Just follow the Official Bulma documentation.
In general you will use Hugo Asset Management to add Bulma to your site.
Different releases of bulma provide different css/sass files to include
pre 0.6.x versions just provide css/bulma.css
, bulma.sass
with 7.0 a minified CSS is provided css/bulma.min.css
later versions may add more stuff
Since Bulma 4 Hugo 0.7.6
we list the provided files in our release notes. For more details on a release consult the bulma release notes.
keep in mind that we mount Bulma to
assets/bulma
folder, so you will have to add a leadingbulma
. See examples below.
use the (minified) css file
use as any other global resource resources.Get
{{ with resources.Get "bulma/css/bulma.min.css" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous" />
{{ end }}
use the sass file (0.x versions)
Straight from the docs at: Asset Management - SASS
{{ $opts := dict "transpiler" "libsass" "targetPath" "css/bulma4hugo.css" }}
{{ with resources.Get "bulma/bulma.sass" | toCSS $opts | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
use the sass file (1.x versions)
since Bulma 1.0.0 you need dartsass to assemble. Install it and configure your hugo pipe to use it
{{ $opts := dict "transpiler" "dartsass" "targetPath" "css/bulma4hugo.css" }}
{{ with resources.Get "bulma/bulma.scss" | toCSS $opts | minify | fingerprint }}
<link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
{{ end }}
Bulma 4 Hugo follows the Bulma release scheme. So version numbers are same.
New Bulma releases should be added shortly after published.
This is just a repack of Bulma. This packer itself is MIT licensed
For Bulma Licensing terms consult the Bulma Documentation at Bulma Licensing and Copyright
The Bulma CSS framework is (c) by Jeremy Thomas (jgthms)