Hugo Themes
Hugo Bootstrap Theme
Theme for a blazing fast static website and/or blog using bootstrap 5.
- Author: Filipe Carneiro
- GitHub Stars: 73
- Updated: 2024-01-13
- License: MIT
- Tags: Blog Bootstrap Landing Minimal Responsive
Hugo Bootstrap Theme
Theme for a blazing fast static website and/or blog using bootstrap 5.
Demo
Features
🛡️ Security aware
Get A+ scores on Mozilla Observatory out of the box. Easily change the default Security Headers to suit your needs.
⚡Fast by default
Get 100 scores on Google Lighthouse by default. Hugo Bootstrap Theme removes unused css, prefetches links, and lazy loads images.
📈 SEO-ready
Use sensible defaults for structured data, open graph, and Twitter cards. Or easily change the Search Engine Optimization settings to your liking.
Framework
Hugo
Hugo is the world’s fastest static website engine. It’s written in Go (aka Golang).
Bootstrap
Get started with Bootstrap
Requirements
The tools used are cross-platform and should work on Windows, MacOS and Linux. You will need the following tools to be downloaded and installed:
Hugo static site builder - IMPORTANT: make sure you pick the extended version, Hugo_extended_0.xx.x_…
Node & NPM - We use this to maintain project dependencies
Git - This is optional, but highly recommended for version control and remote backups.
Usage
Test the theme locally on your computer
Clone this repo:
git clone https://github.com/filipecarneiro/hugo-bootstrap-theme.git
Test if the site is working:
hugo server -D --disableFastRender --source exampleSite
This launches Hugo development server and you can see the example site by opening http://localhost:1313/hugo-bootstrap-theme/.
You can also use Hugo as an installed NPM local package. In this case, you don’t need to install Hugo globally:
npm install
npm run start
This will install Hugo in a bin subfolder and then run it, using the NPM package exec-bin.
Install on an existing Hugo site
Step 1: Install via NPM
npm install @filipecarneiro/hugo-bootstrap-theme
Hugo bootstrap theme package will also add bootstrap and feather-icons to node modules.
Step 2: Add to Config
Then add the theme hugo-bootstrap-theme to your sites configuration file
config.toml, config.yaml or config.json:
theme = "hugo-bootstrap-theme"
themesdir = "node_modules/@filipecarneiro"
The new themes directory (themesdir) is needed to get the new theme from the node_modules folder.
Step 3: Test your site
hugo server -D --disableFastRender
Step 4: Check your parameters
Check your copyright variable, your menus (the theme supports main, footer and social menus), etc.
Have a look on exampleSite for inspiration :)
Start from Scratch
Step 1: Create a new Hugo site
Follow Hugo Quick Start to create a new site, add a sample page and change basic settings.
Since you’ve created an Git repository, let’s specify some Hugo files and folders to ignore.
Create a .gitignore file on the root of your project with this content:
public
node_modules
resources
.hugo_build.lock
Optionally, add a remote repository and push your code.
Step 2: Install and configure Hugo Bootstrap Theme
Update npm to the latest version:
npm install -g npm
If you don’t have npm, download and install Node.js and npm .
Then, create an npm package for your site:
npm init -y
If wanted, you can customize your package information, editing the generated package.json file.
Now, install Hugo Bootstrap Theme:
npm install @filipecarneiro/hugo-bootstrap-theme --save-dev
Then add the theme hugo-bootstrap-theme to your site configuration file config.toml:
theme = 'hugo-bootstrap-theme'
themesdir = 'node_modules/@filipecarneiro'
Change the existing theme value from ananke to hugo-bootstrap-theme and add a new line for themesdir, like above.
Add some configuration
, like copyright, description and your menus (the theme supports main, footer and social menus).
Have a look on exampleSite for inspiration :)