when I excuting jekyll serve css working well,
but after git push and enter sh95119.github.io doesn't apply css. Please help me. I have spent 3h solve this problem.
In _config.yml, change :
baseurl: "/jekyll-theme-prologue"
to
baseurl: ""
Related
I forked this theme and created a simple pages, modified some css files - setting fonts for specific tags or disable italic on subheadings.
It works like a charm in local. But when I commit the files and push the repo, It shows contents but the design things are gone! I mean, It shows only html contents.
This is the page on local environment:
And this is the page on the remote server..?
I can use basic tags and change some properties of tags in CSS, but I don't know about more details.. Could you please give me some kinds of guide or how to fix this problem?
Edit -- Here is my git repository:
https://github.com/soldier4443/soldier4443.github.io
In _config.yml, remove baseurl: "/blog" to read baseurl: "".
FYI- if your theme is working locally but not working remotely(OP didn't have an issue with this, though this was my mistake), make sure that the remote repository is named .github.io
More info. from the official documentation: "GitHub Pages are initially configured to live under the username.github.io subdomain, which is why repositories must be named this way even if a custom domain is being used."
source: https://jekyllrb.com/docs/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.
I would like to say that I have been looking at this problem for the past two hours, reviewing similar questions. I can not seem to find the issue, Initially I thought it was due to my baseurl and the file path for the css. Everything is styled perfectly on my local server.
I would greatly appreciate if anyone can give me some pointers. My git hub repo is https://github.com/Nappolini/nappolini-port
Many thanks.
In _config.yml set :
baseurl: /nappolini-port
url: https://nappolini.github.io/
In _layouts/default.html, call assets with
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/main.css">
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!
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.