chadbaldwin
commented
3 years ago Hey! This isn't technically an issue, it's just a nuance with how GitHub builds the website using Jekyll. I've got a few pointers to help with a couple different things here. I'm about to give you an info dump, so maybe sit down for this....
re: Relative paths for images
The folder structure that is in GitHub is not the same folder structure that gets created for your site.
This will be more obvious if you look at the URL of a post, for example: https://chadbaldwin.net/2021/03/14/how-to-build-a-sql-blog.html
See how the path has "2021/03/14", I don't create those folders, that's done automatically by GitHub (using Jekyll).
The original filename was "2021-03-14-how-to-build-a-sql-blog.md". It converts that markdown file into HTML, and then creates the new folders based on the date in the name. It does this for all items in your _posts folder. You can't see this in GitHub, but it's there. If you were to set up Jekyll locally on your own computer (which is a pain if you use windows) and manually build it yourself, you'd be able to navigate the _site folder, which is where it stores your built site.
So your GitHub folder structure might look something like this:
├───css
│ └───main.css
|
├───images
│ ├───myimage.png
│ └───image2.png
|
└───_posts
├───2021-10-01-First-blog-post.md
└───2021-10-20-Second-blog-post.mdBut hidden behind the scenes, the folder structure actually looks like this:
├───2021
│ └───10
│ ├───01
│ │ └───First-blog-post.html
│ └───20
│ └───Second-blog-post.html
├───css
│ └───main.css
│
└───images
├───myimage.png
└───image2.pngSo when you use a relative path like images/myimage.png in a post, you're actually looking for the path:
https://chadbaldwin.net/2021/10/01/images/myimage.png which does not exist.
To avoid this confusion, I generally use full paths, like:
/images/myimage.png (include the / at the beginning), this way it's saying to pull from the root.
re: Relative paths for other posts
As a side note, if you want to use a relative URL to refer to another blog post, then you should use this:
{% post_url 2021-10-15-Udacity-Data-Scientist-Nanodegree-Project-1 %}
When GitHub builds your website, this will get substituted with the URL for that specific post. But you still need to make it a link, this only returns the URL itself.
So, for example, I would do something like this:
[only update rows that changed]({% post_url 2020-12-30-only-update-rows-that-changed %})
That gets converted into this (which is markdown syntax for a link):
[only update rows that changed](https://chadbaldwin.net/2020/12/30/only-update-rows-that-changed.html)
Which then gets converted to an HTML link when your site is built.
re: Markdown syntax for an image
And finally, just a tip on the proper syntax for including an image via markdown.
The proper syntax is:
If you want to add additional customization, then you would do something like:
{: style="width:200px; float:right;"}
And if you want to make that image a link you need to add one more wrapper around that:
[{: style="width:200px; float:right;"}](https://google.com/)
Bonus tip
And one last tip, to make any markdown link open in a new tab, you can do this:
[Link text](https://google.com/){:target="_blank"}
PS: if you want your files to be readable in both GitHub as a markdown file, as well as on your site...then, unfortunately, you will not be able to use the link syntax that uses things like {:target="_blank"} and you will not be able to use the relative URL trick using {% post_url ... %} because GitHub does not support those, they are specific to Jekyll and the Markdown processor it uses. They won't break anything, but they will show up as regular text.
So if you do want your posts to be readable as standalone Markdown files as well, then you will have to go back to the way you've been doing it using plain ol' <img> and <a> HTML tags.
Hope this all helps!
akashicMarga
I noticed that when I include an <img> image with a full path the image displays fine. As in this example:
<img src="https://i2.wp.com/indianaiproduction.com/wp-content/uploads/2019/09/24-seaborn-heatmap-correlation.png?resize=768%2C473&ssl=1">
Source: https://indianaiproduction.com/seaborn-heatmap/
But when I do it as a relative image path (for example: <img src="images/myimage.png">) it shows up fine on the GitHub "Preview" tab but once it's deployed the image does not show up. I don't know if this is a general GitHub issue with relative paths or if it's specific to this project. Any pointers on correcting this?