How To Create and Publish a Jamstack Website with Stackbit and DigitalOcean App Platform

Introduction

Stackbit is a platform that allows you to collaborate on Jamstack sites, enabling your team to edit them visually instead of dealing with Markdown, git, or writing any code. You can take advantage of the benefits of the Jamstack, including better performance, tighter security, lower cost, and greater scalability, along with the convenience of inline visual editing. You can select from various themes to help get you started, which you can later customize. Once you have visually designed your Jamstack site and configured any optional integrations, you can deploy your site to the cloud.

In this tutorial you will create a blog site based on Next.js, edit its design and content, and publish it to the DigitalOcean App Platform.

Prerequisites

To complete this tutorial, you’ll need:

• A DigitalOcean account
• A GitHub account. If you don’t have one, you can create one on the GitHub signup page
• The DigitalOcean GitHub Application installed on your GitHub account. This application integrates your Github account with DigitalOcean App Platform, allowing you to create apps and websites directly from your code on Github and keep the latest version deployed

Step 1 — Creating a New Stackbit Project

To begin, you’ll need a Stackbit account, so visit Stackbit in your browser to create one if you don’t already have one. After you’ve created a username and password, you’ll receive a verification email. If you’re asked to connect your account to GitHub, you can skip that step for now; you’ll connect it later.

Once you’ve created an account, click the Build Your Project button or visit Stackbit directly to create a new project. In the first step of the process, you’ll be prompted to choose a theme to get started with your website. Stackbit themes include base designs for a variety of uses. For blogging you can use the Fresh, Ampersand, or Fjord theme, or if you want to showcase a portfolio along with a blog, you can use the themes Exto or Agency. For a statically-generated storefront you can start with Planty. To see what the design looks like and the pages included on a theme, click on the Live Preview button under each theme.

In this tutorial you will use the Ampersand theme to create a blog. Scroll down the theme page and select Ampersand.

With your theme selected, you still need to do some more setup, including connecting your account to outside services.

Step 2 — Connecting Your GitHub Account to Stackbit

In addition to the default pages and design, a theme contains a Static Site Generator and a Headless CMS, as shown in the following image. A static site generator creates the final HTML and assets for your website, and the headless content management system (CMS) defines how to store the content used for your site.

The next step of creating your initial site is choosing your static site generator and CMS. For this tutorial you can keep the defaults of NextJS for the static site generator and use a git-based CMS that will keep the content in git along with the site design.

Since you’re using a git-based CMS, you’ll need to authorize Stackbit to create a new repo on your Github account. Click the Connect button under the GitHub logo and follow the steps to install the Stackbit App to GitHub.

After your GitHub account is connected, the Connect button will be replaced with a drop-down to let you configure your GitHub connection, but you can leave the default settings. Next, you’ll connect your DigitalOcean account.

Step 3 — Connecting Your DigitalOcean Account to Stackbit

When you publish your website, it will be deployed to DigitalOcean App Platform. Click the Connect button underneath the DigitalOcean logo to authorize Stackbit on your DigitalOcean account.

After clicking on the Connect button, a popup will appear that will ask you to authorize Stackbit on your DigitalOcean account.

Now that your DigitalOcean account has been connected to Stackbit, check the box to acknowledge that you have already configured the DigitalOcean GitHub Application.

With the required accounts now connected, you can more forward to create your site.

Step 4 — Creating Your New Site in Stackbit

To create your site, click the Create Site button. You will be taken to a page that is showing that your new site is being built and configured, and a live preview environment is being set up.

Once the site is complete, a button labeled Launch Stackbit appears, which will enable you to make changes to your site.

Step 5 — Visually Designing and Editing Your Site

After the build process completes, you’ll be taken to the live preview environment, Stackbit Studio. Here you can make changes to the layout, images, content, and all the other components of your site by editing them in place with the visual editor.

Your team can independently collaborate on writing articles, uploading images, and creating new landing pages for marketing campaigns.

When you hover over an element, the cursor changes to indicate you can edit it, like this:

When the element supports markup, an editor appears. Click on the Intro Section and update the text in the editor.

