Hi all,
after a long time in the making, I would like to propose a Hugo-based
port of the official Apache OFBiz website (ofbiz.apache.org).
It was crafted by humans in the first run and later by support of a
local AI setup using Hermes Agent with oMLX and Qwen3.8-27B-4bit.
The port rebuilds the current site with Hugo (target: v0.164.0 or newer)
while keeping the existing look and the content one-to-one.
All work is provided in pull request
https://github.com/apache/ofbiz-site/pull/36 for review.
I imagine that we could set up automatic generation of the website code
and deployment to the web server after a commit to the “main” branch.
I need your help with this: who can assist me in setting this up on
GitHub and testing it? I’m not familiar with how the deployment
currently works.
Even a link to relevant documentation would be helpful. Thank you very much!
It would be great if the community could re-vitalize the monthly blog
posts (we have a lot to share with all the activities around OFBiz).
We should also discuss how the release notes markdown files can be
generated from the github changelog or processed by a script like I have
used for the conversion of the existing release notes.
Below is a summary of the approach and the changes that were made.
1. MOTIVATION
-------------
The current Apache OFBiz website is a static HTML export of generated
code based
on php templates. Maintaining it is difficult:
- Template files mix layout markup (section/row/span wrappers, sidebars,
head/body fragments) with actual content. Many code parts are
redundant
throughout the templates.
- The frontend stack is outdated: Bootstrap 2.3.2, jQuery 1.12.4, and a
set of abandoned plugins, several of which are loaded but never used on
the OFBiz pages.
- The generated html files are also git versioned which leads to
confusion.
Hugo gives us a reproducible, versioned build from plain Markdown content
with a clean separation of content and layout, and lets us move the
frontend
to a current, maintained stack. This would also allow us easier
modernization
of the layout if we wish to.
Additional features like automatically generation of rss feeds and
sitemaps are included.
Builds can be done and reviewed with a build in live server.
2. APPROACH
-----------
- The official website is the single source of truth. All content was
imported 1:1 from ofbiz.apache.org with reference to the github
project;
nothing was invented.
- exception: unused pages/templates like user-stories and
service-providers
with Lorem-ipsum placeholder texts where left out. They can easily be
reintroduced if we need them later.
- The "theme" was ported to a local Hugo directory theme using the
classic layout structure (layouts/_default, partials, shortcodes).
No Hugo module setup is required.
- Content is plain Markdown. Raw-HTML blocks that cannot be expressed in
Markdown (tables, complex grids, <head> fragments) are kept as
deliberate raw-HTML blocks; layout wrappers are stripped from the
content and rendered by templates instead.
- Goldmark is configured with renderer.unsafe = true (the content is
project-owned and trusted) and with typographer/linkify disabled,
because some content needs plain HTML and must not get Markdown
processing artifacts.
- URL scheme: clean directory URLs (/developers/, /downloads/,
/release-notes/...) instead of the official .html URLs. Hugo rewrites
internal links automatically, which also fixed a number of dead
relative links from the Roller Blog import.
3. CONTENT
----------
- 83 blog posts (2015-2021) imported from the Apache Roller export,
served under /posts/ and linked from the News menu item.
- 47 release notes, current up to OFBiz 24.09.08 (21 versions imported
from the official site: 18.12.07-19 and 24.09.01-08).
- 12 top-level pages (Developers, Business Users, Getting Involved,
Mailing Lists, Source Repositories, Security, Demos, Downloads,
FAQ, ...) updated to the official 24.09 content state.
- The downloads page renders its version block (current release,
signatures, earlier releases) from front matter data instead of
hard-coded links.
- Pages that exist in the old theme but are not linked anywhere on the
official site (about-ofbiz.html, service-providers.html,
user-stories.html) were deliberately not imported.
- Total: 153 pages, build with zero warnings.
4. FRONTEND STACK
-----------------
- Bootstrap 2.3.2 replaced with Bootstrap 5.3.8 (CSS + bundle JS).
A bridge stylesheet maps the remaining legacy utility classes
onto Bootstrap 5, so the visual design is preserved.
- jQuery 1.12.4 replaced with jQuery 4.0.0 and jQuery Migrate 4.0.2;
jquery.easing 1.3 -> 1.4.1 and jquery.cookie 1.3 -> 1.4.1 (both their
latest releases). Two compatibility fixes were required:
* $(window).load(fn) -> $(window).on('load', fn) in custom.js
(the event shorthand was removed in jQuery 4.0).
* container.live(...) -> container.on(...) in the Revolution
slider plugin (live() was removed in jQuery 3.0; semantics are
identical for element-based objects).
Bootstrap 5 itself is jQuery-free; jQuery is only needed for the
legacy theme code.
- The header geometry (940px container, logo/menu alignment, navbar
height and shadow) was measured against the official site and
matched pixel-for-pixel, including the dropdown behavior (parent
items stay on the current page and scroll to top, as on the official
site).
- Removed: the dead Twitter footer widget (the platform no longer
serves widgets.js), unused social media links, and the broken
data-feather icon usage (replaced with the theme icon font).
- Kept: the Matomo snippet (analytics.apache.org, site id 21, cookies
disabled) and the legacy plugin set that the official site loads
(prettyPhoto, hoverdir, Revolution slider, ...).
5. VERIFICATION
---------------
- hugo --gc --minify: 153 pages, 0 warnings, no "raw HTML omitted" in
the output, no dead internal links.
- Browser verification against ofbiz.apache.org for the core pages
(home, developers, downloads, business users, FAQ, posts, release
notes, service providers, user stories, demos, mailing lists,
getting involved):
* header/nav geometry pixel-identical,
* home hero (Revolution slider) renders identically (banner size
and caption positions within a few pixels),
* FAQ accordion (exclusive open/close + icon toggling),
* business-user tabs, mobile menu (select box at 768px),
back-to-top button, and portfolio hover effects all work,
* console clean on all pages except service-providers and
user-stories, where the official site produces the exact same
errors (missing portfolio images, missing isotope plugin) -
kept for 1:1 parity.
6. REPOSITORY AND BUILD
-----------------------
- Build: hugo --gc --minify (build.sh);
use build-wipe.sh to empty the public directory beforehand
local dev: hugo server (server.sh).
No special tooling beyond a Hugo >= 0.164.0 binary is needed.
I would appreciate feedback on the approach, particularly on:
- keeping the legacy plugin set for parity with the official site
(vs. removing the unused parts),
- the clean URL scheme, and
- anything you would expect to change before this could be deployed
to ofbiz.apache.org.
Best regards,
Michael Brohl
ecomify GmbH - www.ecomify.de
Am 07.02.23 um 19:06 schrieb Michael Brohl:
Dear community,
In the course of getting Wiebke to be able to help with our blog, it
turned out that Apache Roller will be discontinued as the platform for
blogs by infra [1].
There is an offer and already a pull request [2] to export the
existing blog posts for a migration to Hugo [3].
Hugo is a static site generator which will generate individual pages
from every markdown blog posts file which is provided in the PR.
That means we need to (at least)
- setup a Hugo project
- build up templates for the blog posts which also include header and
footer for full page rendering
(hence, we have to take over some of the templates/html
code/javascrip/CSS to Hugo as well)
- generate the post pages and include them in the website under /blog.
These are quite some steps we have to take anyway and I ask myself if
we should not switch over to Hugo for the whole website as well.
That should be not too difficult because we already have some kind of
templates (in php) and there is already some sectioning with header,
content, footer etc.
The advantages would be
- to truly separate content from the templates (it is now mixed
php/content)
- blog posts can be generated from OFBiz commits and, together with
page content, be send in by pull requests
- content automation (no need to change the copyright year manually,
automated taxonimies for the blog etc.)
- easy process for a git supported writing process for pages and blog
posts and a fast and automatable publishing process (git hooks or
GitHub integration).
Coincidence: I am on a journey to migrate the ecomify websites to Hugo
we have at least some knowledge there (maybe others as well?).
To sum up, I propose to migrate our blog and also the Apache OFBiz
website to be an integrated, Hugo based website.
Opinions?
Best regards,
Michael Brohl
ecomify GmbH - www.ecomify.de
[1] https://issues.apache.org/jira/browse/INFRA-22461
[2] https://github.com/apache/ofbiz-site/pull/8/files
[3] https://gohugo.io/
