Tutorials & Resources Host Your Novel for Free with ProgNovel

ProgNovel status:

A free and open-source WordPress alternative to host webnovel. This is a Progressive Web App project that has been in development for several years, but only become public recently because I focused on experimenting on new business models such as revenue sharing and built-in affiliate link marketing under the funding of Grant for the Web. As of right now, ProgNovel is still largely an experimental project but ultimately it aims to provide modern features you can only get on mobile apps while hosting it on the web just like regular websites.

Demo | Official Github Repo

Prerequisites:
- NodeJS installed on your computer (download from https://nodejs.org)
- Isn't required, but a little bit of knowledge using Github and using CLI (Command Line Interface) would help.

Installation:
Try it, it's free! Guide to self-host ProgNovel might change over time, so it’s best that you read it directly at https://github.com/prognoveljs/prognovel-app to avoid reading an obsolete guide. So instead, I’m using this thread to discuss things that I haven’t yet talked about openly elsewhere and do some troubleshooting.

Screenshot:
ProgNovel on desktop

ProgNovel on mobile

Spoiler: Why you would want to host your novel with ProgNovel

- As a Progressive Web App, ProgNovel is meant to be used as installable web app, which can be installed on mobile or desktop through browsers (Chrome and Edge will shows install option in the right side of the address bar). UI/UX for users who install or not installing ProgNovel can be different - such as users who install ProgNovel can skip chapter “ads delay” that can show up in newest chapters, and future versions of ProgNovel will add benefits for installed ProgNovel for better user retention. As a PWA, ProgNovel theoretically can be submitted to Play Store, as it already satisfies some of Lighthouse (a test backed by Google) in terms of performance and PWA score.
- You don’t need to sunset your existing novel site to try out ProgNovel, since recommended hosting platforms to host ProgNovel will provide you with a custom subdomain for free. For example, aside from https://demo.prognovel.com, I also have separate testing sites in https://prognovel.netlify.app or https://prognovel.vercel.app, or https://prognovel-app-1.pages.dev and I don’t pay anything to host them.
- ProgNovel is designed fully to host serialized contents like web novel or (in the future) manga/comic from scratch. This means there’s a lot of optimization in terms of page loading performance and hosting cost-efficiency been done to ProgNovel. (ProgNovel is built with Jamstack, or prebuilt architecture that’s known to be fast and cheaper to host, along with aggressive caching that allows most of the pages loads instantly, even if you’re in a free-tier account in the hosting platform). You won’t have to worry that your website will be slowed down or you will have access to limited features just because you don’t have money to buy premium servers.
- A few features, such as PWA “offline reading”, which is almost the same as offline reading in some novel mobile apps, almost impossible to be develop in normal WordPress site without having to pour $50k~$100k or more to also make specialized Progressive Web App from scratch or develop custom made mobile app for it. ProgNovel has this for free and built-in to the site without having site owners to configure anything.
- Most popular self-host platform that specialized to host web novel is Wordpress with Madara theme, which isn’t entirely free (though pirated version of it is freely available). ProgNovel, however, free from the ground up, with Apache 2.0 license which means you can use or modify the codebase to suit your need, in a non-commercial or commercial usage.
- ProgNovel has received some funding from Grant for the Web to explore and experiment on new business models with new browser technology Web Monetization API, such as built-in Revenue Share and Affiliate Marketing in ProgNovel. So if ads network or Patreon models somehow don’t sit right with you, you might want to try out these.

Spoiler: Hosting pricing details

ProgNovel is free and open-source, so that means you only have to worry paying hosting platforms without having to be limited in term of access to certain features, unlike how the thing is when you get free Wordpress websites. Many hosting platforms recommended to host ProgNovel offer generous free-tier, which might satisfy small to medium traffic sites without having to upgrade for premium plans. However, it is still a good idea to know the rough idea on how these platforms bill site owners past free-tier usage so that you can plan things ahead.

When it comes to calculating pricing to get ProgNovel web app running, you need to understand that this depends on the offerings of hosting platforms of your choice. Cloudflare Workers, for example, platforms to host backend for ProgNovel, offers 100k/day API hits for free-tier, with a hard limit of 1000 hits per minute. This can be roughly translated to 100k page views per day for the backend, although how it is calculated in practice might be skewed a bit, since some pages require more API hits and some pages can benefit from pre-cache to cut API calls cost. This calculation, however, doesn’t include KV Workers that is used to store contents on Cloudflare network, which might get billed separately although also has similar free-tier usage with Cloudflare Workers API calls. If you need more resources than that, or you want to remove per minute API hits limit, you can consult premium Cloudflare Workers pricing at https://developers.cloudflare.com/workers/platform/pricing

EDIT: In recent ProgNovel updates, you can skip hosting backend on Cloudflare Workers and host it statically with unlimited calls and bandwidth via Cloudflare Pages

You also notice that aside from Cloudflare Workers, you have to host the frontend of your site to a Jamstack hosting platform, platforms that specially used to host prebuilt sites like Gatsby, Hugo, Jekyll, etc. Your billings will be separate for backend and frontend, which isn’t a bad thing since you can also enjoy double benefits from generous free-tier offerings of these hosting platforms. Unlike traditional hosting platforms where you rent VPS with variety of CPU and RAM power, what you need to pay for Jamstack hosting platforms mainly is bandwidth and sometimes build quota if you regularly update your sites. Netlify for example, offers 100GB/month for free-tier users, which theoretically can translate roughly to 25k~100k users for months as long as you don’t rebuild your site too often (in which case users browser cache for ProgNovel site will nulled and they will have to redownload the site which will take more bandwidth from your hosting platforms). Recommended hosting platforms for ProgNovel frontend are Netlify, Vercel, and Cloudflare Pages.

Netlify is being the most fault-resistant among the three since it is the main platform to test ProgNovel in development. Have 100GB/month free bandwidth with further 400GB/month at $20/month. Any further bandwidth will cost $20 per 100GB.

In testing Vercel has slightly better performance than Netlify, especially when redownloading new version of the site where Netlify can be slow. Vercel has free-tier similar at 100GB/month but better premium bandwidth at 1TB/month with $19/month subscription, which likely able to satisfy sites with hundreds of thousands to millions of active users per month. However, any further than that is a pretty expensive $55 per 100GB, reset after the next month.

Cloudflare Pages, however, is the youngest of the three and the most interesting one. Cloudflare has the reputation of having an incredibly generous free pass for their massive CDN network to website owners over the years. Free-tier of Cloudflare Pages also the same, with offering of unlimited bandwidth that pretty much makes your frontend free forever. Cloudflare Pages also has the best performance after rough tests due the spread of their CDN servers around the world means that your users likely to connect their browsers to closer servers than what other hosting platforms offer. At premium pricing, Cloudflare Pages offers better build quota and more team members seat which most likely won’t be needed for the majority of ProgNovel site owners. From pricing point Cloudflare Pages is the best currently for hosting ProgNovel frontend, and might be ProgNovel’s default hosting platform in the future once it become more mature.

Spoiler: Caveats

- Right now, ProgNovel can only support plain markdowns to manage content, and likely not compatible with conventional headless CMS in the future.
- ProgNovel is still largely in experimental phase, so options to add ads still not yet available. This is mainly because I am not registered to any ads network at the moment so there’s really nothing ads network to test/develop with. Theme configuration also is very basic right now.
- RSS feeds also not available due to lack of conventional database in the backend makes it harder to generate feeds in ProgNovel, because ProgNovel generate content at once at the build time which in result giving date timestamp to chapters (that needed for RSS feeds) a bit complicated.
- ProgNovel isn’t yet battle-tested in production - many bugs likely to occur!
- ProgNovel is built for the next-generation webnovel era - although this is (I thought) a pretty cool slogan, also has implication on how ProgNovel is being developed. Many of technologies used in ProgNovel are experimental, such as Web Monetization API, Interledger, and ProgNovel is likely to adopt more experimental techs in the future. This is also how it is done when choosing browser technologies currently, making it technically and resourcefully difficult to make it compatible with old or small browsers. ProgNovel currently not using polyfills to support older browsers (because there’s no point since some crucial pieces can’t be polyfilled) and have the best experience with “Experimental Web Features” flags turned on to enable advanced browsers’ features such as CSS Houdini and CSS Scroll Timeline. As a rule of thumb ProgNovel is best used with popular browsers with version at most 4 years old - with PWA installation feature mainly works for Chromium browsers (other browsers might still support offline reading)

Bonus content:

 

Dang dude, this looks awesome. If only I knew Svelte and I hadn't started working on a custom backend + frontend like last year

One thing I'd advise though, if you're going for a more madara type custom site. The guide looks good to me, as a dev, but most of the people trying to buy/use it will probably find it too confusing. I see you provide an option to self-host, but maybe you can provide a service where you can host it for someone and create an admin panel where the admin can add novels(I feel like you have it already, but I don't see a screenshot of it on github) .

And last thing, your readme has an incorrect link for your subreddit(you missed an extra "d"): https://www.reddit.com/r/prognovel

 

Thanks! Svelte has been pretty good so far though I'm still stuck with Sapper instead of SvelteKit right now because Webpack.

I'm aware that self-host flow is a bit complicated for casual website owner at the moment. The original plan for self-host flow is to rely on Deploy buttons provided by hosting platforms like Netlify and Vercel, but somehow I got stuck and rely on manual forking/cloning repo at the moment. Probably will try again to simplify the self-host flow later on when I manage to combine the frontend and the backend (though it might get vendor locked to a certain degree because of relying on platforms' custom serverless functions).

I have such plan previously but decided not to since managing them will probably too much for a solo developer like me. Maybe I'll revisit the idea once the project is getting popular.

Will fix it. Thanks!

 

ProgNovel has a new version - v0.5.1

What's change:

• improve(ui): novel covers and fonts now properly cached so that it loads much faster and no longer disabled when offline.
• improve(ui): novel "Read now" button will disabled if link is not ready.
• improve(ui): shortcut for history tab now uses smaller webp files for novel cover whenever possible
• fix(ui): in novel page, fix awkward header pushing synopsis and other infos (if novel title is too long).
• fix(ui): Fix flash of wrong site title (in tab title and h1 header in homepage) upon first visit and reloading.
• fix(ui): novel banner images only partially cover the container on mobile.

 

This is the future of website. A serverless app that pull contents from CDN?
Please make the deployment of this cool app layman friendly.

 

Yes, simplifying the deployment is on the roadmap. At least for now I'm currently trying to merge backend and frontend to cut several deployment steps (though that might have to wait for a Cloudflare Pages functions beta feature to mature). I'm also still looking for a way to incorporate non-dev friendly deployment with Deploy button to ProgNovel so that the deployment can rely on more user-friendly GUI provided by Jamstack hosting platforms, but that got stuck with a bug for now - my thread for the bug even went unanswered for more than a month in Cloudflare's forum.

 

ProgNovel updated! - v0.6.0
Must use ProgNovel CLI v0.6.0 to support Admin GUI. Update it if you have already installed the CLI on your computer.

What's change:
There's not much visible changes in this version. However, it also brings very early support of admin dashboard where you can edit site and novel configurations in an editor (this is shipped due to many people requested for better deployment UI and lacks adoption for early testing users).

Note that this is only a wrapper UI for the CLI (Command Line Interface, something you do in Command Prompt), so you still need to download NodeJS and install ProgNovel locally through NPM. But the future goal for this admin dashboard feature is that it can offload ~90% non-developer friendly workflow during deployment and content management in ProgNovel.

Due to very early iteration of this feature, admin dashboard only supports editing configurations for site and novel, as well a button for building contents and publishing them to Cloudflare servers. Setting revenue share, memberships, themes/layout, plugins, and editing chapter in admin dashboard is still not supported.



How to use admin page:
The admin page will be available to all website using ProgNovel v0.6.0 under the route of "admin".
For example, https://demo.prognovel.com/admin (if you visited this site before, you'll encounter 404 page due to the nature of ProgNovel is using Service Worker with cache-first strategy, meaning it will be showing stale previous version and installing the new version in the background for the next visit. Wait for a minute for Service Worker to download the new version and reload the page. If you still seeing 404 page, head over to https://demo.prognovel.com and wait it for installing the new version before back to the admin page)

Once you get to the page you'll see the instruction to install ProgNovel CLI and connect to your ProgNovel project inside your local computer. Yes, it is connected to a project in your own computer - because despite it being called an Admin Dashboard it is actually an editor to manage your own ProgNovel project. That means you can start playing around with it even if you don't own a ProgNovel site.

That's it. See ya for the next update.

 

ProgNovel App and ProgNovel CLI both updated to v0.6.1

ProgNovel App v0.6.1 changes:
- feature(ux): enable navigating with keyboard arrow left and arrow right (previously disabled due to bugs)
- feature(ui): "adjust background contrast", new settings in chapter reading page
- feature(ui): "adjust background hue", new settings in chapter page (noticable in low contrast)
- feature(ui): allow dragging width of options/settings sidebar in chapter page
- fix(ui): fix bug on tablet where chapter settings not interactable
- breaking/minor: change IndexedDB keys of font-weight and font-size in chapter reading page settings (this purge previously saved of users' font size and weight preferences)

ProgNovel CLI v0.6.1 changes:
- feature: new command prognovel clear-cache or prognovel cc for short to clear cache in case of bug or upgrading to new CLI version
- feature: automatically insert credit for authors to chapters frontmatter that don't have credit for authors.
- New chapters from creating novel through CLI now don't have author in frontmatter by default

 

ProgNovel update v0.6.2

Changelog:
- performance: deliver AVIF images for novel cover for supported browser
- fix(ui/read page): remove gap below comment section when enabling colorized background
- fix(ui/read page): corrected reading page colorized background

This version brings early version of new AVIF image format to ProgNovel, which recent version of some modern browsers supports that cover almost 70% browser usage (Firefox, Chrome, Opera support AVIF, but currently not Edge and Safari). For browsers that don't have support for AVIF will get WEBP image format instead with JPEG fallback for non-WEBP supported browsers. For more information on AVIF image supports head to https://caniuse.com/avif.

As comparison, current file sizes for covel novel images generated by ProgNovel (that might vary and change in the future):
JPEG = 575KB; WEBP = 26KB; AVIF = 14KB.

 

ProgNovel update v0.6.3

Changelog:
- BREAKING CHANGE: now requires ProgNovel CLI v0.6.2
- internal: overhaul internal build system by migrating from Webpack -> Vite
- internal: migrate from deprecated Sapper to SvelteKit
- update to latest version of Svelte (that is not supported on Sapper + Webpack previously)
- performance: disable google analytic script if tracking ID not provided
- performance: lazy load CSS from carbon-components-svelte package
- performance: as a result of moving to SvelteKit, ProgNovel now delivers less JavaScript than before
- Update readme and guides to self-host ProgNovel for backend and the frontend to use deploy button instead (much simpler installation than before)

This version brings very big changes to the internal build of ProgNovel. This results in some improvement in more speed and efficiency in the development process. Using SvelteKit also opens more options of how ProgNovel can integrate more to edge-first platforms going forwards, not just the current platforms of choice like Netlify and Cloudflare, so it can benefit more as Svelte and Serverless ecosystem become more mature in the future. This migration is also crucial for the lifeline of ProgNovel, since the previous build setup is already not compatible with the recent and future release of some important packages and libraries like Svelte.

Also, there's an update to guide for backend and the frontend. You don't need to fork and download the repos manually like before, just click the deploy button and follow the guide for them.

 

ProgNovel update v0.6.4

Changelog:
- BREAKING CHANGE: requires ProgNovel CLI v0.6.4
- BREAKING CHANGE: requires ProgNovel Workers Backend v0.6.4
- feat: early version of news pages
- feat: text-to-speech synthesis feature
- ui: new novel highlight slider component in homepage hero
- fix: reading page and discussions page redirect or reloading not working
- fix: revshare gravatar profile not working
- fix(ui/readpage): adjust max-width for checkbox options in settings tab

 

ProgNovel update v0.6.5

Changelog:
- ui: loading skeleton shell now has wave animation
- ui(homepage): lazy components below hero section now use new skeleton shell instead of just "Loading..."
- performance(homepage): improve perceived loading speed by adding small static image placeholder to HTML
- fix(ui/homepage): novel highlight slider and news layout fix on mobile
- fix: reading page plugins such as `novel-trivia` and `authors-note` (Web Component) not loading

 

ProgNovel update v0.7.0

Changelog:
- ui(homepage): rework UI for homepage hero
- ui(homepage): new alternative novel list as default
- fix(mobile): fix bug where back button on reading page not working on mobile
- fix: fatal issue where build not generating HTML due to new SvelteKit adapter breaking update

 

ProgNovel update v0.7.1

Changelog:
- ui(homepage): remember novel list display preference
- ui(homepage): add slight gap for novel cover and subtitle in homepage slider
- ui(homepage): novel list hover animation now works as intended
- ui(options): slightly add black gradient in the bottom of option modal
- a11y: adjust news more link tap target size for better mobile accessibility
- fix(service worker): fix service worker crashing due to SvelteKit new breaking update
- fix(ui/homepage): prevent avatar in news item shrinking
- lock SvelteKit and its adapter version in ProgNovel's dependency package to prevent installing updates with breaking changes (at least until SvelteKit version 1.0.0)

 

looks nice but here are my two cents:
fix your padding to be consistent, fontsize needs to follow hierarchy plus needs consistency, font family is awful, lore disturbs the flow, tags in novel page on mobile needs to be fixed, updates on homepage overflows on smaller screen, search novel input is just overall awful try using fontawesome or other ffont library to keep consistency, setting in chapter on mobile is broken, instant affiliate is broken on smaller desktop screens, on desktop 1023px navigation disappears and u cant navigate,gradient usage is terrible.

 

Thanks for pointing them out.

 

ProgNovel update v0.7.2

Changelog:
- allow completely free hosting (not including domain and others) on CDN with hosting backend as static JSON on Cloudflare Pages platform
- security: static API allow significant security increase to the backend against attacks like DDoS since there's no actual server or database attackers need to target
- ui: remove site title on home page hero, and apply it to header and document title instead
- ui: rework search bar UI and UX, now can completely navigable with keyboard only
- ui(home page): adjust browse novel styling on mobile and tablet
- ui(home page/updates): rework styling on novel updates components to prevent overflow on mobile
- ui(home page): adjust width for Grant for the Web and Web Monetization banner on mobile
- ui(home page): give more height on feature highlight on mobile and tablet
- ui(novel page): clamp affiliate link width on tablet
- fix(ui): back button on discussions page error
- fix(ui): issue where tablet doesn't have navigation bar
- fix(ui): CSS error where back button on header missing on tablet
- fix(ui/read page): issue where sometimes read page menu closed when adjusting font size on mobile
- fix(build): novel pages not being prerendered

 

ProgNovel update v0.7.3

Changelog:
- ux: allow blur nav search on Esc key when no value entered
- ui: animate nav search on focus
- ui: change search font-family, add style to keyboard shortcut
- ui: improve nav search width on responsively across devices
- ui: add bookmark page for mobile and tablet
- ui: adjust bookmark item responsive width and height
- perf: prefetch highlighted novel in home page
- perf: prefetch selected/hovered search result
- perf: improve percieved performance for search result by using low resolution image placeholder
- ui: add skelethon shell to news page
- ui: add min-height to news page content before inserting comments
- fix: bookmark link directing to 404 page
- fix: 404 api fetch on novel page
- fix: fix discussions and news page 404 on Netlify and Cloudflare Pages
- fix: breadcrumb links error due to previous patch
- fix: discussions page error/locked in undefined thread

 

ProgNovel update v0.7.4

Changelog:
- ui: enable opt-in new header for installed PWA
- ui: slight adjustment to search placeholder
- ui: new Service Worker update UI for future releases

 

ProgNovel update v0.7.5

Changelog:
- ui: light theme fix colors being broken on home page

Side note:
I'm currently busy on my main project so ProgNovel updates will a bit sparse in the next few months.
Thanks.