Running a distributed blogging engine in a browser

1612543481786

88dc06c67cc9069093938e86af7b19dff38de3b971204175354bd4766e940c0c

Modern publishing platforms have an "app first, content second" philosophy. An application is built and deployed first, and the users automatically store their content in the centralized server, in a centralized format. This makes it difficult to move your content across platforms. For example, services like Medium.com or Facebook.com let you export your entire history, but you can't really do much with it other than browse through it privately. This is because the content format itself is centralzied.

To implement a publishing platform that's distributed, you must start from "content first, application second" approach, where the content is portable, and you can plug in your content into any application easily.

Offpress is a publishing platform that has the "content first, application second" philosophy. You can write once, store it in git, and distribute it anywhere, all inside your browser.

Try it here: https://offpress.app

This blog itself is powered by Offpress.

Using Offpress should be as easy as using any other blogging service, with one difference: Offpress does not store anything. Instead it lets you easily store and serve your site from your own Git repository.

Traditional CMS's store content on the CMS service provider's server, which means all requests need to go through the CMS server host's centralized server farm:

8413689e170587111a47d2252407528ab8ca1e4461a006ab81a5c15c6a44d709

On the other hand, Offpress lets you store your content in your git repository and serve your content by pushing the git to a CDN provider. Because of this portability, you can completely own everything you publish without getting locked into a service provider. All you need to do is push to a Git repository (such as GitHub), and it gets published instantly (such as through GitHub pages, Vercel, or Netlify), and when visitors open the site, they get the content from the nearest CDN edge node, which makes everything much more efficient and faster.

6167f38f19e4c2fe118ae6d9d46c7d1838a51711f0e935e732232568db712ffd

If you're aware of static site generators, this part is actually the same for all static site generators. Offbase is different because it lets you do all this directly inside your browser instead of running some code in your terminal. It has been impossible to do something like this with traditional static site generators without relying on a 3rd party. Also the learning curve was high and non-developers couldn't take advantage of this approach.

Offbase takes care of the git repository integration part seamlessly so you don't have to do anything. All you need is a GitHub account.

Currently Offbase only supports pushing to GitHub but will support other git repositories as the system matures.


How does it all work?

Here's a video where you can quickly understand how this thing works (Note that Offbase is the engine that powers Offpress, and in this video I simply mention Offpress as "blogging package"):

If you're familar with static site generators, Offpress is essentially a static site generator in a browser. Being able to edit, build, and deploy static sites directly inside a browser is a gamechanger because it solves the one problem traditional static site generators had: Only developers can use them because of its complexity. Unless you are a developer, you can't easily use static site generators because the setup process and understanding the structure is not so easy. Also, the deployment step is definitely not easy for developers since you have to do it all in the terminal.

Of course, there are some services that provide a better UX on top of the traditional static site generators, but all of these services operate a build server behind the scenes, which means at some point you will need to start paying them since that's their business model.

Offpress is a blogging engine that has zero learning curve AND you can own forever, without getting locked into a 3rd party, so you can use the system for free forever.


FAQ

Let me answer some potential questions:

1. How can it work without a server?

Offpress is powered by Offbase, which lets you build web apps that replace servers with Git, letting you build distributed web apps. Offbase itself is powered by many technologies, including:

  1. Isomorphic Git: Used to take care of all the git operations in the browser and implement a virtual file system.
  2. Service Worker: Used to implement a self contained backend that runs purely inside the browser, locally.
  3. Native ES Modules: Offbase is powered by vanila JavaScript and native ES modules. No complicated and bloated compile and build bundles. Everything works 100% browser native, using vanilla HTTP, JavaScript, and CSS.

Check out Offbase website to learn more.

2. Where is my site hosted?

Offpress by default uses GitHub pages (gotta start from somewhere!), so currently you can push to a GitHub repository to publish your blog. If you are not familiar with GitHub pages, it's a CDN service that GitHub provides for FREE, where you can simply push a static site HTML and it will serve the site for you.

Your site will be available at: https://<GITHUB USERNAME>.github.io/<REPO NAME>/blog/.

For example, if your repository name is https://github.com/skogard/myblog, the website will be published at https://skogard.github.io/myblog/blog/

3. Can I host my site somewhere else?

There are vaious CDN services that synchronize automatically with GitHub and host your site for you. Since these services are dedicated to static site web hosting and serverless architecture, they tend to have a lot of great features and most importantly, the site refreshes instantly (Unlike GitHub pages which takes up to a minute or so to refresh whenever you publish).

