Local `jekyll serve` doesn't match Github - jekyll

When I run jekyll serve locally, I get the following ouput
local site
Then when I push to Github and host on Github pages, the sidebar links don't work the same way
github pages site
I'm running jekyll 3.1.1 (latest version) while Github Pages depends on 3.0.3. Do I need to uninstall jekyll and install the older version? Or is there something I can do to make my local and Github pages match?
The repo on github is available at (sorry can only post 2 links)
github.com/samarthbhaskar/samarthbhaskar.github.io

With help from Github, I was able to solve this.
There was a whitespace issue in the front matter of my index.md file for the page I was trying to create. I erased and retyped the front matter as:
---
layout: page
title: Movie Reviews
---
... and that did the trick! Hope this answer helps someone else trying to solve the same issue. Now to figure out what might be going on with my Sublime Text 3 settings to cause white space issues.

You need to serve Jekyll with bundler, so it will reproduce the same environment as GitHub Pages does.
Follow the steps I described on this answer
And you should be ok.
Let me know how it goes for you ok?
Hope to have helped!

Additionally, you could force your push to the remote repo on github with a git command in order to override any inconsistencies between the local and remote repositories. But glad this worked out for you!
git push -f

Related

Jekyll custom hook in `_plugins` folder is not executed

Before we start, I do know custom hooks are not executed by Github pages, I'm suffering this issue locally(bundle exec jekyll serve).
I manage my own Github pages, and I found a great post about Jekyll hook that I wanted to try it out by myself.
I followed the instruction, first created _plugins folder at the root of my repo,
and created my own *.rb file.
But my hook is not executed at all!
I even downloaded the source file of the example blog, but I couldn't notice any difference that might cause this issue.
FYI, local serve of the example blog worked well with all the hooks executed.
If you can help me on this issue, it would be very much appreciated. Here is the WiP commit of my blog.
Thank you.

How can I fix 404 error importing css on GitHub Pages?

I currently have the following Git Repository:
https://github.com/SebastianGode/ansible-collection-cloud/tree/gh-pages
And the GitHub Page link:
https://sebastiangode.github.io/ansible-collection-cloud/
The problem is that GitHub Pages will only solve the index.html and will throw an 404 for all required css and image stuff:
As the documentation is getting automatically generated by a travis-ci pipeline it's probably impossible to change paths, but as it works when hosted it locally it also should work on GitHub pages.
Is there any solution to this problem?
I fixed it.
GitHub has Jekyll running behind it which will mess up special paths (here the underscore paths). You can disable jekyll by just creating a .nojekyll file in the root directory of the branch. If you use travis-CI for something like that and run a tox script just call the command touch {toxinidir}/.nojekyll
This will result in a working website for me.

How should I set up my repository using GitHub pages so I can see all the files that the site uses?

Can I set up my repository so that I can see all the files (html and css) that my site uses in the repository while still using the GitHub page generator?
I want to use github.com to maintain my multi page site, without installing Jekyll locally.
After you create your github repo go to the settings and select the option to host from the docs directory I found this to be the best method to host my websites that way you done have to mess with different branches unless your in to that thing.
It is not required for you to use Jekyll I personally have never used it. It is to wordpress esq.
What you can use instead of Jekyll is a static site generator or spa to precompile your website content add the static content to the doc directory and push your repo.
Github will generate a url for your that will also be available in your settings. You can also add custom domains.
I recomd using a static site generator performance and seo is the reason.
If you create a Jekyll website on your local machine in /some/path/website/, initialise your Git repository there:
cd /some/path/website/
git init
Then you can push this to your remote Github repository and all of your files will added and viewable.
I don't think you can initialise a Jekyll website in your remote repository though.
From their documentation:
Jekyll's simplified build process with GitHub Pages is one of the biggest advantages of using Jekyll instead of other static site generators. GitHub Pages manages your site's build process with a single push to your site's publishing branch. This is Jekyll's build process for managing your site:
Push file changes to your pages publishing branch (my emphasis)
GitHub Pages publishes your site.
It turned out that the reason I was not seeing many files was that there was only the index.html that I created using the tutorial at GitHub Pages
The reason I thought there must have been other files was that the theme I picked looked a whole lot better than my helloworld.html

github page doesn't exist (the simple jekyll configuration)

I have the simplest (default jekyll) page on github
https://github.com/pejot/pejot.github.io
When I run locally
bundle exec jekyll serve
it works fine.
but on the github domain
pejot.github.io
it says: "There isn't a GitHub Page here."
what can be a problem that it works locally but not on github? Please take into account that page is basically empty. Is the default one generated by jekyll.
I get it!
github takes gh-pages branch for project page and master for the user one.

Considering moving from WordPress to Jekyll: What goes where?

