How can I get category page hyperlinks of my Jekyll website hosted on GitHub working? - jekyll

For a Jeykll website hosted on GitHub I created a custom solution (no Jeykll plugin) to display all post links of a category on a page *. I use the setup of GitHub pages for local Jekyll builds and build with bundle exec jekyll serve locally. If visit http://127.0.0.1:4000 and push one of the hyper-link buttons Embedded, Hardware or Software in the left side-bar below Pattern Categories the post links are shown like expected.
However if I visit the website hosted on GitHub I get an "404 File not found" error. From the past I can remember that this could relate to a different handling of Jekylls permalinks in local and GitHub Pages builds. But I cannot remember in detail.
It would be great if someone could help me out.
* Sitenote: Right now instead of listing only the post links for a single category the post links of all categories are listed section wise. But that does not matter w.r.t. to this question.

The problem is that the website isn't located at the root level, so you need to use in _config.yml the base url:
baseurl: /design-pattern-references
Then make use of that setting generating full paths, e.g.: in _layouts/index.html
{{ post.title }}

Related

Website built with jekyll displays differently from local when push the changes to github

I am using a jekyll template to build my website. I made all the changes locally and it runs all smoothly. However, when I push all the changes to github and open the github.io link, the front page is displayed differently. I am wondering what the possible problem is?
The difference is specifically the way that the front page of the website is displayed. Locally, it is supposed to show all the posts with "Page 1 out of 1". But on the github host it does not.
This is the github repository: https://github.com/BiostatisticsPodcast/BiostatisticsPodcast.github.io
Thank you guys in advance!
I tried to edit the config.yml file from scratch and it still does not show. I suspect the problem is in index.html but I cannot figure it out. :(
You publish your page from a branch. Under the hood, this uses the jekyll-build-pages action, with fixed versions for Jekyll and its dependencies. On top of that, the number of plugins is limited to a short list, which does not include the jekyll-archives plugin your theme requires, as the corresponding line in the config file indicates:
- jekyll-archives # Sorry, not GitHub pages friendly!
The solution is to switch to publishing with a GitHub Actions workflow. You can use the Jekyll starter workflow; follow the instructions here to set it up.

how to configure jekyll with netlify cms to edit & create pages

I have a simple jekyll site and am trying to get netlify cms to work as the editor for the pages aswell as the posts.
If I tryt o move the pages into a pages folder in the the custom collections folder then it doesn't seem to build them unless they have an .md extension but the pages have plenty fo custom html in them and using .md appears to render the html on the page as text not html.
If I leave the pages in the root then netlify cms doesn't pick them up however I configure it.
There are 3 main kinds of page, Home page, a second level gateway type page, content pages
and then blog posts.
How should I configure this so that netlify can edit my pages and users can create new pages?
Site is here:
https://github.com/tofuwarrior/sites-clearspringacupuncture
Thanks.
Netlify CMS is a great system. However, if you want a WordPress-like experience that is also very forgiving for the developer, I recommend CloudCannon. This is a paid CMS, but it supports visual editing, which means any static page with <div class='editable'></div> can be edited within their system. It also supports image resizing. Creating new pages in CloudCannon is as simple as cloning old ones and renaming them. It is absolutely worth checking out.
Back to your question... It seems like you wrote 'page' instead of 'pages' in your config.yml file. Here is a working config file for Netlify, in which you can see that the correct name is 'pages'.
PS. I noticed you have a 'customcollections' folder. This seems odd to me. Aren't all collections custom collections in Jekyll?

jekyll won't render on github-pages of project site

I want to set up 2 different jekyll sites:
https://github.com/Caruso33/caruso33.github.io for my front page to the redirected domain leinss.eu and
https://github.com/Caruso33/traveltobi.de for blog related stuff, to the subdomain blog.leinss.eu (traveltobi.de also points to that).
The user page is rendered all fine, but the project site (traveltobi.de) doesn't work. I set the gh-pages settings to the master/docs branch and put all jekyll related files in this folder github.com/Caruso33/traveltobi.de/docs. However, I only can see the basic HTML page.
Is there a wrong setup in the _config.yml?
CNAME is showed as it should.
I don't know what configuration to change properly.

Why site.baseurl doesn't work on Jekyll?

i have been trying to create jekyll site and host on git-pages. Localy everything works fine. But on github-pages works only first pages and 10 newest blog post.
But after going to any of other pages like "Blogas" or "Straipniai" every link starts with 'localhost:4000' and naturaly breaks css, javascript...
And i am not sure where is problem, because everything is same even if i make change in /_includes/header.html site.url to site.baseurl.
Here is git-hub
And site
I think the problem is that you somehow have both a .md and an .html version of the same pages. The .html version you built locally and GH is preferring it. it has localhost in the urls so it won't work. Try deleting the .html files in those sub folders and see what happens. For example, delete the index.html file from invisibleghostt.github.io/blogas/ and see if that page is fixed.
No idea how you got those files in there, they should not be there.
Look, there are a few things you'd better fix on your _config.yml:
url: "http://codas.lt" # add the site url
gems: # remove `jekyll` from gems
- jekyll-sitemap
- jekyll-gist
- octopress
include: [".htaccess"] # remove this line (GitHub Pages does not support .htaccess)
The other thing is, you'll need to remove all the folders from the folder _posts, as explained here:
If you organized your categories as
/_posts/code/2008-12-24-closures.md, you will need to restructure your
directories to put the categories above the _posts directories, as
follows: /code/_posts/2008-12-24-closures.md.
You are probably working locally with a Jekyll version which diverges from GitHub Pages' (currently is Jekyll 3.0.3). That's why your site works locally and doesn't work there. To avoid that, build Jekyll with Bundler (a dependency manager). On this answer you can see how to do that, step-by-step.
Hope to have helped! :)
Note: If you get stuck in how to adapt your theme to work with GitHub Pages, you can try GitLab Pages, as you can easily set the Jekyll version you want to use to build your site. For example, this project builds the site with Jekyll 2.5.3.

