Server-Side Rendering


Repo in

Why SSR?

  • Better SEO
  • Feeling cool

Quick start

Install now and docsify-cli in your project.

npm i now docsify-cli -D

Edit package.json. If the documentation in ./docs subdirectory.

  "name": "my-project",
  "scripts": {
    "start": "docsify start . -c ssr.config.js",
    "deploy": "now -p"
  "files": [
  "docsify": {
    "config": {
      "basePath": "",
      "loadSidebar": true,
      "loadNavbar": true,
      "coverpage": true,
      "name": "docsify"

The basePath just like webpack publicPath. We can use local or remote files.

We can preview in the local to see if it works.

npm start

# open http://localhost:4000

Publish it!

now -p

Now, You have a support for SSR the docs site.

Custom template

You can provide a template for entire page's HTML. such as

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//" title="vue">
  <script src="//"></script>
  <script src="//"></script>
  <script src="//"></script>
  <script src="//"></script>
  <script src="//"></script>

The template should contain these comments for rendered app content.

  • <!--inject-app-->
  • <!--inject-config-->


You can configure it in a special config file, or package.json.

module.exports = {
  template: './ssr.html',
  maxAge: 60 * 60 * 1000, // lru-cache config
  config: {
   // docsify config

Deploy for your VPS

You can run docsify start directly on your Node server, or write your own server app with docsify-server-renderer.

var Renderer = require('docsify-server-renderer')
var readFileSync = require('fs').readFileSync

// init
var renderer = new Renderer({
  template: readFileSync('./docs/index.template.html', 'utf-8'),
  config: {
    name: 'docsify',
    repo: 'docsifyjs/docsify'

  .then(html => {})
  .catch(err => {})