Using with Github Pages

[psprint]

Hello I'm trying to use the theme with Github Pages. Are there any advice for doing this? The site doesn't build because it cannot find icon-github.html (automatic mail from Github). I've commited asseds/js etc. – things that are build by node. Locally bundle exec jekyll serve works, but plain jekyll serve fails at gem 'jekyll-assets'. (Bundler::GemRequireError). I did gem install jekyll-assets (OS X).

[insipx]

Hey @psprint

I'm not sure I totally understood your question, icon-github.html should be in the _includes folder. Though, it might not work with Github Pages because the page that uses it, about is rendered dynamically, which requires the Jekyll-React plugin to create the corresponding JSON file on the site which React will then grab.

Is there a full Github Pages error output you would be willing to post?

Currently, jekyll-assets is not supported by github pages though there is discussion around adding it to the list of supported plugins here

I don't believe the two other plugins, Jekyll-React and the Jekyll_pages_api are supported by Github Pages, either.

jekyll serve fails likely because it's not using bundler and cannot find the required gem, or there are conflicting versions of gems on your system. It's best practice to use bundler, however. http://bundler.io/rationale.html

A workaround to Github Pages not supporting these three plugins would be to simply run ./build-prod locally, and either create a new git repository within the ./public folder that will host your github pages site, or make ./public the master branch of your current github pages site.

Everything outside of ./public can be stored on a branch outside of the master branch (EX: source branch, or something like that).

I've done a setup like this here: https://github.com/InsidiousMind/insidiousmind.github.io

Just make sure to put '.nojekyll' in the repository to let Github Pages know you don't want it to run through Jekyll.

This way, you are able to use any plugins you want.

Alternatively, you can use a setup like this with CircleCI: http://tongueroo.com/articles/how-to-use-any-jekyll-plugins-on-github-pages-with-circleci/

Or this: https://blog.sorryapp.com/blogging-with-jekyll/2014/01/31/using-jekyll-plugins-on-github-pages.html

There are a bunch of articles talking about how to get around this on the internet, too, so if one method doesn't work for you if you search around you will surely come across another.

Hope that helps, Andrew

[psprint]

Thanks, I'm going for serving public directory, however, page doesn't seem to work that way. You can try jeykyll serve from within public – browser will show only background. bundle exec jekyll serve from main directory shows correct page.

PS. Turned out that jekyll serve from main directory was updating the domain to localhost:4000, from test_domain.com. However, remotely, I still cannot see page, and debugger says: http://imgur.com/a/Gxa41

PS2. I used http instead of https and hence the error. Now the page works!

PS3. The error message in the Github email was very superficial.

[psprint]

Also, I cannot see posts, and debugger shows: http://imgur.com/a/anyoJ

[insipx]

Hm, OK.

Can I see the Github Repository where you are trying to do this by any chance?

There is no reason to call jekyll serve from within the public directory -- that's directory just holds the static assets and generated configs from webpack. If you want to use github pages with plugins, the public directory should be the one github pages uses with the .nojekyll file.

Have you tried building with build-dev.sh or build-prod.sh?

Also, if you are not developing on localhost:4000 you can go into _config.yml and change the url's there to wherever you are deploying, as well as the ROOT_URL in react-dev/actions/index.js

I'm kind of guessing at your problem here, but if you share your repository with me I could pinpoint better where it's going wrong.

[psprint]

The repo is: https://github.com/zdharma/zdharma.github.io. I'm now ongoing solving problem with 404, cooperating with Github. Also, have problems "mixed-content" Firefox error, loading HTTP (bundle.js) from HTTPS page. Not sure if changing all urls to HTTPS will help, cannot test that yet.

Good to know about public directory, I might test that after I establish working setup. They've said to me about /docs directory, though.

I build with build-prod.sh when pushing to GH. Locally it is just build-dev.sh, after I run build-prod.sh once or after changing react-dev files. Pushing to GH is done via:

https://github.com/zdharma/zdharma.github.io/blob/devel/script/build_html

I develop on localhost:4000, had to add a perl-replace for bundle.js:

https://github.com/zdharma/zdharma.github.io/commit/11e9eff0c1c24d387c6a99f1a7408f71fb2921f3

Locally the page works. Remotely there was that 404 which is now being solved.

[psprint]

PS. There is a minor problem – first word of post isn't present in summary (post's box on title page), but is present at full view:

