We built a static blog with Discourse as the backend

praise
1

We run a Discourse forum for a community of writers for a while. After some time they got motivated enough and would like to do collaborative blogging. Since they are already quite familiar with Discourse, we decided to build a static blog with metalsmith and React.js, pulling articles directly from the Discourse REST API. And it works great!

The static blog (Chinese) is hosted on GitHub pages. We’ve also added a comment list with React.js, using Discourse as the comment engine. It works like the comment system at http://blog.codinghorror.com/.

We find this approach very productive, because editing contents on GitHub could intimate many of our writers and editors, but they are comfortable with the nice UI of Discourse and the Markdown editor that is very responsive. Furthermore Discourse has a user permission model that is sophisticated enough for our editing procedure.

Overall we’re very happy with the results. The code of our blog is open source. We’d be very happy if someone finds it useful or has any comment or suggestion about it.

18 Likes
2

Very cool! Been hoping to hear from more projects like these. I really think clever integrations between static sites and Discourse is a far better solution than the consistently ugly “portal plugins” you see in other forums.

Two things puzzle me a little bit about your setup:

  1. Where does React fit into this? As in, what do you use it for?
  2. How exactly are you pulling articles from Discourse and posting them on Metalsmith? (if the original topic is edited, is the corresponding post automatically updated? I’m very interested to know more about that)
2 Likes
3

Can you provide more details about the comment system?

4

Glad you like it :slight_smile:

  1. We use React.js both for static/server-side rendering for the blog posts, and dynamic/client-side rendering for the comments. Specifically, metalsmith supports React.js for page templates, which is how the static HTML is built. The comment box is implemented as a React component, and rendered on a DOM element when the client loads the page (this is when the comment component queries Discourse API to retrieve the comments.)
  2. We use a set of scripts to pull articles from several topics in Discourse, and write the posts along with their metadata to the posts directory of metalsmith. Then we run metalsmith to update the blog. Currently we just periodically re-pull everything. A mechanism to notify a blog update whenever a new article is posted, whether with some form of webhook or through a message queue, would be optimal, of course.
3 Likes
5

So, I am still trying to run my first instance of Discourse, but I have been thinking a lot about this, your solution looks much cleaner than everything I could think of so far: https://meta.discourse.org/t/medium-like-articles-creation-for-users/32979/4

2 questions:

  1. I guess you can pull the first comment of each topic that has a specific tag?
  2. How does this play out with media? For instance, do you think it would be possible to integrate full width pictures and pic galleries into this?
6

We currently have no experiences in using tags. Our arrangements are like this: several categories are setup as publishing area and every topic there is pushed (pulled by our scripts) to the blog. Other categories are for discussions. Once an article is generated from discussions, it is moved to the one of the publishing categories. That way you get a clear picture of which topic is published on the blog, plus user permission control (only editors can post in publishing categories.)

As long as there is a way to access tag information in the Discourse REST API I assume it would be possible to filter out the topics with a specific tag.

As for the media, we are taking a quite naive approach of creating blog posts directly from Discourse API’s cooked attributes. So static media would be handled by the Discourse’s CDN, or like us with external linkes.

1 Like