This is a minimalistic responsive Help Center hosted on GitHub pages written in vanilla JS. It does not need the maintenance of any servers or databases and can be hosted entirely on ❤️ GitHub for free!
preview:
Includes a very few dependencies:
Feel free to customize by visual identity of your preference .)
To update <head> of your Help Center is recommended to follow HEAD - A list of everything that could go in the head of your document
Inspired by Githu Pages URL shortener.
Well, I want to convince my teammates that 99 global problems are possible to solve with GIT (or GitHub in this case)
"See, I told You! Github!"
-- Me
Also we wanted to launch some simple FAQ, with review process and team access but the most 3rd party tools are just limiting and cost us $$$. So, why not?
Here is a living example which we use on our own project & this is (?self-)help demo 🤔 of this project that might help you.
- The main feature is using a "database" in the form of GitHub issues and can be entirely hosted on GitHub pages.
- Thanks to that you don't need to hassle around with the team management and access control
- Gives your editor the ability to create markdown(HTML)-rich issues, comment on them, etc ...
- Fuzzy search thanks to fuse.js (What is fuzzy search? Generally speaking, fuzzy searching (more formally known as approximate string matching) is the technique of finding strings that are approximately equal to a given pattern (rather than exactly))
- Very simple - dummy setup. Written in vanilla old JS to work on IE, etc ...
- Responsive (simple css grid layout included)
- Look ma, the DARK MODE!!! 🌙
Please note there maybe still a few issues! Also for a full-featured help center experience, I do recommend you implement some live chat option. QAs are not enough sometimes. It also brings value to you - when you talk to customers! [thanks-captain-obvious.gif] Here is a short list of a few Live chat tools (no recommendations):
- zoho.com/desk
- helpscout.com
- purechat.com
- userlike.com
- olark.com
- zendesk.com
- intercom.com
- freshchat.com
- and so on ...
I have extracted all important variables inside index.html file. So all you have to edit to make it work is there.
-
Fork/copy/download the repo.
-
Set up your GitHub pages
-
Edit endpoint
var GITHUB_ISSUES_LINKto your repo issues inside theindex.html. For example
var GITHUB_ISSUES_LINK =
'https://api.github.com/repos/good-lly/gh-pages-help-center/issues';/ after the end of path!
- Edit two more self-explanatory lines under the endpoint.
var GITHUB_ACCEPTED_CREATORS = ['good-lly'];
var GITHUB_ACCEPTED_LABELS = ['approved'];Replace 'good-lly' with the list of your editors' team. The approved label is reserved to make only those issues visible for visitors. This is good feature when you have multiple team members and you want to avoid showing FAQ/Help before it's proof-read/valid/approved by your team.
-
Add new issue inside the GitHub. Add
approvedandtestfor example. -
Now you can edit the simple HTML to something like
<div class="col-4">
<h3>This is test</h3>
<div class="content-box" data-label="test" data-order="newest"></div>
</div>You can use a typical 12 column grid. Each content-box should have data-label and data-order.
Inside data-label you can specify multiple labels which should render. The order can be the newest and oldest for now. To list all issues as well as all uncategorized you can use reserved label names:
var UNCATEGORIZED_LABEL = 'restUncategorizedEntries';
var ALL_LABEL = 'allEntries';For example
<h3>All popular or Recent</h3>
<div class="content-box" data-label="allEntries" data-order="newest"></div>
<h3>Uncategorized</h3>
<div
class="content-box"
data-label="restUncategorizedEntries"
data-order="oldest"
></div>- That's it! Have fun! 🥳