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
Related
Which of these files is the right one to insert html on my page built with jekyll?
I have:
404.html
index.html
welcome-to-jekyll.html
It seems I can edit the frontpage via 404.html, however I assumed index.html would be the correct approach.
I just want to edit the frontpage within my jekyll setup and if necessary write a post in the designated section but there are way too many auto-generated html files in my VS code folder.
I'm new to Jekyll and build a webpage using the TeXt Theme. I downloaded all files and created a local Jekyll website which runs successfully. The project folder contains the folders
_data
_includes
_layouts
_posts
_sass
_site
assets
docker
docs
screenshots
test
tools
The rest of the files in the folder are _config.yml, index.html, etc.
Now let's say I want to create a new page "Bio" that appears as an entry or name in the navigation bar at the top of the website like "about" or "archive".
I create a .md-file in the main project folder (i.e. where index.html lies) and specify in the front matter the layout - in the case of TeXt it is
layout: page
Also, in the _data folder I open the navigation.yml and append under "header" a new title called "Bio", i.e.
header:
title: Bio
url: /Bio.html
This is completely analogue to the about-page that is in the navigation bar and works properly.
But when I do it like this with Bio I get a 404 error and Jekyll is not able to find the site.
I searched all folders of the project and found that Jekyll does not create the necessary.html-file Bio.html on the basis of Bio.md. It just moves Bio.md into _site.
Hence, the url given in the navigation.yml cannot be found and I get the error. How do I get Jekyll to create the Bio.html?
If Bio.md is just copied, that means that Jekyll thinks it's a static file.
You're certainly missing a correct Front matter.
Your Bio.md should look like :
---
layout: page
title: Bio
---
## Content here
...
If problem persists, please add a repository url to help debug.
I figured out the answer myself. It is the notorious UTF-8 BOM issue with Jekyll. The file Bio.md was written in Notepad which uses BOM by default. Using ANSI instead solved the problem entirely without changing anything at the previous front matter.
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.
I have HTML pages that I put inside temp folder(Outside WEB-INF directory). I have used some images inside my HTML pages. I have put those images also in temp folder and then I created my war file. When I run that in localhost, Images are not loaded into HTML pages. It shows all the contents except Images. Then I created a folder images outside WEB-INF directory, put all image files into that and created war file. But the result was same. Can anyoe tell Where I am going wrong?
What might really help is if you can share the structure of your WAR file and also a sample html snippet that shows how you are referring to those image files. The problem maybe the way you are referring to those image files.
Let me answer this question with an example
Lets assume your war structure is as follows
webapp.war
|
|---> WEB-INF
|------|
| ----> classes
|---> index.html
|---> images
|-------|
| ----> logo.gif
The way you'd refer to the image file is as follows
If you are doing this correctly and still not able to view the image files, you need to share some more details as I mentioned above.
Hope this helps.
Good luck!
Have you checked whether the .gif file is in Uppercase or Lower case(you can get this information when you make the war file from command prompt). If the "gif" is in Uppercase in the war file and you have given it as <image background="bg.gif">, then change it to <image background="bg.GIF">. I think this is the problem you are facing.
I have two suggestions for you for serving static content without modifying the war file. The first is what I would recommended.
Setup Apache as front end proxy and use Apache to serve the static content
Copy the static content into ROOT.war under directory say static and then reference the static content as "/static/logo.gif".