doc22940/template-docsify

DocsifyJS Template

A quickstart template for a markdown-based docs site

Features

• 📗 Make a modern docs site – using your awesome project's existing markdown files
• 🤩 Low code needed – needs just a single HTML file, which has a JS section you can configure for your own project
• 🚀 Easily hosted on GH Pages – a free static site with no build step needed

Purpose

How to use this project

• Create a new repo from the template and host it on GitHub Pages immediately. This is good for trying out Docsify or building a site project from scratch.
• Use this project as a base - follow instructions to download just the necessary files to your existing repo's docs directory
• View the live demo site to see what you'll get.

For more info on Docsify, see my DocsifyJS Tutorial. That covers intro to DocsifyJS, including installation, running and configuration. If you look at the repo, that has has more content and configuration than this relatively plain template site.

How to use Docsify in your projects

Copy files

Use one of the approaches below to setup Docsify in your own project.

A. Use this template

Create a new forked project based on this template by clicking the button below. You'll get a fork in your own repo.

You could start adding code outside of the docs directory, however this project is intended as a standalone docs site which can be configured for experimentation and used as reference.

B. Add Docsify to an existing project's docs directory

This will copy the contents of the docs directory from Github to the current folder - ideal if there is an existing project and you want to add to Docsify it.

1. Ensure you have curl command installed. Or use wget.
2. Navigate to your project's docs folder.

   cd my-project/docs

3. Download necessary files in the template docs directory to your project using this two-line command. (The -O flag will save the files locally, keeping the original filenames.)

   REPO_DOCS='https://raw.githubusercontent.com/MichaelCurrin/docsify-js-template/master/docs/'
   curl $REPO_DOCS\{_coverpage.md,_sidebar.md,.nojekyll,index.html,README.md\} -O

Customize

You can use your IDE to do find and replace across files.

Use the convenient replace.sh script in this repo to replace the template's values with your own.

1. Find the script.
   • If you used the template button, you've already got it.
   • If adding content to your existing project's docs, copy script to your project root (not docs directory)

     curl 'https://raw.githubusercontent.com/MichaelCurrin/docsify-js-template/master/replace.sh' -O
     chmod +x ./replace.sh

2. Modify the MY_ values then run this script to replace the template's value with your own.
3. Run the script from the project root against yours docs directory.

   ./replace.sh

4. The script can be deleted after you use it.

Now complete any remaining TODO items in the files.

Use template readme

If you clicked Use this template, followed the customize steps above, then the last thing to do is replace the project's README.md file with the template one.

mv README.template.md README.md

Then customize README.md as your own project.

Setup and run

Remote use

Whatever approach you use to setup a docs directory, you can use your own project or a forked template a site on Github Pages or Netlify.

There won't be any code to the site other than docs site, but this is still fine as a standalone online demo of Docsify that you can tweak.

Serve locally

Follow this gist so you can view the docs site on a local webserver.

Go to my DocsifyJS Tutorial - Serve locally for more info on what DocsifyJS is and how to use it.

License

Released under MIT by @MichaelCurrin.

• You can modify and reuse this project.
• Please link back to the original repo somewhere in your project if you use this in any way.
• Including an original license copy.
  • If you add content from docs to your repo (or click Use this template) and then modify for your own needs so your copy is no longer a template, then you don't need to include a license.
  • If you do fork this repo then use it as your own template, then this project's license and copyright notice must be included with the software. source. Copy LICENSE to LICENSE-source and then update your copy of LICENSE with your own details.

template-docsify's Issues

You can delete the About and Create a Docsify site sections if you create a new ...

template-docsify/docs/README.md

Lines 11 to 16 in be2a060

	<!-- TODO: You can delete the About and Create a Docsify site sections if you create a new project from this template -->
	## About
	This is a template for a simple but elegant docs site built on _Docsify_ which magically turns your markdown in your `docs` directory into a docs site.

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Update repo links and change license type if not MIT. -->

template-docsify/docs/README.md