Why is just the HTML showing after I push my changes from Jekyll to Github Pages?

I am creating a blog on Jekyll for the first time and I am at the point where I'm trying to deploy what I have so far to github pages. When I serve the site and view it locally, it looks fine - so I thought that all I had to do was push all of the files to a gh-pages branch. Now that I have done this, all that is showing is the HTML.
To troubleshoot, I downloaded just the template files and pushed those to a Github page to see if the issue had to do with how I was editing the CSS, but when I did that I got the same results.
I came across an article that was specifically about how to use github pages to store a jekyll site, and it said to remove the slash before the css folder in the linked stylesheets on the HTML if your page isn't styled correctly. After reading that I thought that the slash was for sure the issue, but after removing the slash... I got the same result.
I have been trying for hours and I feel like its probably something very simple(such as the slash).
Here is the repo:
https://github.com/pacalabre/blog-site/tree/gh-pages
Here is the output:
http://pacalabre.github.io/blog-site/
Thank you in advance for any answers!
You need to add/edit:
baseurl: /blog-site
to the config file. Note there is no trailing slash. 'blog-site' is the name of your project, the project name becomes a sub directory that serves your site. Without the baseurl setting, your relative urls are trying to fetch things from http://pacalabre.github.io/ when they are really at http://pacalabre.github.io/blog-site/.
GH is serving your site as a subfolder to the domain and your references are not taking that into account.
Once you add the baseurl setting, you then need to add {{site.baseurl}} in front of your assets like images, css and js.
Also, once you do the baseurl setting, when you serve locally it will not be quite correct, you will need to add the /blog-site to the end of the localhost url for it to work properly.
You also should try using the dev tools inspector in Chrome to help you troubleshoot, it will clearly tell you right now that it cannot load all your js files or images, and it will show where it is trying to load them from.
Look, there's something wrong with your site/repo.
I didn't find your _config.yml at the site root ( gh-pages branch). It should be there.
There's a binary file there (probably Mac's file if I'm not mistaken). It shouldn't be there.
There are both Jekyll's folders (_posts, _drafts, _layouts, etc) and _site folder there. You need to choose. Or you upload the _site content (not the folder itself) or you upload the Jekyll project. Usually you upload just Jekyll folders and GH build the site for you, unless you use some plugins which are not allowed by GitHub. In this case, you upload just the _site content, which is the compiled site (html, CSS, js only).
On the previous answer, you were instructed to add a baseurl to your site configuration. It's the best approach, but if your template uses just url and doesn't even mention baseurl, the best way is adding the project name to the end of the url, not searching for every link to call {{ site.baseurl }} via liquid. So, instead of giving yourself all this trouble, better do like that in your _config.yml:
url: http://username.github.io/projectname
If you indeed go for setting up the baseurl, you can view your site locally via localhost:4000 by adding this flag when serving Jekyll: --baseurl "". So, jekyll serve --watch --baseurl "". This means like "Jekyll, ignore the baseurl set in the config". Got it?
Serving Jekyll with bundler is the right way to do that, specially when deploying to GH Pages. But this is another story, I can add a comment later if you're interested.
Suggestions. Read a little more about how Jekyll works. Also look for .gitignore so you won't upload to GH anything unnecessary (like that binary file).
After that, if your site doesn't build or display correctly, let me know and I'll help you out if you want.
Hope to have helped!