Issue w/ GitHub Pages & local host

Hi,

I successfully deployed my Jekyll site on GitHub (GH) pages by adding the GH repo name to the “baseurl” setting in the _config.yml file.

The issues I’m running into are:

Local host not serving - after adding the GH repo name to baseurl config setting, the repo name is getting appended to the local host (e.g. localhost:4000[GH-repo-name])and not serving after running command jekyll serve. When I remove the GH repo name from the baseurl config setting, the local host goes back to normal and works fine after running jekyll serve.

Media assets not showing on GH pages hosted site - in order to get my site to publish on GH pages I have added the GH repo name to the baseurl config setting. However, after doing this I noticed that my media files like images and favicon are not showing up, in their place is a broken link placeholder image.

Can anyone help me figure out how to 1) get my site to serve to local host and GH pages without having to change the baseurl everytime and 2) how to get my media assets to show up on the GH pages hosted site?

Thanks so much,
Adam

It’s hard to see what’s going on without file samples or a repo.

Set your base URL with a forward slash at the start not end.

Run Jekyll serve.

Go to the URL including forward slash.

For me

http://localhost:4000/jekyll-blog-demo/

Try setup my project locally or using jekyll new to make a new site so you have a working point.

1 Like

As you have observed.

in HTML, that this would break on a subpath repo.

/styles.css

But this approach would work

/jekyll-blog-demo/styles.css

This is achieved with the following.

When you have baseurl set, you can use it in your site so assets and other links are correct.

Hacky way

href="{{ baseurl }}/styles.css" 

More elegant way.

href="{{ '/styles.css' | relative_url }}" 

If you file is style.css or in assets/styles.css , you won’t know until you view the site.

An even better way is to use the link tag to get the path to a file and it will give you an error if the path is invalid so you can fix it. And so bad code is not deployed.

href="{{ site.baseurl }}{% link styles.css %}" 

Note lack of quotes on argument for link.

Unfortunately you need the baseurl approach as relative URL doesn’t work with link.

For Jekyll 4 (not standard on GH pages) you can simply do this and will add the subpath for you.

href="{% link styles.css %}" 

For dynamic values, pulled from for loop or frontmatter or something.

href="{{ page.url | relative_url }}" 

This worked beautifully! Thank you :slight_smile:

1 Like

I added the path manually and it worked. I’m new to web development and programming so I’m still working out your more advanced solution. Will report back. Thanks again.

Great. Yeah I wanted to start with the easy to understand solutions and then move up to more elegant and advanced solutions when you are ready.

1 Like