I'm using Hugo to generate a static site. I'm making use of Hugo's image functions to create different sized versions of the same image (160px, 240px, and 480px).
That's all working fine but Hugo also makes the original image available (e.g. IMG_7307.jpeg) in the public directory too. I don't want to publish the original images. How can I tell Hugo not to include them?
You should use Hugo's Build Resources options in your page's front matter. See below for an example:
---
title: Your Page's Title
_build:
publishResources: false
---
Hello, world!
Any resources in this page's bundle will not be copied into the /public directory unless their .Permalink or .RelPermalink is used.
Related
I use Next.JS to build a small landing page including videos and images. Since the assets are static I assumed the practice here is to create a static folder and the call the videos/images from there.
Somehow Next is not able to find my assets though - how so? When I use them within the public directory, it works fine - but I guess this is a bad practice?
<img height={320} src="/static/images/hero/tag.svg" alt="" className="float-right" />
<video src="/static/video/hero.mp4" playsInline loop muted autoPlay poster="/static/video/hero-poster.jpg" />
In nextjs static file serving works only from public folder.
You add an image to public/my-image.svg, the following code will access the image
return <img src="/my-image.svg" alt="my image" />
Couple of notes must be taken care:
Note: Don't name the public directory anything else. The name cannot be changed and is the only directory used to serve static assets.
Note: Be sure to not have a static file with the same name as a file in the pages/ directory, as this will result in an error.
Both options has valid use cases
Assets - files are bundled directly into compiled chunks. That mean no extra request to load it in runtime and assets are instantly available. Definitely way to go with icons and other "inline" content. (You need to have appropriate webpack loader each file type. Images are supported out of the box but other file types may need manual config)
https://nuxtjs.org/docs/2.x/directory-structure/assets
Static - oridinary static files served directly by webserver. useful for big files, downloads, rarely accessed files etc.
https://nuxtjs.org/docs/2.x/directory-structure/static
In your case I would recommend images to be asset. Video can be static.
I understand that the normal workflow with hugo is to generate a static site using the "hugo" command, and then deploy your site by copying the public/ directory to your production web server. I don't want to do that: I just want the html files in the public/ directory to display correctly, and have links that work, when I open them in my web browser. I do not want to run the "hugo server" command.
Specifically, the links that are generated are all missing "index.html" at the end.
For example, a link to the About page will be:
file:///C:/Users/myusername/Documents/HugoTesting/quickstart/public/about/ which will open a view of that directory when I click on it. But it will display the web page properly if I can change the link to: .../public/about/index.html
How can I make that change throughout my site? I already set "relativeUrl" to true in my config file, as it says to do here:
https://gohugo.io/content-management/urls/ as it was necessary to get my index page to display properly. The documentation there says this helps to " make your site browsable from a local file system" so I know it must be possible.
I've tried using permalinks and using frontmatter to try and add "index.html" to all of my links, but hugo is adding an extra '/' to whatever I specify using permalinks, and while the "url" tag in the frontmatter works, it's not feasible for me to do for every url in every page.
I think ugly URLs configuration in Hugo might help you with this, (e.g., example.com/urls.html).
Set uglyurls = true or uglyurls: true in your site’s config.toml or config.yaml, respectively.
I have a create-react-app that needs to embed an html file (along with its own JS and other files) into an iframe on one of the components. I've searched the Facebook react docs on public folder (which says it should work), various other stack overflow questions to no avail.
I added the folder ixoearth containing the external files into public folder. Folder structure
When I access it in dev mode (localhost:3000), or in prod mode from the network IP it works (eg. 192.168.1.128:63738 ). but as soon as I attempt localhost production mode it doesn't find any of the files in the public folder.
Here's my iframe URL:
iframe src
When using create-react-app you need to use a special PUBLIC_URL variable like is mentioned in the docs. This will generate the right path during the build phase so that it works in production.
I have images, PDFs, etc. that I would like to store in one location (/content/) instead of /static/ folder for organizational reasons. Obviously, Hugo should copy this to static when I serve the webpage.
How can I do this?
Hugo can't copy things in the content/ directory to static/ by itself - you would have to use a pre-processor or post-processor like Grunt or gulp.
I am trying to setup a localhost version of our site and have a problem getting this setup correctly.
Both our live and localhost site have this directory structure:
/na_cms/expressionengine/templates/default_site/c.group
/na_cms/expressionengine/templates/default_site/j.group
/na_cms/expressionengine/templates/default_site/default.group
/na_cms/expressionengine/templates/default_site/inc.group
On our live site, CSS files in our templates are accessed like this:
href=“css/c/modal.css”
src=“j/jquery-ui-1.8.4.custom.min.js”
How do I get rid of the 404 not found errors for the CSS and javascript files on the localhost site?
My config file has
$config[‘rewrite_short_tags’] = TRUE;
I'm obviously using assumptions here until further information gleamed...
You're using templates to hold your JS and CSS, rather than external files (Nothing wrong with that), so they're not technically relative URLs - it's pulled from the database so you won't have any more of a path than template group and template. The browser will not be targeting these template files directly, it will be EE providing them.
In your j.group folder I'm assuming you have a file called "jquery-ui-1.8.4.custom.min.js.js", which relates to a template group called "j" and a template called "jquery-ui-1.8.4.custom.min.js"?
What I'm a bit confused at is "css/c/modal.css", as this is indicating a template group called css, but you've stated your template group is called "c" and the template is "modal.css". Possibly this was a mistake, or you've got a "css" template group and falling into the index template...?
Firstly, check your template folder settings in EE, Design -> Templates -> Template Manager, then "Global Template Preferences". Look for "Basepath to Template File Directory". I'm assuming that you copied the online database to your local, rather than a new fresh install?
If you're using htaccess rewriting, check that is working on your local.
Failing that, try changing the paths to the CSS and JS to use the path variable:
src=“{path='j/jquery-ui-1.8.4.custom.min.js'}”
http://expressionengine.com/user_guide/templates/globals/path.html