So I was able to use the recently implemented Asciidoctor extensions to get my site to build
asciidoctor-diagram images, like graphviz or plantuml images. The images are getting created correctly in the public directory, but for some reason on the web page itself the links are pointing to the incorrect location. Perhaps @muenchhausen might know what the issue is. The gitlab repository is https://gitlab.com/ca_water_data/ca_water_data_blog
Just for a concrete example, the actual gitlab pages site is https://ca_water_data.gitlab.io/ca_water_data_blog. Now the first introduction post is located at https://ca_water_data.gitlab.io/ca_water_data_blog/posts/#introduction . And the links to images in that introduction post are located at https://ca_water_data.gitlab.io/ca_water_data_blog/posts/example.svg, but the actual images are located in https://ca_water_data.gitlab.io/ca_water_data_blog/posts/introduction/example.svg. So you can see the error in the file/image path created by Hugo.
So I used the command
hugo -v -d ./build server to start a development server. The corresponding layout of the
build folder is like the image below. You will see that the actual images like
example.svg are under separate folders in the
build/posts/folder. NOTE, this is in contrast to the
water_image.jpg file, which was in the root of the
content/posts folder and then was pushed to the root of the
build/posts folder–and not put into any specific post folder.
So the picture
example.svg is rendered properly and it is in the
build/posts/introduction folder. The same is true for the images or the second post
However, it seems like the actual website itself is looking for these images in the
http://localhost:1313/ca_water_data_blog/posts/example.svg folder. So the image should be in the same root
posts folder instead of the individual
my-second-post folder. I copied and pasted the link into the search window at the top.
Now personally, I think it is nicer to have the images in the same folder as the post itself. But I will follow whatever the recommended approach is with Hugo. But I as just trying to figure out what I did wrong to get the link to mismatch with the actual image location.
Note, I checked and there are not directives in the Asciidoc posts themselves for an
:imagedir: so that is not an issue. I checked and in the demo project there was no reference for an
:imagedir: either. Also here is my
baseURL = "https://ca_water_data.gitlab.io/ca_water_data_blog" languageCode = "en-us" title = "California Water Data Challenge" theme = "dimension" pygmentsStyle = "colorful" pygmentsUseClasses = false pygmentsCodeFences = true [markup.asciidocext] extensions = ["asciidoctor-html5s", "asciidoctor-diagram", "asciidoctor-bibtex"] workingFolderCurrent = true trace = true [markup.asciidocext.attributes] my-base-url = "https://ca_water_data.gitlab.io/ca_water_data_blog" my-attribute-name = "California Water Data Challenge" [markup] [markup.tableOfContent] endLevel = 3 ordered = false startLevel = 2