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
ordownloads
, 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 thesite.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 :)
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"
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With