I have a site running locally with Jekyll and deployed to GitHub Pages without any issues.
The issue I have is with GitHub pages and local permalinks.
https://username.github.io/my-repositary
and localhost is going to the root
http://localhost:4000/
So adding a page About in the root and linking to ends up looking like this
https://username.github.io/about
http://localhost:4000/about
Rather than the desired outcome
https://username.github.io/my-repositary/about
http://localhost:4000/about
Jekyll allows you to specify a subpath for the page you are generating via the baseurl option in the _config.yml file. In this case, yours should add this line to it:
baseurl: /my-repositary
Related
I'm a total newbie when it comes to Jekyll, and have encountered a big problem. I'm probably doing something wrong or missing something, but what?
I find it very confusing trying to install the "Agency Jekyll Theme" which is the first theme I'm trying out. Mostly because there are several ways to do it, the commands don't add up and there is a lot of "you can do this" embedded into what you actually have to do to install it.
These are the guides I've been following:
https://jekyllrb.com/docs/step-by-step/01-setup/
https://www.rubydoc.info/gems/jekyll-agency/1.2.0
http://jekyllthemes.org/themes/agency/
Basically, I've tried all the 3 possible ways to install it without success.
I'm running on Windows.
My problem:
jekyll serve (ran in my site folder) creates a _site folder and content in the subfolders css, img and js. Nothing else is created, not index.html, and other files needed directly under _site folder.
In my site root folder, there are only _config.yml and Gemfile, after completing the initial steps.
There seems to be a problem with actually downloading the full theme into my root folder. When I manually download the agency-jekyll-theme-starter-master.zip and extract the entire content in my root site folder, there is index.html, _data folder, etc. However, in the assets folder, there is only an img folder.
As a result, when I open http://localhost:4000/agency-jekyll-theme-starter/ in a browser there is only a directory listing with the folder "assets".
Where do the css folder and its content come from that generates under _site?
My workaround:
I run jekyll build so that the site in its entirety is placed under _site folder. However, with this process, the whole point of using Jekyll is lost because I have to edit the generated HTML files, CSS files, etc. To change simple stuff like renaming the page/navigation "Services" to another word I have to go through the HTML file and replace all occurrences
My successful attempt to reproduce your issue:
I tried this method from http://jekyllthemes.org/themes/agency/
Using the Starter Template
This is the fastest and easiest way to get up and running on GitHub Pages. Simply generate your own repository by clicking here, then replace the sample content with your own and configure for your needs.
The starter template (that is also linked on the page above) allowed me to start a code space and commit the repo content into my new branch.
I could reproduce your problem, there were no styles when running jekyll serve.
The reason for the issue:
The problem is the baseurl in the _config.yml file. It points to a relative path that does not exist in your repository. Your baseurl / path is "", because you run your server from the root folder, most probably both locally and later remotely using GitHub pages.
The solution for the issue:
In the _config.yml file in your repo, change this one line
from
baseurl: "/agency-jekyll-theme-starter" # the subpath of your site, e.g. /blog
to
baseurl: "" # the subpath of your site, e.g. /blog
Check out https://github.com/cadamini/jekyll-agency-test if you like.
I hope this was understandable and helpful and that you can solve your issue with these instructions. Don't hesitate to comment for further clarification.
I recently revived my old Jekyll project started with Jekyll 3.x (now using Jekyll 4.2 and I forgot a lot). The generated site is OK if browsed with jekyll serve command, but if later I manually enter _site folder and click index.html the site ignores css rules and links are broken.
This makes me nervous how to deploy the site. What I'm doing wrong?
Your site is served from a development web server when you run jekyll serve. I'm assuming by click index.html, you mean you are opening the file in your web browser - this won't work well with the absolute URLs Jekyll creates.
You can see the difference in the URL bar: one will say http:// and the other will be file://, a URL like /css/main.css will likely only work through the web server (i.e. jekyll serve).
Assuming you are deploying the site to a web server, and it works with jekyll serve, I'd guess it's fine. I can't be sure, but in any case, You should probably back up what's on the server currently though so you can restore it.
When I am developing my website locally (jekyll serve --watch), the HTML files in the _site dir have http://localhost:4000 URL. However, when I deploy the site to firebase, they remain the same instead of switching to the relative domain URL. My domain url is http://blogprime.com.
So what I want is ... when I am developing the site locally, every link (CSS, JS, fonts, post link, pages ) have https://localhost:4000/ ... but when I use the jekyll serve it should change to my domain name that is https://blogprime.com/ followed by the relative link to CSS, JS, fonts and other files.
Update: I just noticed the date this question was posted!
You need not change links in production and development. You can conveniently set the "url" param in config.yml.
This does two things,
when you do a jekyll serve and serve the site locally then site.url is set to localhost:4000
when you do a jekyll build site.url is replaced by whatever domain name you set in the config.
Post this you can deploy the _site to the root of your server where your domain points to.
On my computer, I access my test webpage on URL http://127.0.0.1:4000. On server, it will be on GitHub pages, that means https://username.github.io/repo-name/.
In the _config.yml I see following relevant settings:
# Uncomment if you are planning to run the blog in a subdirectory
# Note - if you enable this, and attempt to view your site locally you have to use the baseurl in your local path.
# Example, you must use http://localhost:4000/path/to/blog
#baseurl: /path/to/blog
baseurl:
# The URL of your actual domain. This will be used to make absolute links in the RSS feed.
url: http://yourdomain.com/
So for GitHub server I need it to be:
baseurl: /repo-name/
url: https://username.github.io/
But on localhost, it must be:
baseurl:
url: http://127.0.0.1:4000
These settings are necessary because without them, I will get 404 errors for resources that are using relative paths:
<script src="js/ghapi.js"></script>
"NetworkError: 404 Not Found - http://127.0.0.1:4000/download/js/ghapi.js"
The path should be http://127.0.0.1:4000/js/ghapi.js but since the page was /download it was added to relative URL of the script file.
I need to deal with this issue, how do I do that?
The best solution was to have two config files. The additional one, debug.yml, overrides some settings from the basic one. Both setting files can be loaded using this command:
jekyll serve --config _config.yml,debug.yml
The debug file can contain:
name: MySite [DEBUG MODE]
debug: true
url: http://127.0.0.1:4000
The advantage here is that no setting files need to be changed, you just use different command to run jekyll.
For me the best option is having in config.yml the baseurl used in Github pages and when you launch your site locally, override this value with an empty one:
bundle exec jekyll serve --baseurl=
That way, the site will work on localhost and in ghpages.
you can add a branch and change url line in config.yml
url: http://127.0.0.1:4000
I'm pretty sure it's not possible but does anyone know of a configuration that can localize the exported files in Jekyll so that the _site content can run independent of a web host?
I want to use Jekyll to develop a site, and deliver the contents of the _site folder for hosting, but I will not have the hosting information ahead of time. So I would like to be able to run the index.html file in the _site folder directly from the Desktop and have the site work properly. That way I can deliver the files and the site will run using relative paths/links regardless of where the files end up being hosted.
This possible but you need to know where your generated site will be located on the filesystem. This, because of the relative links pointing to resources (js, css, images).
For example a site generated at /home/user/www/_site, index page will be serve in your brower at file:///home/user/www/_site/index.html, so you'll have to set baseurl in _config.yml to baseurl: /home/user/www/_site in order to have you site working.
On windows it can be baseurl: /C:/Users/New/www/_site