{"id":16551150,"url":"https://github.com/michaelcurrin/docsify-js-tutorial","last_synced_at":"2025-03-21T10:32:06.785Z","repository":{"id":37897255,"uuid":"205015239","full_name":"MichaelCurrin/docsify-js-tutorial","owner":"MichaelCurrin","description":"Build a Markdown-based docs site using DocsifyJS and GH Pages 👩‍🏫 🏗 📒 🕸","archived":false,"fork":false,"pushed_at":"2022-06-14T19:20:24.000Z","size":1285,"stargazers_count":34,"open_issues_count":17,"forks_count":38,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-05-19T19:22:43.733Z","etag":null,"topics":["demo","docs-generator","docs-site","docsify","docsify-plugin","docsifyjs","docsifyjs-tutorial","documentation","github-pages","markdown","tutorial"],"latest_commit_sha":null,"homepage":"https://michaelcurrin.github.io/docsify-js-tutorial/#/","language":"Makefile","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MichaelCurrin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-28T20:14:19.000Z","updated_at":"2024-05-15T13:13:12.000Z","dependencies_parsed_at":"2022-08-20T01:41:38.305Z","dependency_job_id":null,"html_url":"https://github.com/MichaelCurrin/docsify-js-tutorial","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fdocsify-js-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fdocsify-js-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fdocsify-js-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MichaelCurrin%2Fdocsify-js-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MichaelCurrin","download_url":"https://codeload.github.com/MichaelCurrin/docsify-js-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244777980,"owners_count":20508824,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["demo","docs-generator","docs-site","docsify","docsify-plugin","docsifyjs","docsifyjs-tutorial","documentation","github-pages","markdown","tutorial"],"created_at":"2024-10-11T19:36:29.304Z","updated_at":"2025-03-21T10:32:06.261Z","avatar_url":"https://github.com/MichaelCurrin.png","language":"Makefile","readme":"# DocsifyJS Tutorial\n\u003e Build a Markdown-based docs site using _DocsifyJS_ and _GH Pages_ 👩‍🏫 🏗 📒 🕸\n\n[![GitHub tag](https://img.shields.io/github/tag/MichaelCurrin/docsify-js-tutorial?color=3271a8)](https://GitHub.com/MichaelCurrin/docsify-js-tutorial/tags/)\n[![License](https://img.shields.io/badge/License-MIT-3271a8)](#license)\n[![contributions - welcome](https://img.shields.io/badge/contributions-welcome-3271a8)](/CONTRIBUTING.md)\n\n[![Made with latest Docsify](https://img.shields.io/badge/docsify-v4-blue?label=docsify)](https://docsify.js.org/ \"Go to Docsify website\")\n[![Hosted with GH Pages](https://img.shields.io/badge/Hosted_with-GitHub_Pages-3271a8?logo=github\u0026logoColor=white)](https://pages.github.com/ \"Go to GitHub Pages docs\")\n\n\n## Preview\n\n\u003cdiv align=\"center\"\u003e\n    \u003ca href=\"https://michaelcurrin.github.io/docsify-js-tutorial/\"\u003e\n        \u003cimg src=\"/sample-1.png\" alt=\"Sample screenshot\" title=\"Sample screenshot\" width=\"500\" /\u003e\n    \u003c/a\u003e\n    \u003cbr\u003e\n    \u003cbr\u003e\n    \u003ca href=\"https://michaelcurrin.github.io/docsify-js-tutorial/\"\u003e\n        \u003cimg src=\"/sample-2.png\" alt=\"Sample screenshot\" title=\"Sample screenshot\" width=\"500\" /\u003e\n    \u003c/a\u003e\n\u003c/div\u003e\n\n\n## Getting started\n\n### Learn about Docsify\n\nFollow the online tutorial. Start with the basics or get to the menu customization and styling in later sections. Code snippets and recommendations are provided, so you don't have to spend a lot of time on all the possible options and features covered in the docs that you don't need to know.\n\n\u003cdiv align=\"center\"\u003e\n\n[![DocsifyJS Tutorial](https://img.shields.io/badge/View-Tutorial-2ea44f?style=for-the-badge)](https://michaelcurrin.github.io/docsify-js-tutorial/)\n\n\u003c/div\u003e\n\n### Use a template project\n\nWant to make a Docsify site? I have a template project you can use. It has enough structure and sample content to get you going.\n\n\u003cdiv align=\"center\"\u003e\n\n[![DocsifyJS Template](https://img.shields.io/badge/Generate-Use_Template-3271a8?style=for-the-badge)](https://michaelcurrin.github.io/docsify-js-template/)\n\n\u003c/div\u003e\n\nYou don't need to fork it - unless you want to contribute changes.\n\n\n## About the online tutorial 👩‍🏫\n\n_This repo is one of my most starred and most forked repos - thanks for supporting._\n\nThe [Docsify](https://docsify.js.org/#/) site has a great guide for beginners. But with all the configs and plugin options available, the guide feels more like a dictionary than a recipe for setting up a custom docs site that is focused on content and not adding too much code or configuration. So I created this tutorial to take beginners and advanced users through setting up Docsify in ordered steps - noting as well when steps are optional or what choices there are.\n\nThis tutorial takes you from basic site setup and content to optional configuration of styling, menus and plugins. It aims to cover common use-cases in a logical sequence, rather than covering everything you could do. You can also jump to a later step if you want to use that as a reference.\n\nIt also assumes you already have a docs directory in a project and you want to turn it into a docs site. The tutorial gives you some tips and pitfalls to avoid, based on the author's experience.\n\nThis project's own site is built on _DocsifyJS_ so serves as a good example. It serves from the `docs` directory. There is no main application to separate from `docs` directory, so serving from that directory is just convenient.\n\nSee also the [Nested Example](/nested-example/README.md) section on the repo for understanding links in Markdown and the sidebar.\n\n\n## Use a template 🖨️\n\nIf want to skip the tutorial and want a base project which has some sample data then go to the template repo linked at the top.\n\nThat is a template repo which was created to accompany this tutorial, so the layout and conventions will mostly be the same. The template only implements the basic steps from the tutorial.\n\nClick _Use this template_ button and follow the instructions in the _README.md_ doc.\n\n\n## Project aims 🎯\n\nSome background on how I arrived at DocsifyJS as a docs site builder.\n\nMy aims for building a docs site were as follows and Docsify meets all of them:\n\n- Add as little code and configuration as possible. Focus on the content, with a bit of styling.\n- Be easy to maintain.\n- Quick to get set up on existing projects.\n- It should be easy to repeat across many projects, without having to deal to have headaches with each. (Like a lot of boilerplate code, or installation issues, or drift as layouts/features are added to one and not the others.)\n- Have **no** HTML template/layout files to maintain.\n- Reduce dependencies and keep installation simple.\n- Light or no build step needed.\n\nThe docs site tool used here is [DocsifyJS](https://docsify.js.org/) which is a frontend JS library written in VueJS. But if you have never used before or never coded in JS before, you'll be guided through. The only JS you need to write in your config values. You also need to edit some HTML values and possibly write a YAML file for your navbar, which again is more configuration than code.\n\nThis project's tutorial covers the basics and provides minimal setup instructions. You can add the quickstart project to your **existing** docs folder. If you doc files are markdown files, you don't have to rename them and their formatting can mostly stay the same i.e. no frontmatter or special syntax and the pages still render well as plain markdown even. But some links may need updating since `/docs` folder is now the root of the app.\n\nUnlike static site builders like Jekyll or Hugo, you do **not** need to install or run a site generator or change the formatting or metadata of your markdown files. Your also don't need any separate config file - the configuration is handled in the _index.html_ page, which is also where dependencies are fetched in the browser and where the app starts.\n\n_Docsify_ works as a single-page application on this one page - data from your markdown files is pulled in and displayed within the _Docsify_ UI shell. There are no template layout files to manage and you can choose from some themes easily without things breaking like when you switch themes in other static site generators.\n\n\n## Contributing\n\nSee [Contributing](/CONTRIBUTING.md) guidelines.\n\n\n## License\n\nReleased under [MIT](/LICENSE) by [@MichaelCurrin](https://github.com/MichaelCurrin).\n\n- You can modify and reuse this project.\n- A copy of the license and copyright notice must be included with the software, according to this [MIT definition](https://choosealicense.com/licenses/#mit).\n- Please link back to this repo somewhere in your project.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelcurrin%2Fdocsify-js-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelcurrin%2Fdocsify-js-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelcurrin%2Fdocsify-js-tutorial/lists"}