Why are all images broken on my Github Pages? - image

I'm a new user of Git/Github and I'm traying to use Gitghub Pages for my project but for some reason the images are all broken. I was looking for solution but I did find no one with same issue :(
Github Pages: https://dannotfound.github.io/Alessandra/
Github Repository: https://github.com/dannotfound/Alessandra
Someone knows why is it happening or how to fix it?

Github Pages uses Jekyll and Jekyll will ignore files and directories with underscores. This allows you to have files and directories within your repository yet are not exposed via the web server. Such as _config.yml and _includes/.
The fix is to rename _img to img and change your links.

Related

Github pages jekyll images not loading

I'm trying to get my personal blog up and running on github pages, and for some reason I can't get any of the pictures to display on Github, even though it works locally.
Website: https://ryanstull.github.io/
Code: https://github.com/ryanstull/ryanstull.github.io
I tried suggestions for other similar questions, such as double checking capitalization and moving the images out of the assets folder into their own folder, but neither of those seems to do anything.
When I go the a url where I'm expecting a picture to be, https://ryanstull.github.io/images/posts/classhierarchy.png for example. I just get this error message, about the image containing errors, even though it works locally.
Any advice would be much appreciated.
So it turns out the problem was github pages and git LFS don't work together, and I was storing my pictures with git LFS.
https://zhouchenzc0824.github.io/2017/05/GitHub-pages-incompatibility-with-Git-LFS/
I was able to fix it by using a hard-coded link to the LFS's binary as suggested by this comment https://github.com/git-lfs/git-lfs/issues/1342#issuecomment-334317440
For example, the link that I used for the picture that I posted in the question is https://media.githubusercontent.com/media/ryanstull/ryanstull.github.io/master/images/posts/classhierarchy.png?raw=true

Magento 1.9 Site onto Github

This is probably a really stupid question. Is there a way to get a magento 1.9 site which is hosted on a godaddy server (idk why they would do such a thing), into a github so that these people can develop properly? Im not too family with a cms on a github. What happens if they update content within the cms by logging into it? etc. If anyone has any sort of resources I can use, i can't seem to find any. More of an application developer myself
Short answer: yes. There's a good gist explaining how to use git to manage a live site.
Longer answer: Yes. You'll need to init a repo on the site as it is, i.e. your public_html or htdocs directory. You can the push the content of this repo into a bare repo on Github, and manage sharing/access to the repo therein. After your devs have made changes and you're ready to put them into production, you'd git pull from the github site to bring over the changes. There's a LOT to git, and it's not simple, but there are good resources out there available by googling.
What happens if they update content within the cms by logging into it?
CMS content lives within the database. That content doesn't get pushed into github, unless you make dumps of the database that you keep in the repo. BAD IDEA!

jekyll tag plugin works offline but not on github pages

There might seem to be other dupes like this, but this SO post is the closest with a hacky solution.
I got a theme that uses the tag plugin from here : http://charliepark.org/tags-in-jekyll/ Here is my site repo on github. It's hosted here : http://www.gideondsouza.com
Tags don't work online but work offline. On my local machine I see a _/site/tag/.. with folders for each tag. But this tag folder isn't generated on github? In fact I don't even see a _site folder, so maybe my understanding is off. Perhaps I need to install the github-pages gem?
I could probably fix it like in the SO post mentioned earlier, but this is hacky, I will always have to remember to copy the generated tags folder into the root.
Anything I'm missing?
Github pages only support selected plugins (see documentation here).
If you want to use your plugin, you have to generate locally and to push the _site content online.

Why are these identical Jekyll sites building differently?

Here are the links for the two sites and their code repositories:
Theme site
Theme GitHub repo
My site
My GitHub repo
I downloaded the theme site's repo as a ZIP file, unzipped it, then pushed it to my GitHub repo to create my site. Why are the two sites building differently? If you look at the code blocks, you can see that the HTML is being rendered differently. Does this have something to do with the Gemfile?
Notes:
This difference still exists without the _site folder that was added in the second repo.
My site, when served locally, builds the same as the theme site on GitHub Pages
Your template uses pygments for syntax highlighting https://github.com/briennakh/briennakh.github.io/blob/8d2d6479cb203e37cbc2223838b165c5cfba48cf/_config.yml#L18
However, Github Pages has switched to Rouge https://github.com/blog/2100-github-pages-now-faster-and-simpler-with-jekyll-3-0
FWIW, they should be very compatible, Rouge emits the same output.
Looks like someone documented how they did it over here: http://idratherbewriting.com/2016/02/21/bug-with-kramdown-and-rouge-with-github-pages/

Add images to README.md on BitBucket

Can I somehow reference the image from readme.md file so that it renders when viewed in BitBucket directly from project (without hosting the image elsewhere on web) ?
UPDATE:
The issue was resolved so it's working now as it was explained in the question:
I have stored readme.md file and an image file in a BitBucket repo as follows:
readme.md
images/
scheme.jpg
I reference the image from readme.md as follows:
![Scheme](images/scheme.jpg)
Update 2016-12-14
This is fixed now, please see the resolved status of this issue: https://bitbucket.org/site/master/issues/6315/relative-urls-in-readmemd-files-only-work
You can now use
![Scheme](images/scheme.jpg)
to refer to images in your repo using relative links.
Old Answer
At the moment, this is not possible. BitBucket does not support relative links to images in markdown.
The following issue in BitBucket's issue tracker has more info on this, its current status (2015-02-27) is open: https://bitbucket.org/site/master/issue/6315/relative-urls-in-readmemd-files-only-work
The BitBucket team have indicated on the ticket that they intend to fix this "in the coming quarters" (comment from 2014-12-19: https://bitbucket.org/site/master/issue/6315/relative-urls-in-readmemd-files-only-work#comment-14400835).
The ticket contains a couple of (ugly) workarounds, using a combination of two links, where one works locally, and one on the web site (https://bitbucket.org/site/master/issue/6315/relative-urls-in-readmemd-files-only-work#comment-15852315) as well as some other possible solutions, none of which are particularly nice or reliable.
Update: please see the accepted answer as the issue is now fixed and this workaround is obsolete.
According to Altassian it's not supported so you need to use absolute URLs. You can use branch names instead of commit hash to allow the link to be updated if you change the image in later commits.
For example, here is taking the /path/to/image.jpg, from the master branch:
[Your Link Text](https://bitbucket.org/username/reponame/raw/master/path/to/image.jpg)
Don't use any spaces in image or directory names. For example:
![](images/app screens/screen 10.png)
should become
Sub-folders can be used for other md documents. Again, I recommend replacing spacing with dashed even in folders that only contain md or other files.
Not sure about this, but the starting document might need to be named README.md, and images might need to be in a top-level folder named "images" in the same directory as the README.md file.
Finally, please refresh your page when you see a broken image link. I noticed some images would load and others were not even though they were in the same format.
For more Info, please, have a look at Atlassian: Add images to a wiki page and russells-rocksauce answer in bitbucket issues forum
It's very simple
Just upload your image to the repository root, and link to the filename without any path, like so:
![your_image_name](your_image_name.png)

Resources