DEV Community: ohadpr

Stackbit Studio - The first complete platform for the Jamstack

ohadpr — Fri, 04 Sep 2020 16:48:54 +0000

When we started building what would eventually become the Stackbit platform, the Jamstack was still the JAMStack and the coolest parts about it were the technology that enabled it. It wasn’t very fun to use, and it certainly wasn’t for everybody.

Today, after tons of hard work and feedback, we’re thrilled to announce the general availability of Stackbit Studio, the first complete platform for the Jamstack. Stackbit Studio fulfils the promise of the Jamstack by unlocking its potential for anyone.

Marketers can edit content inline and see live previews of their changes without bugging developers
Agency and Freelance Web Developers can easily hand off projects to clients without having to worry about being on the hook for small changes and security issues
Teams can collaborate and quickly share updates with stakeholders, designers, writers and dev

and most importantly,

Anyone who wants to build websites can start their journey with the cutting edge, secure, and fast technological wonder that the Jamstack has matured into

Stackbit Studio - The live editing experience at the heart of our complete Jamstack platform

You can pick a theme and deploy a test site to play with the Studio, or watch a quick video walkthrough on YouTube. Here’s a quick tour of what is available in the Stackbit Studio, today:

Connected Tools

Stackbit is the first complete platform for the Jamstack. We work with your tools, and make the ecosystem accessible to everyone. When editing a site in the Studio, your headless CMS updates automatically with all the changes you made to text, images, and other on-page elements. Stackbit Studio works with Next.js, Gatsby, Hugo or Jekyll for your static site generators, and Contentful, Sanity, and even plain ol’ git for your headless CMS, with more SSGs, headless CMS and other integrations coming soon.

Advanced Control

We want to enable everyone to build creative and powerful Jamstack sites. We’re releasing several advanced features that make Stackbit Studio the ultimate environment to build in, whether you’re just starting out or have an existing site ready to grow.

Live previews: Any changes you make will be instantly previewed right then and there.

Inline editing: Now everyone can update content with a click.

Markdown editor: Markdown text goes on the left, and previews on the right. Easy.

Powerful Collaboration & Management

The Jamstack isn’t just for developers! Stackbit Studio enables stakeholders to collaborate freely on projects so they can edit with confidence while developers maintain peace of mind.

Integrated asset management: Upload and manage images quickly and easily.

Granular publishing controls: Publish at will, or schedule pages to ship right on time, anytime.

Build logs: Catch errors quickly with integrated build logs.

Portable content allows you to store your CMS content in git version control without committing to a particular CMS API.

The web is re-platforming. We see as much as a 12% Jamstack adoption rate in VC-backed startups, and a staggering 20% of Indie Hackers sites. It is now time to make it all usable for real people, in the real world of the web.

And it’s just getting started – we really ain’t seen nothin’ yet. New Jamstack tech is mushrooming constantly, each with its own merit and charm. We’re proud to offer a truly open platform that helps these amazing tools play together nicely and make the web better.

Stackbit. Make the web, better.

A List Of Themes And Starters For Jamstack Sites

ohadpr — Wed, 25 Sep 2019 19:35:11 +0000

https://jamstackthemes.dev/

We just launched a resource for everyone looking to build Jamstack sites. You can find themes and starters for a variety of static site generators like Gatsby/Hugo/Jekyll/11ty/etc as well as modern CMS like Contentful/Forestry/Sanity/DatoCMS/NetlifyCMS/etc.

The site is powered by a Github repo so feel free to submit new themes:

stackbit / jamstackthemes

A list of themes and starters for JAMstack sites.

Jamstack Themes

A list of themes and starters for the Jamstack and static site generators. https://jamstackthemes.dev

Submit A Theme

Anyone can submit an open-source theme by doing a pull request.

Fork this repo and create a new markdown .md file in content/theme folder. For example hugo-air.md.
Add the required front-matter as shown in the Example Theme below.
Submit a pull request

💡 Another option is to add a new file using the Github UI (click the "add file" button)

Example Theme

---
title: "My Theme Name"
github: https://github.com/username/repo
demo: https://www.demo.com 
author: authorname
date: 2024-03-18
ssg
  - Astro
cms:
  - No CMS
css:
  - Tailwind 
archetype:
  - Blog
  - Portfolio
description: This is an amazing theme and this is a small description about it!
---

# A simple starter kit for Astro.js

This theme is a lightweight starter

…

View on GitHub

There are currently 161 in the list and we hope to get closer to 500 in the coming weeks.

Here's our tweet announcing the site:
// Detect dark theme var iframe = document.getElementById('tweet-1176678632955273216-774'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1176678632955273216&theme=dark" }

Project Benatar: Publishing DEV-powered websites with Stackbit

ohadpr — Wed, 19 Jun 2019 18:55:26 +0000

