How to integrate Foundation framework into a Hugo template?

I’m creating a website which shall be hosted on GitHub Pages using Hugo as a static site generator.

The Hugo theme itself is being developed using the Zurb template of Foundation 6. In order to track any changes to the theme I’ve set up a local Git repository which will later be pushed to GitHub for maintaining the template. Let’s call this repo1.

Additionally I would like to make my Hugo theme available for others. Let’s call this repo2.

I have some trouble understanding a possible workflow. Here is what I have in mind:

  1. Make changes to the Zurb template and commit them to repo1.
  2. The Foundation CLI will compile the template to the dist/ folder.
  3. The recompiled content is “promoted” to update the Hugo theme in repo2.
  4. Additionally the final GitHub pages site is updated with the new Hugo theme.

I habe some trouble puttings this into words but maybe you get the basic idea.

Are there any recommended workflow and setups for developing and publishing a Foundation template in combination with Hugo and GitHub pages?

Or an “integration guide” how to use the Foundation 6 framework when creating a Hugo theme?

I don’t really have time to do a long post, but I use Hugo, foundation and digital ocean (wercker automation).

I literally installed hugo, then installed foundation sites template in the hugo directory (i.e. hugo/foundationsite/. I then copied the src/scss folder to the hugo/src and then modified the gulpfile.babel.js to change what compiling is done (i.e. not panini or img processing), and all the source and distribution directories i.e. (dist goes to hugo/static/css etc).

Then, I just use hugo server in the usual way, and when I update the scss or js, I just run foundation build --production in the foundation directory.

It probably isn’t as good as a custom solution, but it makes updating foundation via the foundation cli very easy. Plus you don’t really need to know gulp as tweaking the file is not that difficult.

Apologies if that is not very clear, but my knowledge of Gulp is extremely limited, so for something more technical someone else will need to chime in.

There’s a Hugo Theme based on Foundation here: Hugo Theme Foundation 6

This might be the perfect fit already or at least a source for inspiration.

I tried that theme when I first started, and I had two issues:

  1. The version is not the latest Foundation one.
  2. The build process doesn’t use the standard hugo build commands which makes it difficult to follow tutorials \ use third party automated build processes (at least that is how I remember from when I had zero knowledge).

So, basically it did’t work well for me, and caused things to break when following other tutorials \ automated build processes & tools.

Yes, you’re right. But basically it’s as easy as downloading the foundation files from their site and putting them in Hugo’s static folder (i. e. static/css) and reference to the css file like <link rel="stylesheet" href="css/foundation.css" /> and after that you can put your custom style sheet. That’s basically it. If you run hugo server all files in the static folder will be copied to the development environment or later if you build the site with hugo they will be copied into the public folder ready for deployment.