loading...
Cover image for You can now generate self-hostable static blogs right from your DEV content via Stackbit
The DEV Team

You can now generate self-hostable static blogs right from your DEV content via Stackbit

ben profile image Ben Halpern ・4 min read

We shipped a new feature which allows you to automatically generate and maintain a statically-hosted blog from your DEV posts. This effectively makes DEV a headless CMS for your own hosted sites.

You can already cross-post to DEV from your RSS feed, but this flips the model and presents some fascinating possibilities.

This is a collaboration with Stackbit, who specializes in the generation of static sites. They represent the first Oauth application that hooks into our platform, and we look forward to generalizing this feature for future collaborations.

Stackbit integrates with services like GitHub pages for storing the static files and Netlify for serving. It also allows you to choose between static site generators like Gatsby, Jekyll and Hugo. The whole process is magical.

Here is my generated site: https://royal-lime-c9165.netlify.com 🎉

And here is the repo where all the static content lives, generated automatically with a couple clicks, but editable thereafter to my heart's content...

Stackbit Fresh Theme

This site was generated by www.stackbit.com, v0.2.73.

Running Your Site Locally

  1. Install Hugo

  2. get "stackbit-api-key" from project menu in Stackbit dashboard

  3. run the following command to assign this key to STACKBIT_API_KEY environment variable:

     export STACKBIT_API_KEY={stackbit_netlify_api_key}
    
  4. run the following command to fetch additional site contents from Stackbit if needed:

     npx @stackbit/stackbit-pull --stackbit-pull-api-url=https://api.stackbit.com/pull/5d8c91658876b300134349f5
    
  5. Build the site and start the Hugo server with drafts enabled

     hugo server -D
    
  6. Browse to http://localhost:1313/




👉 View a Step-by-step guide on getting started

Why would I want to do this?

That's a good question.

For us, the founders of DEV, we consider it critical that we provide tooling to help folks better manage their data and online presence. We want to be a destination for sharing, teaching, discussing, and generally uplifting one another with our writing, but we don't want to monopolize this game.

There are a lot of reasons to be a part of the DEV ecosystem, but we don't want to make it hard to leave if you ever wanted to. Maintaining a mirror of your DEV content which you can syndicate here and elsewhere is a component of keeping web content from being wholly consumed by centralized monolithic platforms.

I wrote more about these ideas here:

And for a bit of extra info about our ethos and outlook, here's another relevant post from a few months back...

DEV is about a lot more than just blogging, so these generated sites are necessarily lacking. There's a reason we congregate here, but we firmly believe that a healthy ecosystem is one where personal website still have a place, and migrating platforms is made as simple as possible.

You do not need to be crossposting to a personal site. In fact, there are a lot of good reasons to centralize traffic to a destination like this where you can build up followers and gather reputation. But still, there may come a time where you want your content driven by your personal site.

We are on day one of this functionality. There may be some additional configuration required to get it just right so please view this as an exciting proof of concept, rather than entirely fleshed out feature. And if you encounter edge cases that break the functionality, let us know via an issue...

GitHub logo forem / forem

For empowering community 🌱


Forem 🌱

For Empowering Community

ruby version rails version Travis Status for thepracticaldev/dev.to Code Climate maintainability Code Climate test coverage Code Climate technical debt CodeTriage badge Dependabot Badge GitPod badge Netlify badge GitHub code size in bytes GitHub commit activity GitHub issues ready for dev Honeybadger badge Knapsack Pro Parallel CI builds for dev.to

Welcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Forem’s usability, scalability, and stability to better serve our communities.

What is Forem?

Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective See our announcement post for a higher level overview of what Forem is.

dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their…

If it's on the Stackbit side, we'll pass on the info for you.

The technical details

DEV uses markdown and is generally compatible with other markdown-driven frameworks. As you can see from the above GitHub repo, we do have custom rich content which does not render uniformly like markdown to HTML. Stackbit transforms this rich content into iframe, whereas we display this stuff inline via plain old HTML.

Stackbit acts as convenient and powerful piping, but has minimal lock-in because it integrates with other services and generates standard open source projects. This gives you a lot of additional freedom to break from the ecosystem.

This is an area where centralization of rendering control has efficiencies which are hard to replicate with this kind of thing, but it's a small detail compared with the overall positive benefits of this optionality for everyone.