When you’re done editing the text, click the Save button to return to the preview. The changes are immediatly reflected in the layout.

Next, you’ll edit one of the posts appearing in the homepage. Click on the image for the post titled “Basic Rules For Walking In The Mountains”. This will highlight the element in the preview as well as in the element list on the left. A tooltip will appear.

Click on the Edit Image button. It looks like a pencil drawing a line. An image selector will appear with all the assets your website already has. In this case, you’ll upload a new image to use.

You’ll replace the image with the same one with a Sammy overlaid. Download the image from DigitalOcean and save it locally.

Click the Upload button and a dialog box will appear where you can choose the image; select the Sammy image you just downloaded. Once the picture is uploaded, select it and click Save. You should see the image update instantly in the live preview.

Next, edit the post title. Click on it, and the tooltip should appear. Update the text with your own.

Once you’re done, click anywhere in the shaded area and the title will be saved. The homepage should look like this:

You can also edit posts in their own page. Click on the arrow next to Home to expand the page list section.

Here you can click on a page to edit it, delete pages from the template that you don’t need, and create new ones. Since this website is using a blog template, the content for the posts is stored in the /posts folder. If you expand it you can see all the posts, and by clicking on one you can edit. Expand /posts and click on basic-rules-for-walking-in-the-mountains.

This will load the page for the corresponding post.

As you can see, the title was updated, but the image used on the post page is the original one (without Sammy). This is because the post model used by the theme allows you to specify a different image for the blog feed than the single post. To see all the attributes you can customize on this page, use the element list on the left.

Editing elements in the list will change this post, but editing the elements in the Stackbit Ampersand Theme list below will affect the whole site. Next, change the date for the post. Click on the Date element:

Set the date to today’s date and notice that the post has been updated in the live preview.

You can also drop into the code and edit it directly (without local setup). In this mode you can edit your content using Markdown, as well as the theme elements. You’ll edit the copyright notice within the code editor, and then add a DigitalOcean Referral Badge to the bottom footer of your site.

Click on <> Code in the top menu. You’ll see a split view with a code editor on the left and a live preview on the right.

The code editor is open to the markup to edit the content of the blog post that you are previewing on the right. You’re not going to edit the post right now. Scroll down the live preview until you can see the footer with the copyright notice. Click on the notice and it will be highlighed and a tooltip will appear.

The left button takes you to the code that displays the footer, while the right button takes you to where the footer content is stored. Click the content button and look at the editor. The file config.json is now open.

Replace the content of footer.contentwith © Sammy. The live preview should update after a second to reflect the new value.

Now click on the left tooltip button, which will open the editor to the file that renders the footer.

Now add your referral badge in the box that contains the social media links. Copy the HTML for your unique referral badge inside the div that contains the social links. After the preview updates, it should look like this:

Continue to make any other edits you want to your site. Every time you make changes, your preview will update. When you’re ready, you’ll publish the site in the next step.

Step 6 — Publishing Your Site to DigitalOcean App Platform

Once you are happy with your changes in the preview, click on the Publish button in the top right corner of the Stackbit editor to publish directly to App Platform.

You can publish the whole site, or just one page, either now or on a schedule. In this case, leave the default settings as they are and click on Publish. Now you’ll switch to the DigitalOcean App Platform account where a new starter App has been created, and a build and deployment is currently underway.

Open the project settings by clicking on the gear icon next to the project name in the upper left. Then click on the Open button next to Connected Services > DigitalOcean:

This will take you to your project’s dashboard on DigitalOcean. If the deployment is still in progress, you should see a progress bar, with a link to the build logs as they’re happening.

If the build has already completed, you can also click on Deployments, which will show you the history of updates to your site.

Click on Details for the most recent deployment to see the build logs.

Click on Live App in the status bar, or the link right below the heading, to check out your new static site running on App Platform.

Conclusion

In this tutorial, you’ve built a new site with a Stackbit template, and deployed it to DigitalOcean’s App Platform. Stackbit’s visual creation, editing, and collaboration tools, combined with App Platform’s build and deployment capabilities, can get a Jamstack site ready to be shared with all the different stakeholders and deployed to the cloud in a short time.