Homepage    |    GitHub    |    API    |    FAQ

Plugin: Generate static blog website and publish to Github Pages

Hello everyone. I've published a joplin plugin named Pages Publisher.

This plugin help you generate a static blog website from your picked Joplin notes, and publish it as Github Pages which are accessible on Web, with a few mouse clicks, even if you know nothing about website building & publishing / Git / Github . All on GUI, No CLI commands / tools is needed.

Also, this plugin allow you to customize your website's theme, if you know something about HTML / CSS / JavaScript.

Please read a short and simple User Guide in wiki before starting using it.

Homepage:

7 Likes

This looks amazing. Looking forward to give it a try. Can I use it with jekyll themes?

If necessary, you can try to integrate joplin-blog, it has integrated some existing static website frameworks, Support programmatic calls.

At the same time, I suggest you can use nodejs to create a simple static service without relying on python

Python? This plugin doesn't rely on Python actually. Python is mentioned in wiki for starting a local HTTP server. If you like, Node.js also works

I mean, you may be able to use nodejs, and then start the local preview as a function button. Since the joplin plugin runs on nodejs, this may be a reasonable choice

Joplin Plugin System doesn't allow me to call node.js API except for fs, so call CLI command is not possible.sad :sob:

1 Like

Jekyll themes should be processed by a Jekyll implement(for example, Jekyll in Ruby), but it's a little unrealistic to implement another Jekyll in JavaScript :sob:

It would be great to use it with gitlab :thinking:

It's not a big problem to implement this. I'll make a try.

1 Like

How difficult would it be to integrate jekyll to joplin-blog, I'm don't have much experience with typescript?

If I have a jekyll static site already up, can I use this plugin to simply publish it via git? I am more interested in using the interface to push site to git directly.

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

  1. Parse the markdown notes, how to replace the link of joplin with the link of the static site generated by the corresponding framework
  2. Where to write the markdown files and resources for notes
  3. 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

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

I think Github Desktop may help you

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.

  1. Write blog post on joplin.
  2. Export to jekyll using joplin-blog.
  3. 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 !

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).

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!)

Did you set branch in Github Tab like this?

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,

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>

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

You sir, are a scholar and a saint! :grin::purple_heart: 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)

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

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

1 Like