Migrating from gitbook to docsify.js

Introduction

I host my programming course on GitBook and it’s great (the GitBook system I mean, not my course…albeit it’s not that bad either 🙂 ).

However, recently I started looking for alternatives in case GitBook stops being free.

I’ve been a big fan of GitBook from its early days. You simply write your stuff in markdown, push your stuff to your repository and behold “a full-blown online course”. You want an epub or PDF version of your document? No problem, all the GitBook tools are available on GitHub. But how long will it last?

Docsify.js became my fallback because it allows a rather painless migration.

Why GitBook might need an alternative soon?

Recently gitbook.com launched a new version and went rather more commercial. They abandoned markdown for their own proprietary JSON-format and git-like repository. You can still use the classic markdown+GitHub combination, but you won’t be able to use all the latest neat stuff (tabs, etc.). In fact, the developers have bluntly stated they won’t be keeping the open-source tools up-to-date.

Why docsify.js is my backup plan?

There’s still a free plan at GitBook, so at the moment there’s no reason to panic, but one should be prepared. My main goal was to find a system that would allow me to ‘convert’ my existing GitBook-course to another system with the least amount of hassle possible. Docsify.js became my fallback technology for now. It requires minimal changes to my markdown-course AND allows free hosting on GitHub pages, resulting in a perfect alternative to GitBook.

How to migrate to docsify.js?

  • Install docsify
    npm  i docsify-cli -g
  • (Make a copy of your existing repo)
  • Initialize docsify on your repo folder: docsify init [yourrepo]   (notice that this will overwrite your existing Readme.md, so make sure to replace it afterwards)
  • Rename summary.md to _sidebar.md (yes, it’s that simple!)
  • Add loadSidebar: true to window.$docsify in index.html
  • That’s all there is to it! Now run: docsify serve
  • And push it to Github Pages as explained here

If your images don’t work, make sure your references aren’t correct. Check out the end of this article for tips on this.

Left-side: original GitBook course. Right-side: result with docsify.js after conversion

Images/references

All my images are stored in a separate asset folder. GitBook doesn’t mind URLs such as “/assets/0_intro/vslogo.png”, it will automatically append the root folder in front and find the needed resource.

For docsify it’s important you add “..” in front otherwise docsify won’t find the asset folder: “../assets/0_intro/vslogo.png”

 

 

Een gedachte over “Migrating from gitbook to docsify.js

  1. Hi Tim, I share your concerns about GitBook’ s business model. It is also evident in the area of privacy. Docsify on your GitHub page results in 0 cookies and 3 third-party hosts (google fonts and unpkg – one could also get rid of): https://webbkoll.dataskydd.net/en/results?url=http%3A%2F%2Ftimdams.github.io%2Fcsharpbook%2F. Your GitBook page results in 6 cookies and 8 third-party hosts (google fonts, unpkg, firebasestorage, polyfill, gravatar, google-analytics and two other gitbook sites): https://webbkoll.dataskydd.net/en/results?url=http%3A%2F%2Ftimdams.gitbook.io%2F. You could even simplify your fallback if you change loadSidebar:true to loadSidebar: ‘SUMMARY.md’

    Like

Geef een reactie

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit /  Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit /  Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit /  Bijwerken )

Verbinden met %s

Deze site gebruikt Akismet om spam te bestrijden. Ontdek hoe de data van je reactie verwerkt wordt.

%d bloggers liken dit:
search previous next tag category expand menu location phone mail time cart zoom edit close