Errors in trying to build a site using exampleSite in academic-folio theme

Very new to hugo: I have been trying to build my site usng the academc-folio theme avalable at: GitHub - rohandebsarkar/academic-folio: DISCONTINUED: Hugo port of the popular Jekyll theme al-folio

I understand this theme is discontinued because the author has gone over to Jekyll (from what I understand) but I am not planning to change my theme much once I can get things going.

Anyway, there is an exampleSite in there, but what I am lost about is how to translate it to my website. (I know how to make this exampleSite work, through make serve and the site does render “fine” but my question is how do I make this work with my site.

Here is what I tried:

  1. create my site using hugo new site my_site
  2. copied academic-folio theme to the themes subfolder, and all the files in assets, config, content and so on from the exampleSite into the my_site folder/directory.
  3. Added theme = ‘academic-folio’ to my automatically created hugo.toml
  4. Used hugo server on the “root directory.

Is this generally the correct thing to have done?

However, I get the following:

Error: command error: failed to load modules: module “ GitHub - FortAwesome/Font-Awesome: The iconic SVG, font, and CSS toolkit ” not found in “/home/aarem/mysite/themes/github.com/FortAwesome/Font-Awesome”; either add it as a Hugo Module or store it in “/home/aarem/mysite/themes”.: module does not exist

  1. I do not understand why this font is a problem here, when the exampleSite run does not show this problem in the sense of why this font is suddenly being asked for while it was not asked for with the exampleSite run.

  2. It appears that the config/_default/config.yaml has a section which says:

    module:
      imports:
    
      - path: github.com/FortAwesome/Font-Awesome
            mounts:
      - source: svgs
        target: assets/svgs/fontawesome
    
    

What do I do here? Are there instructions on this anywhere?

I am sorry I found instructions on how to borrow from exampleSite or in the case of installing(?) fontawesome very difficult to find.

Thanks in advance for any suggestions and help!

To import modules into a project, the project must also be a module.

hugo mod init foo

In the above, foo is typically something like github.com/user/project.

Thnaks! So, in this case, is the fontawesome a module? Or is the exampleSite a module?

The root of your project.

Thanks ! Sorry, I do not understand the lingo here: being new, my root here is my_site (I am only serving locally). I am not sure how to resolve my issue here by “importing a module”.

Starting from scratch…

hugo new site hugo-forum-topic-56709
cd hugo-forum-topic-56709/
git init
git submodule add https://github.com/rohandebsarkar/academic-folio themes/academic-folio
rsync -av --exclude='themes/academic-folio' themes/academic-folio/exampleSite/ .
rm hugo.toml
printf ".hugo_build.lock\nhugo_stats.json\nnode_modules/\npublic/\nresources/\n" > .gitignore
git add -A
git commit -m "Initial commit"
hugo server

Thanks very much for this!

It works!! But I had two questions.

  1. Whatever happened to the FontAwesome issue above?
  2. The fact that I do not have a .toml or .yaml file: is that desirable/even a minor problem?

Btw, since these files do not exist, what does hugo do? How would I have modified the .toml file instead for that to have worked?

I do get the following warning:

WARN Raw HTML omitted while rendering “/home/aarem/Downloads/hugo-forum-topic-56709/content/distill/example/index.md”; see Configure markup
You can suppress this warning by adding the following to your site configuration:
ignoreLogs = [‘warning-goldmark-raw-html’]

I guess I should convert the HTML in this markdown to proper markdown here?

Many thanks again for all the help here!

The theme pulls in github.com/FortAwesome/Font-Awesome as a module. You can see this in the go.mod file in the project root. When you build a Hugo site, the module dependencies are placed in the module cache. You can either dig deep into the cache’s directory structure to see the files, or run hugo mod vendor to vendor dependencies into the _vendor directory in the root of your project. You could leave the _vendor directory as is, but usually, it’s better to delete the directory so that you can update it via hugo mod update.

No. Your project configuration is the config directory in the root of you project—you can do it either way.

By default, the Markdown renderer treats raw HTML as unsafe content. See details.

Thanks very much for all these details! They are very helpful.

I have two more questions, one of which may be specific to the theme, and so I understand may not be possible to answer.

  1. There is a directory called content/distill/example/ inside the root which appears to have, among other things, that index.md which is read. How does hugo know to read that file? I have been looking at some tutorials (and the documentation) and at least I can not see what this specific folder/subfolder does. There is also a distill folder inside the theme in layouts/distill.
  2. Does it matter that this theme is no longer supported. In the sense that is it expected that a theme is updated as hugo keeps getting updated, or is there going to be backwards compatibility with regard to a theme, with specific regard to only those features that are covered by a theme (I understand that there can be no way new features in hugo can be included in a discontinued theme, of course). I am trying to understand the risks in proceeding with a discontinued theme. I have to say that I do not particularly intend to change my webpage layout often, and not for years. I only want to update the material in there as life progresses.

Many thanks again for all the advice/suggestions!

content/
└── distill/              <-- Kind: section  BundleType: branch
    └── example/          <-- Kind: page     BundleType: leaf
        ├── appendix.html
        ├── index.md
        └── refs.bib

See https://gohugo.io/content-management/page-bundles/.

Yes and no.

It matters if:

  • You encounter bugs and the theme author isn’t around to address them.
  • You want new features that require medium or advanced knowledge.
  • You want to use the latest version of Hugo and the theme does not support it.

If you like the theme, haven’t found any major bugs, and don’t expect to add new features, then go ahead and use it… with three provisions:

  1. Once you start using this theme, note the Hugo version you are using and do not update it. If you’re using v0.155.3 today, in three years you will still be able to download the same version from the GitHub repository.
  2. Do not change the theme files. Instead, override them by creating a file with the same path in the root of your project directory.
  3. Fork the theme repository in case the owner decides to take it down.

Thank you for this advice! It appears that the theme is about 3 years old, though there was a last update perhaps a year ago.

I will see if I can learn enough hugo to update the theme and see if it still works.

What is the difference between a .toml and a .yaml file? Which one is preferred?

Many thanks again, and best wishes!

YAML, TOML, and JSON are serialization formats. You can use any of them for your project configuration and for front matter. Which one you choose is largely a matter of preference.

Thank you for this! I was wondering because hugo creates a TOML file by default.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.