Hi, I'm the co-founder and CEO of Stackbit. We're working on making it easy for developers to build modern websites in minutes. With all the recent interest in getting off Medium, especially within the tech community, I figured it's worth touching on some of the relevant shifts that are happening in the world of content editing and publishing. I also want to share some details on an experiment we're working on with the DEV community, to empower you to own your content and publish it where you'd like.

From monoliths to the modern web - The great unbundling

ohadpr for Stackbit ・ Jun 13 '19

#jamstack #ssg #cms #stackbit

The Monolithic CMS

Generally speaking, content, in our context mainly blog posts, used to be created, edited and presented in the same monolithic system. Wordpress is a great example and it's likely that many of you had a Wordpress blog at some point. Editing in Wordpress was a pretty decent experience for some time but it quickly became clear that it didn't do a great job in presenting your content. The main issue was page load times, but even just having editing and rendering on the same codebase created a massive security risk which the hackers of the world took advantage of at scale and continue doing so.

If we look at Medium we can see another example of how initially the platform worked well but then showed cracks of a different kind. Medium offers a great editing experience which people value greatly and they even delivered on the promise of traffic up to a certain point in time. The challenge emerged though when it became evident that Medium's interests as a publishing platform may not be aligned with those of the majority of the users writing on the platform. This started with eliminating the option of tying your own domain to your blog, continued with big DoNotTrack popups and some would say ended with the choking of the traffic firehose. The various Medium debacles also highlighted the value of having some ownership of where your content is published (e.g. by publishing to a website on your own domain) or at the very least having enough control over your data so that you can do different things with it.

You can see the disadvantages of assuming that the best place to create your content is also the best place/way to publish it. Let's look at some of the modern alternatives that have developed in recent years.

The emergence of the Headless CMS

Interestingly enough we've been witnessing the emergence of the Headless CMS, a category of OSS & SaaS products that focus purely on offering a CMS without much care or limitations on what you do with the content. Use it to statically generate a site with your content or drive content changes in a mobile app - it's all the same to the CMS. One of the greatest benefits of this unbundling is that the CMS stops being a security issue, you're much closer to owning your content and you can publish your content in one or more places of your liking.

Headless CMS come in two main flavor - those that store your content in a git repo as Markdown files and those that work more like a database with an API. If data ownership is extremely important you can even self-host an OS CMS. Learn about the top Headless CMS here - https://headlesscms.org/

If you aren't already familiar with Static Site Generators those are the tools we use to combine content from a source like a Headless CMS, with templates and generate a static copy of a website which you can then deploy to a service like Netlify. You may also want to read up on the JAMstack which is the architecture used to build these sites.

You can start seeing how these new workflows can enable you to publish your content how and where you like while creating it in a completely different environment.

DEV and Stackbit

Stackbit makes it extremely easy to create modern websites powered by a variety of data sources such as Headless CMS. Together with the fine folks at DEV we wanted to experiment with a couple of interesting workflows that give you more options with regards to how and where you edit and publish your content. The two approaches we're looking at are:

DEV as a Headless CMS

The DEV editor is awesome and we love it, plus a lot of you already use it to write content and publish on DEV. We want to enable you to have a personal website which is powered by your DEV content, or in other words think of DEV as Headless CMS where you mange the content you publish to your own site as well as to DEV.
Automated cross-posting to DEV from your personal blog

You can easily use Stackbit to kickstart your own personal blog powered by modern technologies and the CMS of your choice. We want to make it easy for you to automatically cross-post your content to DEV whenever you create or modify content via your CMS.

#projectbenatar Follow

We're excited about both of these approaches and would love to hear feedback and thoughts from the community about the kind of workflows you've perhaps setup for yourself or would love to see materialize. You can expect updates from the DEV and Stackbit teams over the next couple of weeks as we zero-in on the best approaches and build out these workflows. Our goal is to enable you to have more flexibility with where your content gets created and/or published.

From monoliths to the modern web - The great unbundling

ohadpr — Thu, 13 Jun 2019 18:56:24 +0000

The shift from building websites using monolithic projects like Wordpress to more modern approaches like site generators, Headless CMS and deploy workflows has been accelerating in recent years. I'm writing this post as I find myself telling the same story over and over and I wanted to write down my own observations and ideas and share those with you.

Prehistory

In the good old days we may have used a publishing tool like Wordpress on a shared VPS and life was simple, we leveraged OSS like WP/cPanel and paid little to nothing for access to commoditized hosting. While that made sense for a while it quickly became a sub-par way to run a a site, the main reasons being speed (rendering pages on each request) and security (WP was getting hacked every other day and sometimes twice a day). While we had kind of full control over how our content was being published and presented it felt like we were sacrificing important parts of the reading, writing and hosting experience.

