I'm organizing my images and other assets with one directory per post, like this: /assets/blog/[post date]/. I'm using a responsive image plugin, so I can exclude images in that folder from the build like this:
exclude: ["/assets/blog/*.jpg", "/assets/blog/*.png"]
Now I also have assets that are not parsed by the plugin (OG and Twitter card images), so I need those to be copied to the build. How can I add a pattern for those files to include those files?
Example:
Exclude all images in /assets/blog/ and its sub directories, except those in /assets/blog/[date]/OG-And-Twitter/
I tried to use regex:
exclude: "/assets/blog/????-??-??/[\w|-]+.png"
But that didn't work.
Related
I hope this question is not completely stupid. I am currently building a website using only plain HTML in Webpack. When I try to load images as usual, using the img tag and the src attribute, my images are not displayed. I found this in the webpack documentation. But there it only describes how I load images via JavaScript.
webpack Documentation
For all those who have a similar problem. You must first load the html-loader to be able to load images in your HTML files.
You need to specify image urls as described in the documentation. Then, Webpack will bundle everything together, place your images in the output folder and generate the final URL.
Now, when you import MyImage from './my-image.png', that image will be
processed and added to your output directory and the MyImage variable
will contain the final URL of that image after processing.
Webpack uses JS to process all the files, however JS may not be needed to load the images on the page.
Here is my repository on my Hugo blog:
I'd like to insert an image to a post with the following text:
However, it does not come out and it gives an error of 404 - Page not found.
What am I making wrong here?
You have a typo in the image link. You have an images directory, but reference "content/post/image/..." without the "s". That won't fix it for you though.
There are a few ways to link images.
Option 1. Put all of your images in the static/ directory. Then reference the image file with a leading slash, e.g.:
Option 2. Use sub-directories to hold the markdown file and any related resources.
create a directory post/creating-a-new-theme
move your existing markdown file into that directory, and rename it to index.md
create a subdirectory post/creating-a-new-theme/images and move your images in there
reference the image as 
More info on option 2: https://github.com/gohugoio/hugo/issues/1240#issuecomment-753077529
More options
There are more sophisticated ways to reference images using the frontmatter, as well: https://gohugo.io/content-management/page-resources/
TL;DR
Put your images in the static directory, just like below, use it in markdown like  or  if you don't want to build a post folder
If you search the hugo documentation, you can find Image Processing | Hugo
But! That's no a markdown way to insert an image. If you don't miss the Getting Stated, you will find the static Directory, which says can store images, that's it!
[static](https://gohugo.io/content-management/static-files/)
Stores all the static content: **images**, CSS, JavaScript, etc. When Hugo builds your site, all assets inside your static directory are copied over as-is. A good example of using the static folder is for verifying site ownership on Google Search Console, where you want Hugo to copy over a complete HTML file without modifying its content.
How to use it
Put your images in the static directory, just like below, use it in markdown like  or  if you don't want to build a post folder
static
└── images
├── my_post_folder
│ ├── my_image.png
└── my_image2.jpg
I have multiple language versions of my website from the root folder as
en-ca/*
fr-ca/*
en-us/*
etc.
I have created a _resources folder that contains css common to all sites.
I would like to copy the content of the _resources folder into en-ca/*, fr-ca/*, en-us/*, etc. at build time.
Hmmmm.... Are you sure you want to do that? That doesn't seem like a good idea.
If the CSS is identical across the different languages, why would you make the end-users download the same file again when switching to a different language, if they already have the same file cached in their browser?
It would be better to have the common CSS in a single place, and have your HTML templates reference that instead, and leverage the browser cache, etc.
Anyway, to answer your question, if you want to use pure Jekyll (without a plugin), you can create empty common.css files inside each language folder, and use the tag include_relative to copy the contents of the common.css to it.
Jekyll Includes / include_relative
https://jekyllrb.com/docs/includes/#including-files-relative-to-another-file
Alternatively, you can write a plugin that copies the file to the folders you want. In the answer below there's a small example of a plugin that renames files... You can adapt it to copy files instead:
https://stackoverflow.com/a/48600246/211672
Question: what software should I use to achieve a static site generator like described below?
I'm looking for a static blog generator, which... generates static blogs, of course :). However I need something more, like a nice set of themes to choose from, and, what is even more important, a specific way of managing assets.
When I write articles/posts/text, I create a new directory. Then inside I have a file like article.md, or article.textile. I also have files with code, and pictures, and charts etc. Everything is inside this one directory. Then I used to run a tool to convert it to html, and copy the html to a website for publishing. However there was always a problem with images. I had to copy the images somewhere e.g. to Wordpress and then change the image urls in the html. This is not the best way to do it.
I'd like to have a static blog generator, which would let me keep my normal structure: one directory per post, and keep all the images from the directory in generated structure, so I can have relative paths to the images.
I really don't like the idea to keep all articles in one global directory, and all images in another global one.
I've checked jekyll, and pelican so far, and read about couple others, but I haven't found any solution to that problem. I know that, as usually, you will have many nice ideas to check.
And of course I know that most probably this post will be "closed and not constructive", or with any other funny explanation, but maybe someone will manage to post any solution before that.
Hugo can do this. cd to empty folder of your choice, then
create the scaffolding:
hugo new site .
After that you can put your content in content, example:
content
post
alpha
index.md
1.jpg
2.jpg
bravo
index.md
1.jpg
2.jpg
Build site:
hugo
Result is generated in public folder:
public
post
alpha
index.html
1.jpg
2.jpg
bravo
index.html
1.jpg
2.jpg
Jekyll does not explicitly enforce a rule about where to put your assets like images with the exception that Jekyll will not copy files directly in a folder beginning with an underscore. Although the general practice would be to put all images in the \assets\ directory, you can put it anywhere else other than the _posts\ directory, which is what you wanted.
This is the default behavior, but there are ways to get around this:
Have your posts live outside the _posts directory
Put all your posts outside the default _posts folder along with the images (this will copy all the files without any YAML frontmatter, and preprocess all the files with the YAML frontmatter). However, any other function you can do with posts automatically in Jekyll won't work anymore. This may or may not be an issue.
Plugins
Here's a plugin (link to SO question) written specifically for making Jekyll copy files in the post directory. If you do use this you can definitely just write the following Markdown and it'll link relative to the post as it should. :
Jekyll asset path plugin is another robust plugin that does something similar, but does not keep your images in one directory, it does however link images relative to your post title though.
Jekyll asset pipeline is another another plugin that handles CSS and JS, which might be something you want to have in conjunction with plugin 1.
Do note however that the use of third party plugins is not supported with GitHub Pages site generation, meaning you will have to generate them in another branch or locally, and then pushing the static HTML files to master. This might be an issue for you if you're planning to host with GitHub Pages, else on your own server instance you're good to go.
I also want my posts to be "self contained", text content and image assets being in one single folder. I'm using Jekyll.
I have made this possible with a Pull Request on the great jekyll-picture plugin.
I can then use the simple {% picture my-image.png %} syntax to show the image in my post that is in the same folder.
Here is an example: https://github.com/nhoizey/nicolas-hoizey.com/tree/master/_posts/2015/06/19-mon-jeu-esviji-integre-a-framagames
One year after my previous answer, I have now developed a Jekyll plugin that helps keep posts assets alongside the Markdown file, it might fill your needs: https://nhoizey.github.io/jekyll_post_files/
So I've tried looking here:
http://jekyllrb.com/docs/permalinks/
and here:
Show pages under one folder in Jekyll?
But this doesn't seem to resolve my issues.
So here is the situation:
Initially, I had all my Jekyll *.html files living in the /root folder of where I am running Jekyll, this was a bit messy, as there was over 30 *.html files, but when I did this:
jekyll build
jekyll serve
I would get the site propagating to: http://0.0.0.0:4000/
I now moved all the *.html files to a folder called /html (within the project root). When running:
jekyll build
jekyll serve
My site no longer renders at: http://0.0.0.0:4000/
But it renders at: http://0.0.0.0:4000/html/
I would like to remove the /html part of the URL, but as the above 2 links show, there was no previous question related to this.
Can anybody suggest how I can remove the /html part from my URLs?
Okay, so initially your folder structure looked like this, correct?
/_layouts/default.html
/css/whatever.css
/index.html
Now to your question:
Do you want to move the HTML files and nothing else to the html subfolder?
In other words, do you want to do this?
/_layouts/default.html
/css/whatever.css
/html/index.html
If yes, read David Jaqcuel's answer.
If not, continue reading my answer :-)
Or is it just that you don't want all your source files cluttering up your root folder?
If yes, you could move everything into the html subfolder, like this:
/html/_layouts/default.html
/html/css/whatever.css
/html/index.html
Then you need to tell Jekyll that the html folder is the root folder for the site's source files.
To do so, you need to add the following line to the config file (or create the file if it doesn't exist yet):
source: html
Important: the config file needs to be in the root folder of your project, even if you move your source files into a subfolder!!
Then all your source files are in the html subfolder, but the generated site will look like this:
/_layouts/default.html
/css/whatever.css
/index.html
In other words, the URL will still be http://0.0.0.0:4000/.
If you want to see an example, you can look at the source code of my blog:
I'm doing exactly the same there, only that the folder with the source files is called src.
By default, for pages in /html, Jekyll will generate a page like /html/page.html and so on.
I think you cannot add a permalink front matter default for a folder, you'll be obliged to set a permalink for each page you put in /html.
eg : for html/page.hmtl, you'll have to set :
---
permalink: page.html
---
This is the way without plugin. Otherwise, you can do it with a Generator plugin that will take all your pages in /html and change the all the target permalink.