Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to include images in a jekyll project hosted on github?

I'm building a blog using jekyll and hosting it on github with gh-pages. The root of my project can be see seen below:

├── LICENSE
├── README.md
├── _config.yml
├── _img
│   ├── 2016-09-09\ 14.48.20.png
│   └── 2016-09-09\ 15.25.09.png
.
.
.
├── _posts
│   ├── 2016-09-08-seven-weeks-before-applying-to-devops-job.markdown
│   └── 2016-09-09-an-hour-with-ansible.md
.
.
.
├── _site
│   ├── 2016
│   │   └── 09
│   │       ├── 08
│   │       │   └── seven-weeks-before-applying-to-devops-job.html
│   │       └── 09
│   │           └── an-hour-with-ansible.html
│   ├── LICENSE
│   ├── README.md
│   ├── about
│   │   └── index.html
│   ├── css
│   │   └── main.css
│   ├── feed.xml
│   └── index.html
├── about.md
├── css
│   └── main.scss
├── feed.xml
└── index.html

The documentation gives the following example:

Because of Jekyll’s flexibility, there are many solutions to how to do this. One common solution is to create a folder in the root of the project directory called something like assets or downloads, into which any images, downloads or other resources are placed. Then, from within any post, they can be linked to using the site’s root as the path for the asset to include. Again, this will depend on the way your site’s (sub)domain and path are configured, but here are some examples (in Markdown) of how you could do this using the site.url variable in a post.

Including an image asset in a post:

... which is shown in the screenshot below:
![My helpful screenshot]({{ site.url }}/assets/screenshot.jpg)

I've tried several different ways but non are working once I push gh-pages up:

![]({{ site.github.url }}/_img/2016-09-09 14.48.20.png)

![]({{ site.url }}/_img/2016-09-09 15.25.09.png)

I've also tried "keeping" the _img directory by putting the following in my _config.yaml

# Build settings
markdown: kramdown

keep_files: ["_img"]

But this also is not working. So how do I include images in a jeykll project hosted on github?

Thanks for your help :)

like image 245
mbigras Avatar asked Feb 07 '23 04:02

mbigras


1 Answers

Every folder beginning with an underscore won't be copied to the build destination. The most common way is to store images is to add them to a assets/img folder. If you want to use _img you have to add to your _config.yml:

include:
  - "_img"
like image 51
DirtyF Avatar answered Feb 14 '23 08:02

DirtyF