[fastpages] GitHub Pages Blog Using Nbdev

Is there a way to update the URL at which github pages is served? I already merged the PR before and my blog is at amarora.github.io/fastaiexplained but want to move it to a new URL, is that possible?

Rename the repo and change the various Config files but honestly itā€™s easier to just create a new repo and copy your notebooks over

1 Like

Can we include GIFs in the blog?

https://fastpages.fast.ai/jupyter/2020/02/20/test.html#Animated-Gifs

1 Like

Thanks! I created a new repo and that worked easily :slight_smile:

I hope itā€™s OK to post a basic troubleshooting question here (first time user on this forum). Iā€™m very keen to use fastpages for blogging but Iā€™m having trouble getting it to work. Hereā€™s what Iā€™ve done and where things break down:

  • I followed the instructions (pull request, deploy keys etc) to setup a new repo here: https://github.com/jhconning/econblog
  • As a first simple experiment, I made a minor edit to _posts\2020-01-14-test-markdown-post.md, pushed the change and the blog post updated correctly (so github actions worked there).
  • Next, I made a copy of the example notebook 2020-02-20-test.ipynb and called it 2020-04-11-test-new.ipynb The contents of this new notebook are identical except for a change in the header in the first cell and also in the _notebook folder.
  • When I push this new notebook github actions seems to complete but I donā€™t see the new blog post appear. When I look at the gh-pages branch I do see a new html page at econblog/2020/04/11/2020-04-11-test-new.html and not under econblog/jupyter/2020/04/11` where I would have expected it.

Any pointers as to what I might be getting wrong?

Thanks in advance
Jonathan

1 Like

Your post seems did catched by fastpage, as I can see the date of your post, but somehow the other information are missing. If you look at the html file it is missing some part before the autogenerated annotation.

I will try to reproduce when I have access to my laptop

@jhc you may want to read the README carefully. Since your title has a colon you need to enclose your title in double quotes.

Quoting the README:

Note that anything defined in front matter must be valid YAML. Failure to provide valid YAML could result in your page not rendering in your blog. For example, if you want a colon in your title you must escape it with double quotes like this:

- title: "Deep learning: A tutorial"

Configure Title & Summary

  • Replace Title , with your desired title, and Awesome summary with your desired summary.

Note: It is recommended to enclose these values in double quotes, so that you can escape colons and other characters that may break the YAML parser.

Thank you for your help! That colon in the header was the problem.

I should have read that section of the README more carefully but I guided myself by the language of the sample Fastpages Notebook Blog Post that I was emulating. To avoid confusion by others it would be a good idea to change the language in that notebook to include the need for double quote marks as well.

I have just created a pull request with a suggested simple fix to this.

Thanks again and kudos for such a nice system. For years Iā€™ve been waiting for ways to share notebook content with a wider audience (in my case students) that gives me flexible control over things such as when code cells are hidden, collapsible and ability to link to offer quick links to binder/colab. Really nicely thought out and excellent work,

1 Like

I want to use emojis in Jupyter Notebooks which Iā€™m using to write a blog. Currently I write markdown in a separate editor and notebooks using JupyterLab/Colab. I found it really difficult to maintain such blog post, so any platform suggestion that support notebooks, better markdown support, emojis etc.?

I guess one answer to this is to launch live service on your local machine as discussed here :sweat_smile:

Does use of markdown emoji supported? or I need to use unicode symbols?

EDIT: I realized fastpages doesnā€™t support github-flavored emojis yet. So I added jemoji in Gemfile and _config.yml plugins. This definitely enabled the use of emojis in the blog but they are always being displayed as a ā€œblockā€

image

Emoji here should have been on the same line. As per this issue on jemoji repo, I tried adding following css in the fastpages-styles.scss

img.emoji {
    display: inline;
    height: 1em;
    width: 1em;
    margin-bottom: 0.25em;
}

But it didnā€™t work. Let me know how can I get around this.

Thanks!

I really like the workflow design and functionality but I am finding the build process quite fragile and when things fail itā€™s not apparent (to this beginner) how to start tracking down errors.

Iā€™ve been trying to update a blog, turning on math and updating the _config.yml . Had an errror there at first but I think thatā€™s fixed now. But no update to the blog content. When I look at the history of github action workflows https://github.com/jhconning/econblog/actions I can see a checkmark next to CI/build-site but an indication that the ā€œSetupā€ was skipped

image

Where should I look in a situation like this to try to find where the problem might lie? When I look at the Actions detail the jobs all seem to have completed but the setup on:push check says ā€œthis check was skippedā€.

thanks

Try to preview the blog locally so you can view the build logs

1 Like

Is it possible to get fastpages to use the light theme of nbdev?
I found the table of content and code block of nbdev looks more natural to me with light theme. I am not sure the two library are sharing similar css library or not.

Answer to this question is in the README

Since Iā€™ve edited this one, trying to bring into notice. Any thoughts @hamelsmu ?

Oh sorry no they arenā€™t sharing the same CSS you have to provide your own custom CSS

Look for ā€œCustomizing Fastpagesā€ in the README

I want to know whatā€™s the use of image.html in _layouts and where does it affect?
This is the source code:

<figure>
  {% if {{include.url}} %}<a class="no_icon" target="_blank" href="{{include.url}}">{% endif %}
    <img class="docimage" src="{{include.file}} " alt="{{include.alt}}" {% if {{include.max-width}} %}style="max-width: {{include.max-width}}px"{% endif %} />
    {% if {{include.url}} %}</a>{% endif %}
    {% if {{include.caption}} %}
      <figcaption>{{include.caption}}</figcaption>
    {% endif %}
</figure>