Change theme for Jekyll static site - jekyll

I set up my User site on github-pages with the default "minima" theme - works just fine. However, I can't figure out how to change themes. Tried following these instructions to change theme to "architect":
To use the Architect theme:
Add the following to your site's _config.yml:
theme: jekyll-theme-architect
Optionally, if you'd like to preview your site on your computer, add the following to your site's Gemfile:
gem "github-pages", group: :jekyll_plugins
Seems really simple, right? But when I commit the changes and reload the page at http://username.github.io it's just a blank page.
I'm sure I'm missing something really obvious but if you can explain I would greatly appreciate it!

The theme you chose has only one layout, that is the default layout, while the minima theme has three, default, post and page.
Just change the layouts used by your posts and pages to default in their frontmatter or globally in the configuration.

you can't change the theme of an active jekyll site. you need to install a new theme when you create the site. it's kind of annoying, but if you're just getting started with the site, installing a new theme shouldn't be too difficult.

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.

Customize Jekyll remote theme for GitHub Pages

I'm new to using Jekyll theme for GitHub page. I was able to successfully customize a local theme following Customizing your Jekyll theme's CSS but I couldn't find any documentation about what to do if the theme is remote.
Here is what I tried. First, I started with a clean GitHub page and followed step 4 in Adding a Jekyll theme in your site's _config.yml file to opt-in my theme that's forked from GitHub's default theme
_config.yml:
github: [metadata]
encoding: UTF-8
kramdown:
input: GFM
hard_wrap: false
future: true
jailed: false
- theme: jekyll-theme-primer
+ remote_theme: chuanqisun/primer
gfm_quirks: paragraph_end
At this point, everything just works out-of-the-box. But when I add
---
---
#import "{{ site.theme }}";
in /assets/css/style.scss, GitHub Page complaints that site.theme doesn't exist.
So I also tried
---
---
#import "{{ site.remote_theme }}";
but the import still failed.
Does anyone know if it is possible to customize a remote theme? I know that I can just make customization in my forked repository but some customization are specific to one site and I want to store that in my site's repo. This way I can share the theme with multiple sites without enforcing one site's customization to the rest of the sites. Thanks!
For anyone in a similar situation, here is what worked for me, using the Minimal mistakes theme as a remote theme.
It has no assets/css/style.scss, but an assets/css/main.scss that then imports all the partial files under _sass. Trying to import main or empty brackets as the official docs suggest, doesn't work. The way to go is to copy the main theme's file and then customize it.
So in this case I created a local copy of assets/css/main.scss and appended the desired css changes. That was enough. If a theme doesn't have one central file tying everything together, you might need to copy more files, but that's it.

Jekyll default installation doesn't have _layouts directory

So I followed the guide on the Jekyll website by installing and running Jekyll (sure I don't have to post this here). And the site is up and running perfectly but for some reason I don't see the _layouts directory that's supposed to be there. In the pages I can see that it references some layouts i.e:
index.html
---
layout: default
---
<div class="home">
about.md
---
layout: page
title: About
permalink: /about/
---
This is the base Jekyll theme.
But when you look at the directory stucture of the project:
No layouts folder.. what's up with that? Everything works though. And it looks perfectly fine when run on localhost.
You must be running the recent Jekyll version 3.2, which introduces Gem based themes (from https://jekyllrb.com/docs/themes/):
Jekyll themes package layouts, includes, and stylesheets in a way that can be overridden by your site’s content.
The theme is set in _config.yml:
theme: minima
Initial files that were previously in _layouts, _includes, and _sass are now packaged with the theme.
Basically Jekyll wants you to use themes, so you can't see _layouts, _includes, _sass, _assets anymore.
To use previous behaviour simply copy from the gemfile:
open $(bundle show minima)
Copy the 4 folders into your jekyll directory
If you want the older style of Jekyll website directory which includes all the 4 folders then you can use this command :
jekyll new my-new-website-name --blank
I have done the same while creating a personal site.

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.

Jekyll 2.0 Issues in Grunt/Yeoman

I've been using Jekyll 2.0 directly from the command line for the last few days. I've put all my page files into a '/pages' folder so it looks like this:
/pages
- index.html
- about.html
- contact.html
In the front matter of each page I set the permalink like this:
permalink: /about/
So when Jekyll compiles the site, I'm able to navigate successfully to localhost:8888/about/ it's been working really well.
The Grunt/Yeoman problem:
I've picked up the generator-jekyllrb for Yeoman today because I want Grunt to manage everything (live reloading etc). I set it up, everything is working fine... but Jekyll is no longer generating the folders according to the permalink.
For example, my "about.html" page inside /pages, is not having an "/about" folder generated in the root like it did when using Jekyll directly. So I can only access the page through: localhost:8888/pages/about/. Which is strange.
Here's my Gruntfile.js generated from Yeoman
I don't know a whole great deal about this stuff. I'm very new to Grunt and the CL, but this has really stumped me. If anyone could offer any advice or point me in the right direction I'd really appreciate it.
I ended up adding the following to my _config.yml:
relative_permalinks: false
which fixed the problem. I think grunt-jekyllrb must be a version behind or something, because absolute permalinks are defaults now in the latest Jekyll.