Plugin: Generate static blog website and publish to Github Pages

rxliuli · 2021-10-02T06:06:10.755Z

It should be very simple, just need to inherit the base class to implement some specific methods, mainly including

Parse the markdown notes, how to replace the link of joplin with the link of the static site generated by the corresponding framework
Where to write the markdown files and resources for notes
Some optional initialization actions

You can refer to the currently integrated hexo/vuepress/docsify, the code for the adaptation framework is about less than 100 lines

github.com

rxliuli/joplin-utils/blob/master/apps/joplin-blog/src/blog/BlogHexoIntegrated.ts

import { BaseIntegrated } from './Application'
import path from 'path'
import { CommonNote, CommonResource, CommonTag } from '../model/CommonNote'
import { JoplinMarkdownUtil } from '../util/JoplinMarkdownUtil'
import { convertJoplinNote } from './JoplinNoteHandler.worker'

class BlogHexoSingleNoteHandler {
  constructor(
    private config: Pick<BlogHexoIntegratedConfig, 'stickyTopIdList' | 'tag'>,
  ) {}

  meta(note: CommonNote & { tags: CommonTag[] }): object {
    return {
      layout: 'post',
      title: note.title,
      abbrlink: note.id,
      tags: note.tags
        .map((tag) => tag.title)
        .filter((name) => name !== this.config.tag),
      date: note.createdTime,

This file has been truncated. show original

pravsripad · 2021-10-02T06:11:23.507Z

Thanks, I'll give it a try when I have some time.

ylc395 · 2021-10-02T11:29:50.393Z

I think Github Desktop may help you

pravsripad · 2021-10-03T06:27:08.663Z

Thanks for the tip on gh-pages / github Desktop. I am comfortable doing a git push from the command line but I thought the Pages Generator workflow would be nice i.e.

Write blog post on joplin.
Export to jekyll using joplin-blog.
Push directly to github using Pages Generator Plugin style functionality.

What is your currently workflow for joplin + blogging?

Btw I tested the Pages Generator and the UI is really nice !

rxliuli · 2021-10-03T07:28:07.705Z

For batch processing tasks, I generally use multiple command line tools and connect them. As you can see, use joplin-blog to generate the markdown files needed by the blog from the notes, then use hexo to generate static html resources based on the markdown files, and use gh-pages to push them to github pages.

PS1: Visual tools are very friendly to ordinary users, but they are also the most difficult form to connect with other tools (code lib> cli> gui for flexibility. Code lib is language-dependent, and you must understand programming knowledge. cli and programming language Irrelevant, but still requires a certain command line basis. gui is a completely user-friendly program).

Imperial_Squid · 2021-10-13T13:03:09.747Z

Just a quick fyi, the plugin seems to not like it if you default branch is not "main", I had an old repo I tried pushing to where "master" was the base and it failed to push every time until I switrched it over (weirdly it worked fine the firsty time but that time the main branch didn't exist so maybe that makes the difference!)

Either way, awesome plugin! Super excited to move all my posts into Joplin and have them on hand everywhere! Slightly painful to have to remake my style from the ground up but that seems llike a long term project anyway!

Also another question, is it possible to assign environment variables in anyway? I'd really like to have pages where I can filter by the tags a page has or the blog series it belongs to but I can't see how to do that without being able to make a unified set of all the tags which is a bit beyond my (sorry I'm new to EJS!)

ylc395 · 2021-10-13T14:15:02.416Z

Imperial_Squid:

I had an old repo I tried pushing to where "master" was the base and it failed to push every time until I switrched it over

Did you set branch in Github Tab like this?

图片702×1008 32 KB

If you already set like this but still met problem, it's a bug, you can provide more details to me as Github issue, such as the error report in Modal,

Imperial_Squid:

I'd really like to have pages where I can filter by the tags a page has or the blog series it belongs to but I can't see how to do that without being able to make a unified set of all the tags which is a bit beyond my

You can define one page, which contains all tags and their related articles, and use JavaScript to filter articles by tag. Honestly speaking, it's not that easy for guys without web development experience, but I can provide a example:

<%# tags.ejs, a page that contains all tags and their related article %>
<body>
  <%# list all tags(united set of tags) %>
  <ul>
  <% for (const tag of _.union(_.map($site.articles, 'tags'))) { %>
    <li>
      <%= tag %>
      <%# list all articles which contains this tag) %>
      <ul>
      <% for (const article of _.filter($site.articles, ({tags}) => tags.includes(tag))) { %>
        <li><a href="/<%= article.fullUrl %>"><%= article.title %></a></li>
      <% } %>
      </ul>
    </li>
  <% } %>
  </ul>
  <script>
    // if you know JavaScript programming,
    // you can write code here to control which tag and its related articles should be displayed,
    // according to user clicking or query string in url
    // if you don't, maybe it can be your first lesson of JS programming :)
  </script>
</body>

Imperial_Squid · 2021-10-13T17:41:27.952Z

ylc395:

Did you set branch in Github Tab like this?

Honestly, I fully missed that box in the options, I actually switched which branch was the default using GitHub!

ylc395:

You can define one page, which contains all tags and their related articles, and use JavaScript to filter articles by tag. Honestly speaking, it's not that easy for guys without web development experience, but I can provide a example:

You sir, are a scholar and a saint! Thank you so much for this! JavaScript is way outside of my wheelhouse (as a data scientist by trade, I come from the world of Python and R mostly!) so I think I would never have come up with this.... Though you're right, learning some would be a good idea! Thanks again!

Also the docs for EJS seem a bit elusive, do you know where I can find them? (knowing what other stuff I can do like _.map and _.union would be super useful)

ylc395 · 2021-10-14T02:14:57.179Z

Comparing to the job of data scientist, a script that filters HTML elements may just be like a toy.

FYI: _ is a js data manipulation library named lodash, injected into page as an env variable. see this wiki for details

emilioluque · 2021-11-15T18:22:23.013Z

I love the idea of this plugin, and would love for it to work for me, but I keep getting the error message:
Github Repository https://github.com/myusername/presentations doesn't exist. Do you want to create it on Github?
It does, and it doesn't get "recreated" if I choose that option.
Maybe it's a Windows git problem (I'm using Windows 10)? Git is installed, and the public_repo git token generated and copied to the plugin configuration.

ylc395 · 2021-11-16T01:43:54.155Z

I found it 404 when I tried to visit your repo. Is it deleted or a private repo? If it's a private repo, you should provide a token with private repo accessing privilege. FYI: a private repo can not be served as a website by github unless you are a paid user.

emilioluque · 2021-11-16T08:35:35.124Z

I'm pretty sure it is a public repo. I must say I am mostly ignorant about github, so I don't know what "blob" means, for instance. However, that is the whole point of the plugin, ain't it? Not that I am complaining, obviously, I am mainly grateful but stumped.

Can you access this? presentations/example.md at main · emilioluque/presentations · GitHub

ylc395 · 2021-11-16T09:41:08.718Z

I see. You provided wrong username of github to this plugin. Your Github username should be emilioluque , not myusername

FYI: If your repo name is presentation(instead of emilioluque.github.io), you need to do some extra configuration in Github to make your site accessible on Web. I'll make it automatic in next release.

emilioluque · 2021-11-16T12:03:26.875Z

Yes, sorry. I meant it to be generic.

I am tantalisingly close. I have tried to send a link, but Discourse disallows it. You can access my emilioluque presentations GitHub public repository, perhaps?

I have activated pages, but the notes I select to be published as articles do not seem to get published... but they seem to be in the right place, aren't they?

ylc395 · 2021-11-16T12:11:58.055Z

Your site is accesible in Emilio Luque now. But I found that this plugin doesn't work well if your domain is not https://emilioluque.github.io/. It's a bug, will be fixed in next release.

If you don't mind, you can create a repo named emilioluque.github.io to make everything work.

emilioluque · 2021-11-16T12:20:36.888Z

I think that repo is generated when GitHub Pages is activated. I can see it exists, but without any notes being published as articles. If you please check again, you'll see everything is there... except the notes-as-articles.

ylc395 · 2021-11-16T12:22:26.214Z

I saw you just created a repo emilioluque/emilioluque.github.io · GitHub .It's correct, but empty. You need to generate and publish again, to this right repo.

B0BIC · 2021-11-19T07:45:14.859Z

Hey, this seems like a great plugin. Definitely seems like the the most convenient way to export a bunch of stuff as an interlinked whole.

Is there any way to get it to publish a whole notebook?

ylc395 · 2021-11-19T12:22:07.249Z

I think this plugin doesn't support notebook-level publishing. @B0BIC

Imperial_Squid · 2021-11-29T17:26:26.381Z

Can I make a feature request?

A lot of themes you can pick from make use of a YAML block at the start of the article to specify bits of the theme, would it be possible to process a YAML block and inject that data in as part of the ejs environment variables?

That way if people want to include features like pinning articles or having banner images per article they can specify and implement all that themselves in their own themes. Would be a really nice sort of "here, you can do anything with this if you have the know how" feature!