http://imgur.com/a/iARNZ

[insipx]

OK, going to your webpage it seems the 404 is solved and it's mostly working now (at least, I am not getting any errors in the Console), I think. Correct me if I am wrong :)

I will get the problem with the first word of the post being missing solved ASAP, totally slipped me by.

BTW, I am totally on-board with all the ZSH projects -- definitely my favorite shell.

EDIT: Ahh I see where your mixed content error is. Changing the bundle to HTTPS may help, I am currently investigating further

[insipx]

@psprint OK so yes, changing all urls from http to https will fix the mixed content errors. Just make sure you are forcing https through github pages, because visiting the site from http:// without enforcement when everything is https might raise errors of their own.

Here are some resources I found about https in github: https://github.com/blog/2186-https-for-github-pages https://help.github.com/articles/securing-your-github-pages-site-with-https/

I tested https with my own site using this theme here: https://code.liquidthink.net If you notice, it all redirects to https now

I am not sure however if https with Github Pages will work for a custom domain, in their articles/docs it seems as if they refer only to .github.io domains

[psprint]

Yes the page is working. Thanks for the theme, it's exceptional.

The HTTPS/HTTP problem seems to be solved by use of HTTP links because Github quite enforces HTTP when using a custom domain. The 404 before was most probably caused by removal of "CNAME" file that Github automatically commits, because I did the automatic html committing via "build_html" script.

Maybe you will know why highlighting can break on the about.md page? A specific part of Zsh code causes this. I've commited that to http://zdharma.org/about/ page, a reload might be needed.

[insipx]

Thanks!

The code highlighting on the about.md page breaks because of the order in which my plugin/Jekyll renders the markdown page (I thought it was OK). It seems the indentation of that particular code snippet breaks it. If you remove the indent the highlighting works. Another possibility is the particular syntax highlighter being used. Switching to another highlighter might fix it.

Clearly this isn't desired behavior, so I will get both these problems fixed and tested very soon.

Thanks for reporting in. The theme is still under some minor development, so I appreciate the cooperation.

[psprint]

I count on fixes, Material/React is very difficult. I've tried to use icon for "Read more" button. Want to put this image as the button:

http://vignette1.wikia.nocookie.net/lostpedia/images/6/60/Hieroglyphs.JPG

I have a better one that is a rectangle. Cannot accomplish this, FontIcon and SVGIcon seem to dominate Material UI.

PS. Search has a problem: entering query yields result, then deleting the query doesn't restore "all posts shown" state.

[psprint]

I've found code responsible for first word skipping:

 const createMarkup = (post) => {
   let body = post.body.split(' ');
-  body = body.slice(1, 50);
+  body = body.slice(0, 50);
   body = body.join(' ');
   return `${body}...`;
 };

[insipx]

Hey! thanks for finding that. I pushed a fix for the first word in the summaries along with a fix for the search not resetting without any queries.

About trying to get custom Read More --> You can either convert your icon/img to SVG and use SVGicon: http://www.material-ui.com/#/components/svg-icon

You would probably want to store the icon itself in a separate file because depending on what kind of image it is, svg files from converted images can get rather cumbersome and long. After you include it you'd want to do your own styling, because converting to svg will probably leave it black&white.

OR you can use regular tag (Although, that won't have the benefit of being able to apply the animations/interactions as with a regular Material UI Component).

Any regular HTML will work in JSX/React as well, so you don't have to use the MuI FontIcon/SVGIcon

[psprint]

Managed to get the button via <img>. It's OK, actually nice. Flashes with green for a moment though. Thanks for the search fix and for including ZUI code at the template :)

PS. One more question – the subscribe, you handle it via external dynamic (say CGI) page? I should create such page for myself and change the code / URL?

[insipx]

Awesome!

yeah, you could do that. I just use mailchimp, and have the subscribe link and stuff.

Maybe in a future update I will add that as an option to the frontmatter in _config.yml, might be annoying to go into the footer/newsletter component and change that whenever it needs to be changed

[psprint]

I've created mailchimp account, went to the signup forms, copied form-internal-data from "Embedded Forms". When testing the subscription, I get the normal new page at mailchimp, with message about confirmation email. My address and company name are correct. However I don't obtain the confirmation emails at all. Have you occurred this?

PS. Ah, sending email as from "protonmail" causes gmail spam filter to be active