It is possible that the implementation of this could change over time, depending on what ideas we all come up with together.

Going forward

In the future...

  • The functionality and config of this feature and similar ones will evolve to be more and more useful over time.
  • More apps will be allowed to build on our Oauth functionality. Feel free to contribute to the generalization of this feature via our repo.
  • We will launch more and more functionality devoted to transparency, data portability, and decentralization. We have a lot of big things coming.

If you want to get involved in any of our open source plans, Hacktoberfest is going to be the best time to do it...

Register for Hacktoberfest. We'll have lots of new guiding contribution material ready for the beginning of the celebration on October 1st.

In case you skimmed past it above, here are the instructions to get started with Stackbit.

Happy coding!

Posted on by:

ben profile

Ben Halpern

@ben

A Canadian software developer who thinks he’s funny. He/Him.

The DEV Team

The team behind this very platform. 😄

Discussion

markdown guide
 

We also just launched on product hunt if you want to see some pretty screenshots of the generated sites 😉

producthunt.com/posts/dev-stackbit

(we should probably add a product hunt liquid tag, right?!)

 

Some of the touches on Stackbit are so much more clean and beautiful than anything we produce here at DEV 😄

I hope soon enough we'll smooth out the details of our experience in the little ways like this. (If anybody knows a great designer DM me 😉)

But this also speaks to our ongoing interest in having underlying core mechanics that enable the correct behavior that our place in the ecosystem deserves... rather than focusing too heavily on the beautiful outer crust.

Compatibility with markdown and static site generators, a programmable API, ample tooling for data export, underlying follow mechanics and feed control that help folks control their experience... I'm proud that we find a way to prioritize the important, less visible stuff. I think it's paying off a lot lately.

 

This is amazing! It seems like it will save a bunch of time/hassle for setting up new blogs and hosting of content.

Congrats on launching it! 🎉

Any word about how this impacts SEO / changes how google looks at your own personal site? I'm not great with that stuff 😅

 

I was wondering if I'd have to go in and add canonical tags, or are they added automagically? AND if they are added, which site is considered canonical?

 

This is it. I was wondering why are you pushing a repo in each hour 🤔
Awesome feature! 💖

 

Launch day... Always one more thing that we forgot 😂

 
 

I guess you need to enable canonical URLs on your new website.

I checked your site and while this blog: royal-lime-c9165.netlify.com/posts...
doesn't have any canonical URL - it could potentially be marked as duplicate content because it's also hosted on: dev.to/devteam/you-can-now-generat...

 

It is possible to add canonical tags to your DEV.to post. Bit annoying to go through posts and adjust them but it should solve the problem.

 

I meant that if you look at the site that Ben's created - it doesn't have any canonical URL which is not good for SEO since Google could flag the content as duplicate!

Absolutely! But did he have a canonical URL front matter in his dev.to blog post?
I'm going to experiment a bit.

No, but it means that the original content is assumed to be from dev.to and not from anywhere else.

Whereas when Google will crawl the Netlify website, it will likely treat the content as duplicate from the dev.to blog

We’re working on better support for canonical URLs. It’s a matter of settling on how the configuration will work on the DEV side.

It’s been discussed, but we pushed it until post-release because we wanted some broader usability feedback.

It'd be great if the process could add the canonical URLs to the dev.to posts automatically.

This would allow org devs to post on dev.to and then generate a standalone site which appears to have the orig content, with the dev posts pointing to it. Is that currently possible (without adding the canonical urls manually)?

 

So this is amazingly appealing for sure. My biggest question at this point is who owns the data? Is there an easy export of all my markdown?

 

The data generated in this feature will land in a GitHub repo for you do do what you want with it.

Additionally on this topic, but unrelated to the feature, you can export your data from the Export Content area of dev.to/settings/misc

Glad you like it 😄

 

Where exactly is the data in the Github repo? I created a quick test and I don't see my posts anywhere. Just curious because I want to write an article/post a video on this and I am sure this is going to come up.

did you get an answer to this question ?

 

I signed up on here a few minutes ago because I just wanted to quickly comment on another article. And now I'm sitting here and discover what a wonderful philosophy is behind dev.to.