Lines 5 to 10 in be2a060

	<!-- TODO: Update repo links and change license type if not MIT. -->
	[](https://docsify.js.org/)
	[](https://GitHub.com/MichaelCurrin/docsify-js-template/tags/)
	[](https://github.com/MichaelCurrin/docsify-js-template/blob/master/README#license)

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Update. -->

template-docsify/docs/index.html

Lines 10 to 15 in be2a060

	<!-- TODO: Update. -->
	<title>DocsifyJS Template</title>
	<!-- TODO: Update. -->
	<meta name="description"
	content="Documentation for the DocsifyJS Template project for making your own DocsifyJS docs site">

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Update username and repo name -->

template-docsify/docs/_coverpage.md

Lines 4 to 9 in be2a060

	[](https://GitHub.com/MichaelCurrin/docsify-js-template/tags/) <!-- TODO: Update username and repo name -->
	> A minimal quickstart template for a docs site <!-- TODO: Replace with your description -->
	<!-- TODO: Update to match your project's benefits/features. Git emojis work great here. -->

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

items in the files.

template-docsify/README.md

Lines 87 to 92 in be2a060

	Now complete any remaining TODO items in the files.
	### Use template readme
	If you clicked _Use this template_, followed the customize steps above, then the last thing to do is replace the project's README.md file with the template one.

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Update to match your project's benefits/features. Git emojis work great here. --...

template-docsify/docs/_coverpage.md

Lines 9 to 14 in be2a060

	<!-- TODO: Update to match your project's benefits/features. Git emojis work great here. -->
	- :hourglass_flowing_sand: Quickly setup an elegant, responsive site
	- :open_file_folder: Use your markdown docs as content
	- :sparkles: No compilation step and no templating syntax to learn
	- :nut_and_bolt: Built on [DocsifyJS](https://docsify.js.org/)

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Update.

template-docsify/docs/index.html

Lines 35 to 40 in be2a060

	var repo = 'https://github.com/MichaelCurrin/docsify-js-template'; // TODO: Update.
	window.$docsify = {
	name: 'DocsifyJS Template', // TODO: Update.
	repo: repo,
	auto2top: true,

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Replace the theme name or leave as is. -->

template-docsify/docs/index.html

Lines 16 to 21 in be2a060

	<!-- TODO: Replace the theme name or leave as is. -->
	<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
	<style>
	/* Fix issue on mobile devices where a custom cover image goes off the screen. */
	section.cover.show {
	height: 100%;

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Add prism-bash, prism-python, prism-javascript etc. as separate items to load hi...

template-docsify/index.html

Lines 60 to 65 in 2e757d3

	<!-- TODO Add prism-bash, prism-python, prism-javascript etc. as separate items to load highlighting for that language -->
	<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markdown.min.js"></script>
	</body>
	</html>

---

This issue was generated by todo based on a TODO comment in 2e757d3. It's been assigned to @doc22940 because they committed the code.

Complete with your own sidebar structure and enable sidebar in index.html - or d...

template-docsify/docs/_sidebar.md

Lines 1 to 6 in be2a060

	<!-- TODO: Complete with your own sidebar structure and enable sidebar in index.html - or delete this file. -->
	- [Home](/#docsify-js-template-homepage)
	- [Fizz]()
	- [Buzz]()
	- Foo
	* [Bar](...)

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Add prism-bash, prism-python, prism-javascript etc. as separate items to load hi...

template-docsify/docs/index.html

Lines 60 to 65 in be2a060

	<!-- TODO Add prism-bash, prism-python, prism-javascript etc. as separate items to load highlighting for that language -->
	<script src="//cdn.jsdelivr.net/npm/prismjs/components/prism-markdown.min.js"></script>
	</body>
	</html>

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Update with your values. -->

template-docsify/docs/README.md

Lines 1 to 6 in be2a060

	<!-- TODO: Update with your values. -->
	# DocsifyJS Template homepage
	> A quickstart template for a markdown-based docs site
	<!-- TODO: Update repo links and change license type if not MIT. -->
	[](https://docsify.js.org/)

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Update title -->

template-docsify/docs/_coverpage.md

Lines 1 to 6 in be2a060

	<!-- TODO: Update title -->
	# DocsifyJS Template
	[](https://GitHub.com/MichaelCurrin/docsify-js-template/tags/) <!-- TODO: Update username and repo name -->
	> A minimal quickstart template for a docs site <!-- TODO: Replace with your description -->

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Replace with your description -->

template-docsify/docs/_coverpage.md

Lines 6 to 11 in be2a060

	> A minimal quickstart template for a docs site <!-- TODO: Replace with your description -->
	<!-- TODO: Update to match your project's benefits/features. Git emojis work great here. -->
	- :hourglass_flowing_sand: Quickly setup an elegant, responsive site

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Remove on your copy of this template.-->

template-docsify/docs/_coverpage.md

Lines 19 to 20 in be2a060

	[Use this template](https://github.com/MichaelCurrin/docsify-js-template/generate) <!-- TODO: Remove on your copy of this template.-->
	[Get Started](#docsifyjs-template-homepage) <!-- TODO: Use ID of your homepage heading i.e. based on H1 of README.md - make sure this is DIFFERENT to the cover's heading -->

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.

Use ID of your homepage heading i.e. based on H1 of README.md - make sure this i...

template-docsify/docs/_coverpage.md

Line 20 in be2a060

[Get Started](#docsifyjs-template-homepage) <!-- TODO: Use ID of your homepage heading i.e. based on H1 of README.md - make sure this is DIFFERENT to the cover's heading -->

---

This issue was generated by todo based on a TODO comment in be2a060. It's been assigned to @doc22940 because they committed the code.