I remember the day I got tired of running a slow WP site that constantly got hacked and decided to put a static snapshot of my site on S3. Things instantly became secure, fast and very simple... at least until it came time to edit my site and I realized that I had inadvertently or perhaps purposefully given up on having a CMS to edit and create content. For a while there I used Cyberduck which is a Mac FTP client that also supports editing content in S3 buckets to edit my site's HTML/CSS. No WYSIWYG, no Markdown, no previews, no drag and drop image uploading but something about this bare bones experience resonated with me. Its kind of how like camping with a limited amount of equipment can make one rethink their day-to-day setup back home.

This got me thinking about how to edit content and resulted in the prototyping of a bare-bones JS-based CMS that interacted directly with S3 and lived in your browser. Everything you needed to edit a page on the site came with that page and would just be written to S3 once you hit save. This lasted for longer than you would expect and kept me curious about how editing websites would happen outside of monolithic publishing systems.

Separating content editing and rendering

What followed in the eco-system was a conceptual breakdown of the older silo'd systems and the emergence of companies/products that made it easy to edit content without much regard to how and where that content is used. You may have heard of companies like Contentful, Sanity.io, DatoCMS and others who offer an API-based CMS or Forestry.io and NetlifyCMS which offer a git-based CMS. They all focus on the content creation and editing experience and not on how that content actually makes it to the web, mobile devices, etc. When coupled with static site rendering and deployment solutions like Netlify this separation results in superior security because the main attack vector (vulnerabilities in large OSS projects coupled with full visibility into where that software runs) goes away instantly. In other words Contentful is likely more secure than WP but more importantly attackers are unlikely to know you even use it to manage your content.

The emergence of a git-based pipeline

It's around this time that the evolution of front-end development frameworks started its rapid acceleration and with this complexity came the need, or rather the potential, to establish a front-end pipeline. Sites started getting generated with software like Jekyll, Hugo and later Gatsby and content got pulled in build-time from a myriad of data sources. This was wrapped with additional build tools and bundlers like Gulp, Webpack, etc. Luckily enough companies like Netlify built platforms to help us manage and think about these processes at a higher level.

Which is the Best Static Site Generator and Why?

Oyetoke Toby ・ May 30 '19

#go #discuss #webdev

The role that git and Github played in this rearchitecting is pivotal because your website turned from a VPS instance with a WordPress install on it to a git repo with webhooks into CI/CD services. This git repo contains configuration for your generator of choice, templates and sometimes even the content for your website in Markdown format. When using an API-based CMS your repo will contain all the configuration needed to pull the most recent version of your content from your CMS of choice.

JAMstack and the modern web

What do you call this process and the websites that come out the other side? Its not long ago that the term JAMstack was coined by Matt Biilman and Chris Bach as way to describe the shift from the older technology-specific stacks like LAMP to a more modern architecture where websites can be built from client-side JavaScript, reusable APIs and prebuilt Markup. The rapid adoption of the term JAMstack serves as a reminder that sometimes clearly articulating an approach that so many people are already curious about or playing with can help to rapidly accelerate the adoption of both the approach and the term.

Back to static with JAMStack: a paradigm shift for better UX and web performance

Boris Schapira ・ Feb 23 '18

#webperf #static #webdev

Harnessing the power of these new methodologies

Once we internalize the fact that content can be easily created in one place and used in one, or more, other places this opens up many new and interesting workflows. It is worth noting that the historic use of RSS feeds to synchronize and syndicate content from one place on the web to another can be seen as a telling sign of the need and desire to interconnect different content sources and publishing systems. The only thing that changed are the tools (webhooks, CMS APIs, GraphQL) and the new workflows the more elaborate workflows they enable.

No longer is your site being edited and rendered with the same code-base or even on the same server. The unbundling of the monoliths means we're using more appropriate software and approaches to tackle each one of the challenges that exist in creating modern websites. We're in 2019 and it feels like we're in a unique point in time where I believe the modern stack has been called out and adopted by many bleeding edge developers/shops but at the same time the tooling around this stack is still in its infancy.

When this realization hit me last year I sat down with a few friends to try and prototype some ideas that would try to combine the simplicity we're used to from consumer site-builders with the power of the modern architecture and ecosystem. These prototypes rapidly evolved and got to a point where we all agreed there's a big valuable problem that can be solved here. We called our company Stackbit because we like software stacks and bits, it also helped that the domain was kind of available. With Stackbit we want to make creating modern websites easy and accessible to everyone, and we're confident that ideas like Stackbit and others are pushing the whole category forward as they increase adoption by leveling the playing field.

If you'd like to learn more about the modern web ecosystem here are some links

https://www.stackbit.com
https://jamstack.org
"Why Static Site Generators Are The Next Big Thing", Matt Biilmann
"Delivering Modern Website Experiences: The Journey to a Content Mesh", Sam Bhagwat