Building Website Using Hugo,Spring Boot(WebFlux),Bootstrap
Choosing between static or dynamic
When building a website whether it is for your product, portfolio or blog, a high level decision is whether to choose static pages or dynamic pages. As per my information initially people started with static pages and then went to dynamic DB based contents. And now, people also found keeping data in DB has it’s own issues like latency and dependency on DB.
The middle path
There is one approach which is middle one where you use most of static content and also support dynamic data using rest api.
Components
Considering these technical aspects I chose the following tech stack to build my website
- Bootstrap
- Hugo for static webpage generation
- Spring Boot(WebFlux) (Reactive Programming based back end framework)
This blog post will give you high level idea how to build website using Spring Boot(WebFlux), Bootstrap & Hugo.
Let’s try to understand each component:
Bootstrap
All HTML web pages can be written using Bootstrap & JS.
Hugo
Hugo is static site generator which takes care of managing website page layput, templating and search engine optimization (SEO).
Spring Boot(WebFlux)
Spring Boot take care of serving static web pages and exposing rest API for CRUD operations.
Hugo with Spring Boot
I will not write much about writing web page using bootstrap and adding in to webflux project. But main trick here is how to integrate Hugo with your spring boot backend.
This is achieved by keeping all your static content in a folder on which Hugo can work. Then you need to configure Hugo to output its build files to static folder of Spring project specifically here:
src/main/resources/static
This folder is in classpath of spring boot project and is used to serve client http requests.
You can configure build output of Hugo with property ‘publishDir’ in Hugo config file.
Below is sample of my Hugo config file:
publishDir = "../src/main/resources/static"
uglyurls = true
languageCode = "en-us"
I will keep adding more information.