Repo in https://github.com/docsifyjs/docsify-ssr-demo
- Better SEO
- Feeling cool
Install now and docsify-cli in your project.
npm i now docsify-cli -DEdit package.json. If the documentation in ./docs subdirectory.
{
"name": "my-project",
"scripts": {
"start": "docsify start . -c ssr.config.js",
"deploy": "now -p"
},
"files": [
"docs"
],
"docsify": {
"config": {
"basePath": "https://docsify.js.org/",
"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:4000Publish it!
now -pNow, You have a support for SSR the docs site.
You can provide a template for entire page's HTML. such as
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>docsify</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/themes/vue.css" title="vue">
</head>
<body>
<!--inject-app-->
<!--inject-config-->
<script src="//unpkg.com/docsify/lib/docsify.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
<script src="//unpkg.com/prismjs/components/prism-bash.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-markdown.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-nginx.min.js"></script>
</body>
</html>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
}
}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'
}
})
renderer.renderToString(url)
.then(html => {})
.catch(err => {})