Nav bar not showing up on permalink Jekyll site - html

I've been toying around with a GH Pages Jekyll site. I took an HTML static site and changed the location for the stylesheet and the text/CSS.
Everything works correctly on my index.html page. However, on the other pages, the mobile/half-sized desktop navbar doesn't appear. The difference being I used a permalink to get navigate to those other pages (/categories/ instead of /categories.html).
I played around with the config file tried changing the
permalink: /:categories/:title/
to
permalink: /:categories/:title.html
Which gives the right filename, but it didn't address the navbar.
The only way I could fix the landing pages for the categories would be to change the links in the default.html. In this example the second item on the list works and the other doesn't.
<nav id="nav">
Doesn't work
Does work
</nav>
My goal is to have permalinks. So I can seamlessly navigate from the landing page to the categories and the blog posts.
This is my GitHub repository: https://github.com/Thor-DraperJr/Thor-DraperJr.github.io
Thanks for the advice!

It turns out that the css only was written to apply to www.baseurl.com/page
I changed the permalink in the _config.yml
permalink: /:title
This meant that each page and post would only show up one level past the root url.

Related

Jekyll not rendering templated page

I'm running Jekyll 4.0.0 and Bundler version 1.17.2. As this time of posting, it is the latest version of both Jekyll and Bundler.
I have a template called default, which I use to standardize the appearance of navbar, footer, and location of content being displayed.
The directory structure of my website is as follows:
_data: a folder of yml data files for listings of open source projects I worked on
_includes: a folder containing footer and navbar html files
_layouts: a folder containing liquid templated layout files. This is where "default.html" layout file is located.
_posts: a directory of blog posts that I want rendered by Jekyll
CNAME img: image files index.html credits.html
lib: a directory that hosts all of my CSS, fonts, JavaScript files
logo.ico
opensource: a folder containing layouts related to open source
What I'm having trouble with is adding the credits.html page. Using index.html as a template (since index.html renders perfectly), I have the following meta data pasted at the top of credits.html:
---
title: <my name>
layout: default
description: <my description>
---
Under that are all the HTML related to the contents section of the page. When I test my website locally and on github pages, I noticed Jekyll gives me a 404 not found error. I know this is not true because the moment I put credits.html inside another folder (ie: /credits/credits.html) the page renders fine with the url localhost:4000/credits/credits.
I do have permalink set as "pretty" for the entire static website.
Does anyone know why I can't seem to render the credits page? The index page seems to work just fine. I've tried digging through the documentation, but I can't seem to figure out what is affecting that one page.
** EDIT **
I discovered that if I go to localhost:4000/credits/, the page renders perfectly. This is definitely a permalink issue. Can someone point me in the right direction of how I can fix this issue?
I solved the issue!
The reason is because I had permalink enabled in the global configuration file "_config.yml". Inside that file, I had permalink: pretty set. This is why localhost:4000/credits/ worked but not localhost:4000/credits.html.
To resolve this issue, I removed that setting from the global config file. I also realized at the same time that permalink was not necessary for my use case.
For anyone who is in this situation but requires permalink for other sections of your website, set permalink per template file via front matter instead.

I can't get links to parent parent page to work on a Jekyll webpage

I apologize because I think I'm missing something very obvious here, but when I make sub-categories in the Jekyll hierarchy this is how I've done it so far.
My root directory being karrots_page, I'll have a structure like this
karrots_page/articles
and within the questions directory, I'll have a few markdown pages like
articles.md
happiness-is.md
boring-questions.md
fun-questions.md and boring-questions.md will have front matter like
---
layout: page
title: Happiness is?!
permalink: /happiness-is/
parent: articles
---
and the articles.md named after the directory it's in /karrots_page/articles will have a front matter like this
---
layout: page
title: articles
permalink: /articles/
has_children: true
---
and although that works, once I am within one of the article pages I can't get the link at the top to navigate back to the articles.md the main page, I just get a 404 when I click this link
The other strange thing is I have this all set up and working on another site in which there is a page that goes two levels down /karrots_notes/questions/1000-questions where every page directly nested in the /questions directory can successfully navigate back to the /questions directory with the top link, but when you go deeper down into a page in 1000-questions directory, when you click the top link to go back to the list of 1000-questions pages, it just takes you to the homepage of the site.
on top of that when I add the whole of the /questions/ directory to the site where the navigation links don't work, all of the sudden the navigation links do work for my articles directory.
I have a feeling I'm not doing something right with the markdown front matter, but I'm not sure what.

Permalink to External Site with YAML Front Matter

Is it possible to set a permalink to an external site within YAML front matter? I am currently using Jekyll, and I am not finding any information using my Google-Fu.
---
layout: full-width
title: TEST
permalink: https://somethingexternal.example
---
Can permalink break out of it's context and head to somethingexternal? I just want the TEST link to appear on the home page, but when clicked, to go to somethingexternal.example.
[edit]: What happens is that it prepends the webroot to the site, which is the expected behavior. So it ends up like:
mysite.blah/https://somethingexternal...
I just need to break out of it, so that it only goes to the external site. I don't know if permalink can do that, though.
Using permalinks for an external link won't work, permalinks aren't for that.
What you are looking for is to define a custom URL in front matter and then access it's value from the page like this:
---
othersite: http://example.com
---
visit other site

Octopress blog page not displaying posts

I'm new to Octopress. I created a custom about-me like page as the home page (source/index.md) and moved the default source/index.html to /source/blog/index.html.
In my Rakefile, I changed blog_index_dir from source to source/blog.
In source/blog/index.html I changed the reference to /archives to /blog/archives.
In source/_includes/custom/navigation.html I changed the links to Blog and Archives to /blog and /blog/archives.
I haven't deployed my site yet because I'm still working on it, but when I view it using rake watch and Pow, my posts show up in the sidebar under Recent Posts, but no posts show up in the Blog page.
The source code for my site is at https://github.com/benlindsay/blog
I forgot to change the line in _config.yml from
paginate_path: "posts/:num"
to
paginate_path: "blog/posts/:num". That fixed the problem.

Having html and wordpress on the same directory

I have a WordPress site with a couple of posts on it. To this site I need to add a few HTML pages (including index.html). I need both of them to work properly.
The home page should be the index.html page, and all its links(HTML pages).
The previous site URL's i.e. WordPress URL's should also work.
I put them together and the index.html page displays as home page, the subpages(HTML) also work fine. Although all WordPress URL's are re-directing to the index.html itself.
Is this possible? How do I make the old WordPress URL's work fine (i.e. not redirect the index.html page)?
When dealing with issues like this, I like to create page templates in Wordpress (with page names like About, Projects, etc.) And then I create a .php file using the slug title of it (so a projects page will correspond to a .php file called 'page-projects.php'
One example being I make a page called 'about', then I create 'page-about.php' in my Wordpress directory. The Wordpress Template Hierarchy will, along the way, look for a .php file called 'page-about.php'
A solution like this is great because those pages are linked through your site, so using /about or /projects will bring you to the proper pages instead of redirecting to the main page (because it redirects to your index when Wordpress can't find any other suitable template to display)