Issue trying to switch index.html page

Help
1

Hi there,

I am new to Jekyll and I am on my way of creating a website consisting of a blog and a portfolio showing my personal projects.

I am running into the issue that I have two buttons on the main page: blog and projects. Quite minimal and simple setup, withing my working tree I have an index.html that take you to the posts (iterate throw the post folder) and another html file called projects which iterate throw another folder displaying project name and description and so on. So simple.

Well, when I click the blog button, it takes me to the post page BUT clicking the other does not take me anywhere. I tried everything and actually I change the index.html to call the projects folder, and it works and display what I want but then I can’t show the post page.

I can give more insights if need it. I have no idea what to try now.

Best,
Locango.

2

So is your problem when you click on an item in the menu that you go to a 404 page? It sounds like your navbar that points to your page is incorrect.

If you have markdown .md pages remember to add frontmatter to turn them into HTML

about.md

---
title: About
---

Page content goes here

Can you share a repo link?

Can you share your navbar code?
Such as a for loop to build up the navbar of pages.

If you are using a sub path on github pages
E.g. user.github.io/project/
Remember to use relative_url for building up your URLs in your href values.

3

Your navbar should look something like this

4

The folder and filenames are important to.

You might want to do this

_projects/
  index.md
  a.md
  b.md
index.md

And then edit your config

include:
  - _projects

Otherwise Jekyll won’t see it.

You might use a Collection instead. see the Jekyll docs for that. Then you can iterate over site.collections.projects (no underscore) to build up a list of projects on the project index page. And then maybe have projects.md at the root of the project.

I’d recommend making a simple site using the Jekyll tutorial in the docs so you have an idea of how sites are structured and how to link to pages. Then come back to your project with more understanding.

5

Hi Michael,

Thank you so much for yours insights! Actually what was happening it was a problem of linking because somehow I was generating a project hash location for the blog (localhost/#blog) but when I was creating the one for projects It was doing nothing because the page localhost/#projects was not existing, I just linked with the html file. I don’t understand why exactly right now.

Now I am dealing with the css applied for when I go inside the blog which is working but when clicking on the title it goes to the post file but with no css.

Thanks !

6

Regarding the CSS, you have to look at your layouts and how to use them.

If you want CSS to load on all pages then put your CSS link or style tag in your default.html layout

And make sure that posts.html layout and page.html layout exist and use the default.html layout. This is a common approach and most themes will do it.

Your default.html layout might use a head.html includes file which contains CSS and JS.

Also remember that you can use a layout file and an includes file which is directly on your repo or that belongs to the theme.

7

It sounds like a literal hash symbol is in your repo. or the theme, which means you have to take the theme’s file and duplicate in your repo under the same path and then edit as you see fit.