[fastpages] GitHub Pages Blog Using Nbdev

nok · February 23, 2020, 1:30am

Thank you. Do I have to recreate from fastpages and copy my notes over? Since the first PR will modify the repo quite a bit, I am not sure how to pull the changes to upgrade

jeremy · February 23, 2020, 1:43am

Remind me: does fastpages support creating twitter cards for posts? We have that in fast.ai, but I don’t recall if it was copied over to fastpages. (If not, it probably should be, because it’s handy!)

The reason I mention it here is because it uses a special key image in the frontmatter, which could also be used in a post summary I guess.

hamelsmu · February 23, 2020, 1:49am

Hi @nok the way I would do it ( we will try to automate this at some point but bear with us):

create a new repo from the template
merge the PR etc. from the new repo
copy all your posts over manually, add, commit and push them to master.

Hope that helps

hamelsmu · February 23, 2020, 1:51am

@jeremy

Yes fastpages has the jekyll-seo-tag plugin (I believe it comes with minima) that supports the image and description front matter. I haven’t tested the image part of it but the description works.

I can add this to my backlog to test and verify that this works

Edit image previews in twitter work via the image: front matter

However, at the moment doesn’t seem to:

support remote urls
you can only reference images in assets/ or images/
this is one of those cumbersome situations if you reference your image locally to the notebooks folder, it will not work.

@jeremy How are you doing it now? Is this the same thing you are doing?

hamelsmu · February 23, 2020, 1:55am

That’s an interesting idea of using twitter card summaries as previews on the home page I haven’t thought of that. I Will look into this!

jeremy · February 23, 2020, 4:06am

Embarrassingly, I didn’t know about that plugin, so I added this to the template head layout:

  <meta name="twitter:site"    content="@{{ site.twitter_username }}">
  <meta name="twitter:creator" content="@{{ page.author }}">
  <meta name="twitter:title"   content="{{ page.title }}">
  {% if page.summary %}
  <meta name="twitter:description" content="{{ page.summary }}">
  {% else %}
  <meta name="twitter:description" content="{{ site.description }}">
  {% endif %}
  {% if page.image %}
  <meta name="twitter:card"  content="summary_large_image">
  <meta name="twitter:image" content="{{ site.url }}{{ page.image }}">
  {% else %}
  {% endif %}

Since it uses summary, it works with the usual nbdev summary. Although if description is more common, it’s possible nbdev should set that metadata too…

jeremy · February 23, 2020, 4:06am

BTW this is a great tool for testing cards: https://cards-dev.twitter.com/validator

hamelsmu · February 23, 2020, 4:33am

I was looking for the card validator for hours! Thank you for sharing that

hamelsmu · February 23, 2020, 4:35am

@jeremy @nok

Good news the image preview on the homepage feature has now been enabled on fastpages via https://github.com/fastai/fastpages/pull/104

Usage

You can enable this option by setting

show_image: true

in /_config.yml , it is set to false by default.

hamelsmu · February 23, 2020, 4:39am

@jeremy BTW I’m doing this in my template to alias the summary in nbdev to description for this exact reason

github.com

fastai/fastpages/blob/master/_action_files/fastpages.tpl#L7


{%- extends 'hide.tpl' -%}
{%- block body -%}
{%- set internals = ["metadata", "output_extension", "inlining", 
                    "raw_mimetypes", "global_content_filter"] -%}
---
{%- for k in resources |reject("in", internals) %}
{% if k == "summary" and "description" not in resources %}description{% else %}{{ k }}{% endif %}: {{ resources[k] |replace(':', '') }}
{%- endfor %}
layout: notebook
---


<!--
#################################################
### THIS FILE WAS AUTOGENERATED! DO NOT EDIT! ###
#################################################
# file to edit: {{ resources.nb_path }}
-->

{% if k == "summary" and "description" not in resources %}description{% else %}{{ k }}{% endif %}: {{ resources[k] |replace(':', '') }}

Not sure if its too hacky or not. Just sharing. I guess it makes notebooks and markdown behave a bit differently. I will put this on the list of things I have to document for users.

hamelsmu · February 23, 2020, 4:46am

Yeah now that I think about, it might be best if nbdev set this metadata, it would align all the things. cc: @Sylvain - we are thinking that summary in nbdev (you know that gets set with > in the front matter, perhaps should be renamed to description in order to also flow naturally into the various SEO plugins out there.

jeremy · February 23, 2020, 4:52am

I think you mean: cc @sgugger

hamelsmu · February 23, 2020, 7:48am

Another update. I thought the image preview was a bit ugly so I made it much more appealing. I encapsulated the image + post metadata in cards. Feature was added via https://github.com/fastai/fastpages/pull/107

This is still off by default. I wonder if I should turn it on by default. My feeling is I need to figure out pagination before turning this on by default, as the images can take up quite a bit of space.

EDIT, by default the site still looks like this (when the option is turned off and there are no images, I feel like cards are overkill)

What are your thoughts @jeremy @nok

sgugger · February 23, 2020, 5:28pm

I have just made a test and setting description instead of summary does not work for our exported docs, so the renaming in general is not possible.

jeremy · February 23, 2020, 5:46pm

Might be possible to set both bits of metadata?

jeremy · February 23, 2020, 5:46pm

I’d lean towards off by default.

sgugger · February 23, 2020, 11:25pm

Sure, but won’t it hurt in the situations description is more useful (I have no idea what this does, so that’s why I ask).

kcturgutlu · February 24, 2020, 3:23am

Thanks for this great new tool! Perfect timing especially when Medium started getting people including me annoyed with “You’ve reached your limit” kind of fremium marketing strategy. I started building my own repo today and currently testing it locally.

However, there is one issue I am facing related to this. I tried putting quotes around my title however still converted .md doesn’t include the colon. Is it part of nbdev parsing strategy? How can we include colon to title?

Reference: NB source

Local testing and created front matter:

keywords: fastai
description: This is an introductory post for my personal blog PixelShuffle.
title: "PixelShuffle Yet Another Machine Learning Blog"
toc: true 
badges: true
comments: true
categories: [intro]
image: 
nb_path: _notebooks/2020-02-23-introduction.ipynb
layout: n```

hamelsmu · February 24, 2020, 7:02am

This has been fixed in https://github.com/fastai/fastpages/pull/110

ilovescience · February 24, 2020, 7:26am

Hello all!

Great to see this work and it looks awesome.

I thought I would give this a try. It wasn’t very hard to set up but I came across one “bug” that might be worth sharing for other users.

When I set the blog up, it originally did not show up under [USERNAME].github.io/[REPONAME]. Instead it showed up under [USERNAME].github.io/[REPONAME]/index.html. It’s supposed to redirect and show the index.html file but it didn’t. I later learned that it turns out sometimes the deployment doesn’t go through properly, and this issue can be solved with another deployment (which can only be triggered by a commit).

So I decided to change the _config.yml file and change the Twitter username to mine and commit to the main branch. This deployed the website on [USERNAME].github.io/[REPONAME] but with the previous commit of the Twitter username, while the index.html had the current commit with the updated Twitter username. So then I created an “empty commit” (space in the comments of the _config.yml file) and GitHub and apparently it is now synced up (I then changed the title and it updated under [USERNAME].github.io/[REPONAME]). Apparently, there’s also an empty commit command in git so if you are working on your blog locally, you can try this as well.

This is definitely a weird bug but I am glad I was able to fix this. I hope this helps anyone who has a similar issue.