How can I add a mobile friendly website with Jekyll and GitHub?

Question

I currently have a desktop version of my website. I don't want to change that. But I thought about adding a mobile friendly website. For this website, I would remove some HTML elements to make it load faster (e.g. a tag cloud and some images) and change the style to use screen space better.

I would like to use a subdomain for that, e.g.

  http://martin-thoma.com/check-point-inside-polygon/ # Desktop verson
http://m.martin-thoma.com/check-point-inside-polygon/ # Mobile version

How can I use both, a subdomain m. and my domain with GitHub pages?

The other question is a more about Jekyll. I don't know how this should be on the underlying file system. I think it could be like this

./css/
./images/
./_drafts/
./_posts/
./_plugins/
./_site/
    |- ./css/
    |- ./images/
    |- ... (all posts, tags, titles)
    |- ./m/
         |- ./css/
         |- ./images/
         |- ... (all posts, tags, titles)

So I would basically need two jekyll runs. The first one generates the desktop site, the second one the mobile site. But how can I tell jekyll to use a different layout for the same posts? (Of course, I could preprocess my posts and replace all layout:desktop occurrences by layout:mobile, but that does not feel right.)

So my question is: How does Jekyll deal with different mobile / desktop site versions? Are there examples, that don't solve it solely by media="handheld" or media="only screen and (max-device-width: 480px)" (media queries)?

I think the way Wikipedia does it is quite nice. When you emulate a mobile device and look at the HTTP-requests, you will notice the following:

Request URL:https://de.wikipedia.org/wiki/Benutzer:MartinThoma
Request Method:GET
Status Code:302 Found

Request Headers
GET /wiki/Benutzer:MartinThoma HTTP/1.1
Host: de.wikipedia.org
Connection: keep-alive
Cache-Control: max-age=0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Linux; U; Android 2.3.6; en-us; Nexus S Build/GRK39F) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Accept-Encoding: gzip,deflate,sdch
Accept-Language: de-DE,de;q=0.8,en;q=0.6,en-US;q=0.4
Cookie: uls-previous-languages=%5B%22de%22%5D; clicktracking-session=SOME_SESSION_VAR; wikimedia-SUL-final-CN-general=5; mediaWiki.user.sessionId=MY_USER_ID; dewiki_session=ANOTHER_SESSION_ID; dewikiUserID=ANOTHER_USER_ID; dewikiUserName=MartinThoma; dewikiSession=ANOTHER_SESSION_ID; centralauth_User=MartinThoma; centralauth_Token=BLA; centralauth_Session=BLA; forceHTTPS=1; centralnotice_bucket=0-4.2; wikiEditor-0-toolbar-section=advanced; vector-nav-p-lang=true
If-Modified-Since: Thu, 09 Jan 2014 05:14:25 GMT


Response Headers
HTTP/1.1 302 Found
Server: nginx/1.1.19
Date: Thu, 09 Jan 2014 05:14:53 GMT
Transfer-Encoding: chunked
Connection: keep-alive
Location: https://de.m.wikipedia.org/wiki/Benutzer:MartinThoma
Accept-Ranges: bytes
X-Varnish: 161481560
Age: 0
Via: 1.1 varnish
X-Cache: amssq57 frontend miss (0)
Cache-Control: private, s-maxage=0, max-age=0, must-revalidate

So they seem to use the User-Agent to determine which site they will give you. I think I can do the same with .htaccess files (see Mobile Redirect using htaccess). But I still would have to have this mobile version of the site.

Voucher

If you want to add a mobile friendly Jekyll site, just use a responsive theme. Most of themes are responsive now or edit your CSS to make it responsive. However, sounds like you are talking about something else, like deploy two different Jekyll sites. – Selmner

@user1177636: That's indeed not what I'm looking for. I want my tag cloud for the desktop version, but not for the mobile version. Of course, I could do display:none or something similar, but I really want a distinct mobile website. – Voucher

Can't you just use JS to control it? Say if (not_on_mobile) { render_cloud }? – Selmner

I want to use as less JavaScript as possible. I have to use it for some parts (e.g. MathJax), but if it is not required I would like to avoid it. – Voucher

@user1177636: In how far would a JS solution be better than a CSS display:none solution? I think that the JS solution would even mean more to load than the CSS solution. But at least it would also have to load the HTML. But I want to create a very minimalistic mobile website to reduce load times. – Voucher

@user1177636: No, Wikipedia does not use a responsive theme (see edited question). Yes, the core of this question might be "How do I create two websites (same content, but different _layouts) with Jekyll". You've already answered the github-part of the question, now I'm still not too sure about the Jekyll-part. – Voucher

Answer 1

Since you are going to essentially maintain separate templates for mobile and desktop, I suggest you create two GitHub repositories: one for desktop and the other for mobile. That way you can have your GitHub page link to the relevant subdomain.

On the mobile subdomain, on document ready, redirect the user to desktop if (device width > X). On the desktop subdomain, on document ready, redirect the user to mobile if (device width is <= X), where X is the mobile breakpoint.

The main problem with this approach is having to maintain 2 copies of the same code. However, if you are sure that your templates will be completely different for mobile and desktop, this solution could work out.

I am assuming that your website has a blog. What you can do is create a constantly running watch task that detects changes in your working directory and automatically syncs the common folders (like _posts and _data) between the mobile and desktop repositories. This will save your time in copy-pasting folders/files when you make changes in the desktop/mobile version. Remember to push both repositories!

Loose

Answer 2

Definitely can be done through using media queries. There's a complete guide on using them from CSS-Tricks here. Though the subdomain concept is out of date because of how code in the DOM is managed. And it isn't great for SEO in general as it is treated as a different address and therefore you lose the analytics of the TLD address on a sub.

Also you could amend the styling using attribute selectors based on URLs. Here's an article that may guide you better on the use of them

Knobloch

Please don't provide link solutions without the main body of the content here. Links may rot over time and therefore become useless. – Geometrid

Answer 3

Here's an idea (I didn't try, just wrote it down here). It's a little janky but I'm pretty sure it'd work or at least get you close:

Jekyll Part

This isn't supported by Jekyll, but you could accomplish it by having two different sites in one directory. Create a script (call it sync.sh) to copy heavily to mobile from the main site, then just include whatever's different in the mobile directory. So your structure would look more like:

./main
    |- ./css/
    |- ./images/
    |- ./_drafts/
    |- ./_posts/
    |- ./_plugins/
    |- ...
./mobile
    |- ./css/
    |- ./images/
./sync.sh

sync.sh would contain a bunch of commands to copy duplicated content over:

cp -r ./main/_drafts/* ./mobile/_drafts/*

Do the same with _posts, _plugins, anything else you want to share. You can also symlink _config.yml or use two separate versions depending if you want identical config or not.

GitHub Part

GitHub Pages doesn't support deploying two sites from one repo, and it can only deploy from a repo's top level directory. So you will end up with three git repos:

• whole_site which contains the above structure
• whole_site_main with just the main (deploys to root domain)
• whole_site_mobile with just the mobile (deploys to m. subdomain)

Once you have these 3 repos set up (it's ok to have git repos inside of other git repos), you could write a deploy.sh that does:

cd whole_site_main
git add .
git commit -am "deploy main"
git push

cd ../whole_site_mobile
git add .
git commit -am "deploy main"
git push

You could run this manually, or set up GitHub Actions to run it on any push to the whole_site repo.

Swivet