/bible

This repo creates a minimal, mostly-static, progressive Bible hosted at minimalbible.com. The basic gist is that a web-scraper saves the results to database, which is then used to statically render each chapter of the Bible. Dynamic navigation is done with JavaScript by caching the books and chapters to JSON.

Primary LanguageJavaScriptMIT LicenseMIT

A Minimal Bible

Lighthouse Score

This repo creates a minimal, mostly-static, progressive Bible hosted at minimalbible.com. The basic gist is that a web-scraper saves the results to database, which is then used to statically render each chapter of the Bible. Dynamic navigation is done with JavaScript by caching the books and chapters to JSON.

To install the dependencies run npm install. To build the website, run npm run build. The static site is generated in the output folder. To run the site locally run cd ./output && python -m http.server.

To run the scraper, set the version in config.js and run npm run scrape.

🦾 Performance

The site is high performance. Google's Lighthouse tool scores the website as 100 across all categories (as of 5/21).

To optimize performance, the following strategy was used:

  • Pre-render everything besides search components to static html
  • Pre-cache pages from all outbound links with service worker
  • Minimize and cache all assets with Cloudflare DNS
  • Minimize the amount of external dependencies (like custom fonts and JS).

All generated files are under 10KB except output/assets/js/vue.js (101KB) and output/assets/read/chapter.json (122KB). These are both low-hanging fruit for performance enhacements.

🔬 Technology

The scraping and the building are decoupled through a SQLite database located in database/bible.db. Puppeteer is used for scraping. Node is used for building to limit the language, but it's just basic string concatenation. Vue is used for the navigation components because it feels good.

🧠 Inspiration