Here are some of the CDN services I recommend:

  1. Vercel
  2. Netlify

Couldn't include Cloudflare because it seems to be in beta.

4. How to do full width images and medium width images?

Offpress supports three width types for images: full, medium, and normal:

b7b2c6ba77f0a509beb685c544b17f4b08f750a94da7e9a59fa7066e3e0b448d

To turn an image into a medium width image, just select an image markup block and click the (( )) toolbar button. You'll see that it inserts a <div class='medium'></div> wrapper around the image block.

a4a779a439bd331e7ca8f5806165d28ef21bb9694a8b22b73dfc56ae556fed3b

To turn an image into a full width image, select the image markup and click the ((( ))) button, you'll see that it inserts a <div class='full'></div> wrapper around the selected block:

9851f0fb4e39eb36dc52358f68beb79878d1e8222c288b7979486dbae09ba65e

5. Can I see a preview before publishing?

Yes! In fact this is one of the cool things about Offpress. Every time you save a post, the markdown gets compiled into the final HTML version, and you can see the HTML by clicking the "preview" button at the top right corner:

0aa8d047becb95aeddc65e27653ddc612ecb96f8f1b1cb1dd28af39c82978ff8

This is powered by a technology called Service Worker, which powers Offpress. This lets you view HTML preview without having to run a server because Offpress--powered by Offbase--creates a self-contained virtual server environment directly in the browser. So when you press the preview button you will see the web page open in an offbase.org domain URL, but it's actually being served from your local browser!

6. Why do I do everything on Offbase.org instead of Offpress.app?

Offpress is powered by Offbase. When you build an application powered by Offbase, it gets downloaded to localstorage at Offbase.org. (This is necessary because of the technology called Service Worker, which Offbase uses, but this is a story for another day).

Basically, think of the offbase.org domain as your local computer where you download applications. Offpress is one of them. So you always go to offbase.org to use any offbase app. Here's a good analogy:

Windows : Powerpoint = Offbase : Offpress

7. Where can I find an Offpress documentation?

I will discuss below, but for now there is no documentation for Offpress. I wanted to release the Offpress application itself as a standalone first.

But it's coming. Soon.

That said, everything is already completely open, so those of you who are adventurous can actually build anything you want, including something like Offpress. Check out the Offpress source code. Just a hint:

8. How do I support custom domains?

You can do this in the settings page.

Go to the main page of your app and click the gear button at the top right corner (You'll see the "settings" tooltip when you hover over):

67b109440bccd65cb6cbf36d602b492eca85625e391bc2950a5bea3e61b28cb2

Then add your custom domain in the custom domain field:

16ff59cafcd160a65cd964967378fd2bdcdcd03775eabc20bac5e4a79b6fe7c6

9. How do I support RSS feed?

Go to the settings page and fill out the "website base URL" field. Make sure to end the URL with /, and include the full URL including the https or http part.

a9e57b7edf7c669d78cf518f696f869db5b40ac13b8f9c4419c0a24eaf4cdd59

10. How to customize the blog name?

You can do this inside the settings page too.


Next Steps

This Offpress release is the first step. I have many things on the to-do list including:

  1. Share some more examples: Offpress is powered by Offbase, and I plan to release a couple more apps to demonstrate Offbase.
  2. Release Offpress documentation: Offpress is extensible. For example you can easily build your own themes, build your own plugins, and even build your own custom CMS fork. You can already do all these, but to make it easier, I will try to document and release the API for Offpress.
  3. Release Offbase: Offbase is essentially an open platform that replaces centralized servers with distributed git. Offpress is just one possible application. Since everything is out in the open already, you can check out the Offpress source code and reverse engineer and build your own Offbase app, but that's not ideal for most people, so I will try to write some documentation for Offbase too.

I will openly share all of these developments over the coming weeks, so stay tuned.

To stay in touch, here are the options:

  1. Newsletter: https://docs.offbase.org/invite/ - I will send occasional newsletters with the blog posts.
  2. Twitter: https://twitter.com/skogard - I will start sharing the whole development process openly in realtime, and share examples and try to have open conversations on Twitter, if you're interested, follow me.
  3. RSS: https://blog.offbase.org/rss.xml follow the offbase blog with an RSS reader (yes, Offpress automatically generates RSS feeds too!)
  4. Discord: https://discord.gg/sa24u6eRh6 ask questions if you run into any trouble.

p.s. If you ever start blogging with Offpress, please make sure to tag me or tag #offpress and I can share them with others :)


powered by offpress