My reluctance with publishing on Medium had always been that they basically own your content and it will go down together with them. However, if you want others to find your content, it definitely helps to use a platform instead of a personal blog.

Dev.to seems to be a healthy middle-ground between discoverability and data-ownership. Nice. 👍🏻

 

This is pretty awesome!

Does it allow me to publish on the self-hosted site first and then on dev.to later?

 

That use case isn't 100% cleanly supported with this integration alone, though we'll work to make it function as expected.

I am pretty sure you could rig that up right now via this feature and some work with our API. We'll work to tie it all up nicely soon enough.

 

Cool.

Would be nice if this could be configured via publish dates in the front matter.

 

That is great. This is what I somehow manually did with my Gatsby portfolio using the rss feed. For sure it makes it so much easier now

 
 

Some of us may feel the need to express ourselves in mathjax. I wonder if this feature can be supported at least on a per-post basis?

If so, this would be a great solution to deploy to my personal website as well :)

 

Would it be possible to auto add the generated static site as the canonical URL?

 

This is not yet available, but it will be at some point soon. We have a handful of configuration details we need to work out.

 
 

I used Stackbit to migrate my Medium blog to a Gatsby site. It was fairly simple and painless, which is not what I expected of migrating off Medium 😅. Especially when I’d been posting to the blog on Medium once a week for between 1 and 2 years. Long story short, Stackbit is great and I’m excited to see this collab! 🙌✨✨

 

The post will appear first on DEV before appearing on my domain name.

Isn't that bad for SEO?

 

I guess it depends on the canonical? But I'm not sure.

 
 

Thanks Thanks Thanks. This is exactly what I wanted sometime back.

 

Just couple of days ago, I was thinking that I really need to publish on my own website versus just dev.to (or any other website). Amazing timing!

I already have personal website with jekyll hosted on netlify, but with custom theme. But it seems that stackbit is based on their own templating engine.

Are there any good tutorials/documentation on how to convert my own template to uniform?

Thanks again

 

@ben - Are there plans to allow someone to use the content under an Organization rather than under one author to build out a Stackbit site?

 
 
 
 

This is a real great news for the Dev community.🤟
It is completely impossible to say the opposite.

I already had the chance to exchange with you about this subject in this blog post.

For me, it is still the first step to make Dev.to the blogging platform we all dream of.
Now we can easily extract our content from Dev.to but we can't detach ourselves from a service as centralized as AWS.

Netlify, Stackbits are great tools but in my idea, I'd rather be able to host my own Dev.to "at home" without tracking and without advertising.

Is it still something you have in mind ?

 
 

I don't see Orchid in the dashboard, but maybe @ohadpr can weigh in on whether it is in the works.

 

Orchid isn't supported yet but soon folks will be able to contribute their own themes to build their DEV sites with and user any static site generator.

It would be amazing to get Orchid integrated into the Stackbit platform! I'm the developer behind Orchid, and I'd love to work with y'all to get Orchid supported by Stackbit. What would it take to get Orchid supported?

 

Orchid is still pretty new/small so I wouldn't expect it to be natively supported by most JAMstack tooling.

That said, connecting DEV as a headless CMS to Orchid natively shouldn't be too difficult, I've already been experimenting with this kind of abstraction with the wiki and shouldn't take too much work to get it supported for blog posts too.

 

I’d love to see a comment plugin for wordpress that allows the comments to be shared with the cross post in dev.to.

And it could be a potential revenue source for dev.to since comment plugins typically have a freemium model.

 

That's an interesting idea

 

So how will this work with canonical URLs? Does it automatically link to the newly generated site or is that something that needs to be done manually?

 

I just did this. Dead easy. Love that it has so many options for site generator. Not too familiar with Gatesby, but Hugo is right up my street.

One problem. The emoji that are supported here such as 🦾, aren't rendering on my site correctly, like here: daveparr.info/posts/posting-from-r...

Is there anything I can do about that?

 

I've been meaning to set something up for myself for ages. This seems quick and easy, I'l going to give it a spin.

 

This is awesome!! I wish I could post the dancing banana for this.

 

Is this still available?

I wanted to poke around with this, but I don't see DEV as an option in the CMS section 😢

 

I used stackbit to generate my site . I wish to edit some things on it. How do I edit it? thanks in advance. :)

 

This is surely interesting, congrats!