We had collection of close to 2000 videos (still growing) organized in a specific structure of folders and sub-folders. We needed to make them available for students and people interested in this content in a way that is searchable, easy to navigate and also free from distraction.
We tried the following and went through several iterations:
- AWS S3 for hosting the videos - easy to synch the local folder structure with remote but financially not sustainable for the project
- Youtube for hosting the videos and navigating - cannot customize the navigation and search
- Youtube for hosting and
Next.js
for navigation/search - good initial solution that worked as alpha launch - Youtube for hosting and
Docusaurus 2
for navigation/search - launched as beta version as the built-in features of Docusaurus reduced the need for several custom components that would otherwise need to be built
- Next.js
- Docusaurus 2, a modern static website generator - beta version (current)
- Algolia, a fast index-based site search - beta version (current)
- Vercel, for hosting the static site - alpha and beta versions
- Youtube, for hosting the videos and using the API to get the playlist content
- Node, for writing the scripts to synch the videos and generate the static content from the video structure
You can clone the repository and follow this guide to deploy the project with your own content.
Please follow this guide
- The organization of the videos and link with the associated playlists in Youtube is contained in the
content/tafsir.json
file. Currently, this file is updated manually. Depending on the size of your collection and it's structure, you could create this file manually. For this project, it was created by writing a script that parsed the folder where the videos are organized, including the children folders, and generated thejson
file - Whenever you add new videos to existing playlists or add new playlists, you need to update the
tafsir.json
file and run thescripts/synch.js
. This will create or update json files for each playlist in thecontent/lessons
folder. Please make sure that you create a.env
file in your local folder that contains the following variableYOUTUBE_API_KEY
that you can create by following this guide - Generating the site content with
scripts/generatemdx.js
:- The
videos
folder contains themdx
files and folders that power thedoc
plug-in ofdocusaurus
. The content of this folder is generated by running thescripts/generatemdx.js
script - This script also creates a
content/search.json
file that is used for the algolia search index. Currently, the file is uploaded manually to the algolia dashboard. In future, the script should update the algolia index directly using the algolia API - This script also creates
content/videocount.json
that is used on the home page cards to display the number of videos in each section
- The
- The
src
folder contains thepages
folder that powers your index file and acomponents
folder for any custom components that you build for the index page or anymdx
pages - To customize the settings of
Docusaurus
, use thedocusaurus.config.js
. This is explained in detail here
- If you added new video/s to existing YT playlists, run
scripts/synch.js
to update the json files incontent/lessons
- If you added new playlist/s, update the
content/tafsir.json
with theplaylistid
key in the appropriate section and then runscripts/synch.js
- Run
scripts/generatemdx.js
to re-create themdx
files - Upload and replace the
json
data for the algolia index withcontent/search.json
- Commit the changes to your branch and push. Ideally, you would want to push to the
dev
branch first and test and then merge to themain
branch to deploy to production (Follow this guide for deploying to Vercel)