Hosting your blog on Github/Github pages

[ishu3101]

I'm trying to host my blog created using ember ghost using either Github/Gitlab Pages.

Github Pages

When I try to host using Github Pages, I am deploying the /dist folder created using ember build on a http://username.github.io/reponame. However it fails to load the assets since its looking for the assets in http://username.github.io/assets/ rather than http://username.github.io/reponame/assets.

Gitlab Pages

When I try to host using Gitlab Pages by doing the same thing, I'm getting this error message in the console.

Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

[mansona]

So I've tried to get this to work on github pages and it's not been very successful. The main issue is because of this chart of supported subdomains/folders.

Essentially I haven't quite figured out how to get the rootUrl stuff with Ember to play nicely with where the static JSON files end up in the deployment.

I have however had a lot more success using Netlify which essentially Just Works™️ out of the box 😂 Is there any particular reason why you would want to use github pages instead? Netlify is free btw 😄

[ishu3101]

This article talks about the rootURL stuff if its helps https://www.emberjs.com/blog/2016/04/28/baseURL.html

[mansona]

So the problem isn't just the rootURL itself, it's a combination of some of the assumptions that are made with having static JSON "on disk" that is pretending to be an API.

Also if you look at that chart I sent you, the 2 options that require you to add projectname at the end of the url would then require the use of hash based routing. For example one of my blogs that is built with this:

https://blog.stonecircle.io/broccoli-starting-the-build-and-eating-your-greens

would need to change to:

https://blog.stonecircle.io/blog#broccoli-starting-the-build-and-eating-your-greens

which doesn't work for SEO any more because everythign after the # is strictly in the browser.

If you're using either of the 2 cases that doesn't require the trailing folder name then this shoudl Just Work™️ 😂

[ishu3101]

You can find my project here: https://gitlab.com/ishu3101/ember-ghost/. When I run the project on my local computer on http://localhost:4200 it works fine, but when deployed on gitlab pages I'm getting this error in the developer console.

Error while processing route: post Ember Data Request GET /content/ember-ghost.json returned a 404

[mansona]

@ishu3101 so as I said a few comments ago, it currently doesn't support Github Pages or gitlab pages that need a subdirectory in the URL. I have found this video that suggests a way to fix this on git lab where you can have it as a "user/group website".

Essentially you can rename the repo to ishu3101.gitlab.io and then remove your routerRootURL config here: https://gitlab.com/ishu3101/ember-ghost/blob/master/config/environment.js#L7 and it might work 😂

[ishu3101]

Changing the application.js file in the ember-ghost/app/adapters/application.js to below, causes the site to load as a subdirectory like /ember-ghost/ with all the css and js loading fine but it is still looking for the images in the root of the directory ie /images/ rather than /ember-ghost/images/ when rootURL is set to /ember-ghost/ in the environment.js file.

if (requestType === 'queryRecord') {
      return `${config.rootURL}${prefix}/${modelName}/${query.path}.json`;
    } else if (requestType === 'query') {
      return `${config.rootURL}${prefix}/${modelName}/${query.path}.json`;
    } else if (requestType === 'findRecord') {
      return `${config.rootURL}${prefix}/${modelName}/${id}.json`;
    }

However when I set rootURL back to /, and try to load the site, it displays an error message saying Error: The adapter operation was aborted

[mansona]

There are a lot of reasons why this is currently not supported, some of which are related to the images. We would like to support it at some point in the future but it's unfortunately not quite as simple as fixing the rootUrl in the application adapter.

Did you see any of my messages about deploying this as a user or "group" website on gitlab? Also have you had a chance to try this on Netlify? It is literally a 5 mins process on Netlify and is 100% free 👍 you can even set a custom domain for yourself

[ishu3101]

I already have a site as a user pages on gitlab. Yes I tried it on netlify as well but getting Assertion Failed: Path / does not start with the provided rootURL /ember-ghost/

[mansona]

that's because you would need to undo your changes to rootURL and routerRootURL or anything like that.

A basic out-of-the-box ember-ghost app works with no changes on Netlify

[ishu3101]

Yeah managed to get it working with Netlify. However I would appreciate if support for hosting on a subdirectory was added.

[mansona]

I have plans to support subdirectories but as you can see it's not a trivial change 😢

If you are motivated to get it working maybe we could arrange a call sometime and figure out all the pain points together? Is that something that you would be interested in?

[ishu3101]

I dont have any experience with ember apart from setting up my blog using ember-ghost. However I would be interested in getting it to support subdirectories.