I'm trying to figure out what would be required to move my current blog from WordPress to Jekyll, as MySQL is really too complex for my taste at this point. I've read the docs on GitHub about Configuration, Usage etc, but Installation is less clear.
I assume that since posts, layouts and other files are kept locally, that the required Ruby gems are as well? At the same time, I've seen others talk about installing to a web host (Dreamhost in my case), which would be ideal, but I'm still not sure.
Also, I'm using Mercurial instead of Git for SCM, so I would probably need to make sure I can use something like Hg-Git to help deploy things. Any help would be greatly appreciated!
I think your question can be answered from two standpoints: 1) How to get Jekyll up and running and 2) How to get your current Wordpress content into jekyll. Here's answers to get you started with each in turn.
Part 1 - Getting Jekyll Up and Running
The first thing to realize is that Jekyll is designed to generate a set of static HTML files that can be served from basically any web server without the need for PHP, Ruby, Perl or any other dynamic server side processing.
Of course, Jekyll uses Ruby, so you have to have that running wherever you do the file generation. While that could be on the same server that serves the file the important point is that it doesn't have to be. For example, all of these are valid workflows for posting with Jekyll:
Create raw files on your personal machine, run Jekyll there to generate the static HTML files and then transfer them to your remote web server for the world to see.
Run Jekyll directly on your server doing all editing and creation of raw files there to have Jekyll process them for serving by the web server software on that machine.
Run Jekyll on your server machine, but edit the raw files on your local machine and push them to the server when you are ready to post. The Jekyll engine will take the raw files and do the static HTML file generation on the server itself.
People also have much more complex setups that allow them to post from either their laptops, their phones and the server itself and get everything synced up across the board via Dropbox. You can get as creative as you want with that, but I think the simplest one to get started with is the first one. Edit your raw files locally, run Jekyll locally and then transfer the resulting HTML files to your web server when you're ready for them to go live.
Installing Jekyll Locally
Obviously, you'll need Jekyll installed on your local machine for this. Directions for that can be found on the Github page. For myself, running Mac OS X 10.6, the following commands got me setup.
sudo gem install rubygems-update
sudo update_rubygems
sudo gem update
sudo gem update --system
sudo gem install rails
sudo gem install maruku
sudo gem install jekyll
Note: I don't think you actually need rails, but those are the steps I went through and they worked for me
Setting Up To Use Jekyll
Once you have Jekyll on your machine, getting a basic site setup is relatively simple. Create the following structure in an empty directory:
Directories:
_layouts
_posts
_site
Files and their content:
_config.yml
safe: false
auto: false
server: false
server_port: 4000
base-url: /
source: .
destination: ./_site
plugins: ./_plugins
future: true
lsi: false
pygments: false
markdown: maruku
permalink: date
maruku:
use_tex: false
use_divs: false
png_engine: blahtex
png_dir: images/latex
png_url: /images/latex
rdiscount:
extensions: []
kramdown:
auto_ids: true,
footnote_nr: 1
entity_output: as_char
toc_levels: 1..6
use_coderay: false
coderay:
coderay_wrap: div
coderay_line_numbers: inline
coderay_line_numbers_start: 1
coderay_tab_width: 4
coderay_bold_every: 10
coderay_css: style
This is the default configuration setup for Jekyll. You can get away without this file, but it throws a warning when the process runs that it can't find the file. So, I'd go ahead and set it up. It also makes it much easier to mess around with stuff instead of sending arguments to jekyll on the command line.
_layouts/default.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Jekyll Site</title>
</head>
<body>
<!-- This will be replaced with your content -->
{{ content }}
{{ site.posts }}
</body>
</html>
The {{ content }} string will be replaced by the processed content of the "index.md" file listed below. The {{ site.posts }} string will be replaced by a reverse chronological listing of the files in the "_posts" directory. GitHub has a full list of the template code snippets.
_posts/2011-07-29-my-first-jekyll-post.md
---
layout: default
---
# My first Jekyll post.
This is the content from 2011-07-29-my-first-jekyll-post.md
index.md
---
layout: default
---
# My Jekyll site
This is the content from index.md
It's worth pointing out here that you could use .html or .textile files instead of .md versions. As long as the had the YAML Front Matter, which is the first three lines consisting of the dashes and "layout: default", they will be processed by Jekyll.
Generating Static Files With Jekyll
Now that your starting file and directory structure is setup, simply bring up your command prompt, go to the directory where you create the index.md file and run the command jekyll. Assuming everything went well, you should see a short log of the process and you'll have two HTML files now sitting under:
_site/index.html
and
_site/2011/07/29/my-first-jekyll-post.html
It's worth pointing out Markdown (.md) files for the raw file source. You can also use .textile or .html as well.
Transferring/Deploying Files.
The last step with this approach is simply to use FTP or rsync to push the files up to the root of your web server and share them with the world. Since they are flat HTML, it should be quick and painless getting pretty much any hosting provide ready to go for them.
(In your question you mention Git and Mercurial. You can use either to do version control and/or deploy your raw files as well as the static HTML files the Jekyll generates, but neither is required for Jekyll to run or to transfer your files. It's all about how you want to setup the deployment process.)
Part 2 - Migrating Data From WordPress
Everything above has been about using Jekyll itself starting effectively from scratch. If you have been using WordPress (or any other engine for that matter) and want to keep the pages and posts you generated there, you'll need to migrate them from WordPress to Jekyll.
The basic idea is that you would move your posts and pages into corresponding locations inside the Jekyll directory and let it take over from there. I would start your research on that topic on the Jekyll Blog Migrations page.
(On a personal note, my first attempt at a WordPress migration didn't work out of the box. I haven't had a chance to jump back into it to get it going, but I'm committed to making it work. Moving to a much simpler static site that reduces the potential security issues, loads faster and is easier to maintain is totally worth having to deal with a migration for me.)
After you installed jekyll, you can try this wordpress plugin https://github.com/benbalter/wordpress-to-jekyll-exporter
As I understand it, Jekyll produces static HTML sites. Of course Jekyll consists of some Ruby software, but that's something you can run on any computer (e.g. your home computer rather than the web server). This way, your web hosting needs can be satisfied by simple static systems such as Github Pages. Now, Github can handle the Jekyll invocation for you automatically, but in general the idea is to upload static HTML to dumb web servers.
I don't think there's any need to use Git specifically with Jekyll-created sites—I'm sure even FTP would be fine.