Relative Links in Github pages not working still? - github

I have a Github repo where the readme.md has relative links to display images from a folder called img.
![Add Remove Programs](/img/ArcGIS_Pro_DI_LicenseCheck.jpg?raw=true "Add Remove Programs")
This displays fine at the project address.
But on the Github page, the links are broken. They are trying to reference the following URL, without the project name:
https://simongis.github.io/img/ArcGIS_Pro_DI_LicenseCheck.jpg = 404
From this answer and this blog post, I thought this issue has been resolved?
Can someone point out where I am going wrong?
I have tried playing around setting the baseurl to my project director in the _config.yml but that did not seem to make any difference.

That is exactly what baseurl solves:
Base URL
Serve the website from the given base URL
Set it with the project name and make sure you generate the links in your website including it , for example with the absolute_url filter
baseurl: /gnaf-for-arcgis
![Add Remove Programs]({{'/img/ArcGIS_Pro_DI_LicenseCheck.jpg?raw=true' | absolute_url}} "Add Remove Programs")

Related

How to add a Github repository image to its Github-pages webpage?

I have a Github repository with Github-Pages activated using theme: jekyll-theme-leap-day that is provided in the repository settings. I would like to add an image that is in my repository to the webpage that is created by Github-Pages. How do I do it?
I have tried:
[Figure 1](https://github.com/JulianChia/lowerboundSARSCOV2/blob/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png)
but this markdown format only creates a hyperlink to Figure 1 in the repository. But this outcome is not what I desire. Rather, I want to show the figure in the webpage. How do I do this?
My webpage index file is located at https://github.com/JulianChia/lowerboundSARSCOV2/blob/gh-pages/index.md
See line 17.
I read somewhere that I might need to amend the _config.yml file for Jekyll webpages. But according to my https://github.com/JulianChia/lowerboundSARSCOV2/edit/gh-pages/_config.yml file, it only contains a line theme: jekyll-theme-leap-day. There is nothing else in there that I could amend.
The webpage link is https://julianchia.github.io/lowerboundSARSCOV2/
Instead of using this as image src
https://github.com/JulianChia/lowerboundSARSCOV2/blob/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png
use this as image src
https://raw.githubusercontent.com/JulianChia/lowerboundSARSCOV2/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png
Remember you are trying to link an image to your site that is raw content so you have to use raw.githubusercontent.com instead of github.com
Or, If you prefer to use github.com to directly get the raw link you need to add ?raw=true after your link. For example:
https://github.com/JulianChia/lowerboundSARSCOV2/blob/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png?raw=true
Then it will redirect you to:
https://raw.githubusercontent.com/JulianChia/lowerboundSARSCOV2/main/1_Figures/Figure_1_SG_COVID19_%20Epidemic_trends.png
That you need to put in the src attribute of the image. It is the easiest way to get the raw link for your Github file.

GitHub Pages (jekyll blog) showed 404

I tried to build up a Jekyll blog website using GitHub pages. I could check the homepage, but the subpages (about & blogposts) showed 404.
To find out where the problem is, I opened a new repo. And I set up the basic things of a Jekyll site using jekyll new . locally and uploaded them to the Github repo. I did not change anything after this step.
And then, I used jekyll serve to run the local test, and everything went well. The layout looked nice and I could check the first blog "Welcome to Jekyll!"(built by default).
However, when I used the link of GitHub Pages to check, the layout of the homepage looked quite different, and I could not check the default blogpost "Welcome to Jekyll!", which showed me 404.
How can I fix it?
This is my repo: https://github.com/jl-xie-kcl/blog20211122
(you can check the screenshots in issue 2 https://github.com/jl-xie-kcl/blog20211122/issues/2)
Those pages do work, your links are just incorrect because your blog is not at the root of your domain — and this goes the same for the style and images not working, by the way:
The link to your about page: https://jl-xie-kcl.github.io/blog20211122/about
The link to your blog post: https://jl-xie-kcl.github.io/blog20211122/jekyll/update/2021/11/22/welcome-to-jekyll.html
In order to fix this, you will have to change the baseurl value in your _config.yml to:
baseurl: "/blog20211122"
As stated by the comment on this configuration line:
baseurl: "" # the subpath of your site, e.g. /blog

Get Image from Github repo using GraphQL [Javascript]

I want to get image from a github repository and show it in my website.
Say, I have a image in my github-repo called banner.png. I have been successful at getting the content of README.md file which is a plain text. But images are binary thus I don't know how to get them (or just a url to that image) to use in img tag. I've searched and the blob does have a commitUrl but I don't know what that is for. I've tried using as the src for img but it doesn't work. I've even tried visiting that url but it just give a 404 not found.
If your repo is public, you can use a free hosting solution such as https://www.jsdelivr.com which can serve the file from Github (https://www.jsdelivr.com/features#gh) with the right content-type. You just have to build the url according to :
https://cdn.jsdelivr.net/gh/<user>/<repo>#<branch>/path/to/file.png
A few example :
https://cdn.jsdelivr.net/gh/bertrandmartel/newhaven-oled-dk51#master/img/newhaven-dk51.jpg
https://cdn.jsdelivr.net/gh/bertrandmartel/websocket-java#master/exemples/readme_images/clientSide.png
https://cdn.jsdelivr.net/gh/bertrandmartel/fritzing-parts#master/metec-braille-line-20-cell/metec-braille-line-20-cell.svg

Jekyll problems with publishing on GitPages

I have just created my first jekyll page, trying to use github.io
What am I doing wrong, as the page seems to serve correctly on my local machine yet it does not on the GitPages.
If you want to use a github.io URL, the exact URL of your GitHub page depends on the name of your repository.
This is explained here in the GitHub Page documentation:
User, Organization, and Project Pages
If you want your website URL to be https://cstml.github.io/ (called "user page" in the docs), the repository must be named username.github.io, i.e. in your case:
https://github.com/cstml/cstml.github.io
If you want your website URL to be https://cstml.github.io/some-sub-dir (called "project page" in the docs), the repository must be named some-sub-dir, i.e. in your case:
https://github.com/cstml/some-sub-dir
In my search for trying to solve it I have changed the name of the repository to my cstml.github.io GitHub-pages and that seems to have fixed it. Don't really understand why that is at the moment but it seems to be working.

Can not host a webpage on Github

I have a javascript and html snake game and I want to host it on github I do All the steps and make a gh-pages But I get this error 404 File not found ?when I search Username.github.io/repository-name
Any idea why and how I can fix it? Should I wait for github email After I do the commands??
Most web servers have a "default" page, e.g. index.html, that will be shown when the user doesn't request a particular page. GitHub Pages is no different.
Your repository contains a single file called snakeGame.html, which works just fine if you request it. Unfortunately, GitHub Pages doesn't know that this page should be shown by default. As far as it knows that file has no special meaning.
To get your page to show up at http://peggykh.github.io/Snake/ instead of http://peggykh.github.io/Snake/snakeGame.html, you should rename your file to index.html.