Teaching of Islam

Teaching of Islam is a personal project: an English-language education site that explains Sunni Islam clearly, with real sources, for beginners and anyone curious.

The hard part was technical: publishing dozens of long articles with Quran quotes, sourced hadith and exact Arabic honorific glyphs, while keeping the site fast.

The site writes from a Sunni point of view and says so plainly on the homepage. Its citation rules are strict: every Quran verse appears in Arabic with the Pickthall translation, and hadith come only from Sahih al-Bukhari and Sahih Muslim, each with its source. So the site had to show every quote cleanly, with no mistakes at all.

The content grew fast: long articles on the Five Pillars, the Quran, the Sunnah, the Seerah and inheritance, then a profile page for each prophet named in the Quran. It needed a clear structure so readers, and Google, could find their way around.

We built this custom website on Next.js with Payload CMS. The CMS gives full control over each article, and the pages stay static as much as possible so they load fast.

Payload works as the admin area: articles are written, fixed and published from the browser. Each article is made of blocks: paragraph, heading, list, callout, Quran verse, hadith and FAQ. Every block type has its own look, so a verse always looks like a verse, whatever the page.

The content is sorted into main topics: Allah, the Quran, Prophet Muhammad, the Seerah, the Sunnah, the Five Pillars, daily practice, Islamic law, and a page for people who are new to Islam. Today the site has 15 articles, 24 prophet profiles and one overview page for all of them, for 56 addresses in its sitemap.

The real puzzle was the Arabic honorifics that follow the name of Allah or the Prophet. They're rare characters: a whole phrase packed into one sign. The fonts Google hosts don't really draw them, so they showed up as small empty boxes. After several tests, we self-hosted the free Scheherazade New font, which does include these signs. We also tuned their size: big enough to read, without pushing the next line down.

Every page has a clean heading structure, full structured data (article, breadcrumbs, FAQ) and careful technical SEO. The visible breadcrumb trail and the one in the structured data come from the same source, so they can never disagree. An image sitemap also helps Google find each article's cover.

Every article ends with related reading, picked from the same topic first, and the text links to other articles where the subject fits. This kind of linking is part of content SEO: it helps readers go further and helps Google understand what the site is about.

For speed, our team tested the homepage with Google PageSpeed and fixed the real causes of slowness one by one. A setting meant for the admin area was making the browser load every page twice on a first visit, so we limited it to the admin area. The Arabic fonts moved to a lighter file format and are no longer preloaded on pages that don't need them. During this work, the homepage went from about 909 KB to 536 KB.

Next, the big header photos gave way to a text header on a green gradient. The text shows up as soon as the page arrives, with no image to wait for. Site search finds any article or prophet, and its code only loads when a reader opens it. The site can take dozens more articles without slowing down, and it keeps growing with new pages and fixes, the kind of ongoing work our website maintenance covers.