Is there a streamlined way to render Quarto in HUGO?

[Stradichenko]

I want to show graphical code results. I know that Quarto integrates somewhat with HUGO, but the current methods feel cumbersome and error-prone:

Thus far I implement Quarto+HUGO as follows:
Firstly, setup:

# config/_default/hugo.toml
ignoreFiles = [ "\\.qmd$", "\\.ipynb$", "\\.py$" ]
#...
[markup.goldmark.renderer]
  unsafe= true

Then, create a page bundle:

Hugo Site Structure
├── content/
   └── posts/
       └── my-analysis/
           └── index.qmd

The Quarto metadata should include at least format: hugo-md.
Render documents using Quarto:

quarto render content/posts/my-analysis/index.qmd

This will create index.md.

Then I’d erase the Quarto metadata in index.md and manually write the rendered HUGO metadata (This is the part that bugs me the most and is more error-prone).

Then as usual:

hugo server --noHTTPCache --renderToMemory --disableFastRender --ignoreCache --gc --logLevel debug -e development -D

This pipeline works, but I’d call it more like a workaround. Does anyone have or know a better way to achieve this?

[irkode]

I don’t get that one imho at that point in your flow there was nothing rendered by Hugo

@Stradichenko

manually write the rendered HUGO metadata

some ideas without having the full picture and never used jupyter and quarto
(everything that could maybe done inside theses tools is out of scope)

• use an external file watcher to autobuild quarto after change

• automate the index.md update IF you can define rules for that

  • quarto index.qmd && update_frontmatter maybe using GitHub - mikefarah/yq: yq is a portable command-line YAML, JSON, XML, CSV, TOML and properties processor

  • generate a final md file from the generated one using hugo template or content adapter

    └── my-analysis/
        └── quarto
    	    └── index.qmd
    		└── index.md    <-- generated by quarto
    	_content.gotmpl     <-- use stuff in quarto folder to build up a new page
    # OR
    	_index.md           <-- special layout that uses the quarto folder to render
    

• you could warn or break the build if the *.qmd file is newer than the *.md file (eg. gitInfo)

• Hugos build options combined with cascade and mounts could be helpful instead of global exclude

  This will offer to use resources and turn of render to public selective

Usually a runnable example repo will help to understand your steps incl. input and outputs.

You could create a small repo showcase that contains:

• one notebook source before the quarto call
• the output generated by quarto
• the files before and after your manual changes

all wrapped to a working Hugo site so we have no need to install Jupyter and Quarto.

[Stradichenko]

You are giving me a good set of ideas I haven’t thought of; and I know I won’t be able to implement, test and and summarize/reply within the time frame of the forum limit:

This topic will close 2 days after the last reply.

So I’m marking it as solved in case I don’t get the chance later .

[ajustinfocus]

Would be cool to use web-native charts (e.g. d3.js) where possible, how close are we to having easy ways to transpile (or replace) plotting libraries designed for ‘print’ (e.g. matplotlib etc) into web-native graphical formats?

This sounds promising:

Using Observable – Quarto