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!
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…
I was looking for the card validator for hours! Thank you for sharing that
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.
2 Likes
@jeremy BTW I’m doing this in my template to alias the summary in nbdev to description for this exact reason
{% 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.
1 Like
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.
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)
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.
1 Like
Might be possible to set both bits of metadata?
I’d lean towards off by default.
1 Like
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).
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```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.
@ilovescience could it be that it just takes time for the deploy to actually happen and you were checking too soon? Right now there isn’t a way to cleanly show an “in progress” screen but there is an additional step in GitHub actions called “GitHub Pages” that must clear for the SHA of your commit before you can be confident your change took place, it can take 5-7 minutes for each commit to be reflected. Just curious if this could be the issue
We could do things to speed this up, this is a future optimization.
Thanks! Looks great to me. With the latest master I saw the home.html is introduced, so I guess if I want to change the layout (a small image on the left of text instead, as I prefer it take a bit less space), it should be straight forward to do so.
I had checked all the actions were completed, and wait ~15 minutes even after that. The GitHub Pages Status was successful both on the badge and under settings. The website was definitely already deployed, but there was this weird bug.
You can run your blog locally without installing all the python + ruby stacks! Assuming you have Docker installed, though.
- Update to the latest fastpages (I know it’s a pain, Hamel is working on making that easier).
- In the repository root, run
docker-compose up. - The console will give you links to your Jupyter editor, and to the blog, running locally. It’ll watch for notebook updates and update posts automatically.
3 Likes