[I apologize if this is is a simple/stupid question, I’m fairly new to Hugo]
I am trying to convert an existing (dynamically generated) site into a static site generated by Hugo. There is a substantial amount of pre-existing css (and html) that I need to reuse. Much of the existing material refers to "/static/" locations (such as discussed here). The html has been translated to use appropriate paths (convert "/static/img/thing.png" and "/static/css/stuff.css" to "/img/thing.png" and "/css/stuff.css"), by placement into the proper directories for processing by templating.
But it is unclear to me how to get the references to static elements (such as image files) that exist in these static resources. Should I try to have the (static) css processed by templating, or do I need to just remove the "/static/" from these files, and otherwise leave them placed in the static/ directory? As a quick fix [hack], I copied the static/ tree to static/static/ and everything is rendering ok, but I suspect that there is a better, more Hugo-like approach.
For example, the following appears in a .css file, background-image: url('/static/img/thing.png');
What is better, place the file somewhere to be processed by templating, or remove the "static" part of the url/path? background-image: url('/img/thing.png');
And on a similar note, where is the best location to place .pdf files? These seem to be static content (at least for now), so I would think a directory that is not processed by templating would be best.
When I look at spf13’s blog site, I notice that he places some static content nested into /static/static/, such as looking at this page, http://spf13.com/presentation/
and inspecting the header.
Rather than this css being placed directly at the root, it appears at /static/css/, which implies that it is nested (e.g. /static/static/), <link rel="stylesheet" href="/static/css/style.css">
[Rick] Thank you for your answer.
So I should place static content (e.g. css, images, javascript, et al) into /static/, which Hugo will place into /public/. And should I want to references these artifacts to include static in the path, I should place that content into /static/static/ instead.
Since there are existing files which reference this static content in /static/, then I need to edit those pages (including css, js) to reference the location where Hugo places those artifacts (correct?).
This would mean that my site source would have the following directories,
content/static/ which contains:
content/static/css/ which contains css
content/static/image/ which contains images (.png, etc)
content/static/js/ which contains javascript
And my site published directory, public/ would contain these corresponding directories,
public/css/ which contains css
public/image/ which contains images (.png, etc)
public/js/ which contains javascript
Any existing references to artifacts (.css, .js, .png, et al) would need to be revised to remove the [now extraneous] ‘static’ path element.
just to clarify your wording, you should call things that go into static assets instead of content, and your source directories would not be content/static/, they’d be projectroot/static/
I bit the bullet, and have revised the pages to remove the static references, and replace them with {{.Site.BaseURL}}<asset-subdir> links.
I have created all of the assets (css, javascript, images, et al) and I have placed these assets into the appropriate <project-root>/static/ sub-directories [css, js, img, …].
I have encountered some interesting issues with angular(js), which wants to use the double moustache {{ ... }} for its own nefarious purposes. SO, I have been eviscerating the angular(js) behavior.
That’s right, you’ll need to adjust paths. I don’t know if hugo will choke on having a section folder like /content/static in the project. You’ll need to check. If you put that folder there, indeed there would logically be a public/static folder, but, that may indeed conflict with any /static/static folder and I’m now sure how. That sounds like trouble, to me.