Your first Areca website

In this guide you build a small website for a fictional bakery, Harbor & Pine Bakery. The site has a list of news posts and one page for each post. Editors write the posts in Areca. Your website shows the posts that are ready.

You do not need to know Areca yet. Each step explains the words it uses.

Prefer an agent-assisted setup? Follow Developer setup with Areca skills for the manual prerequisites, installation and handoff.

The big pictureCopy Anchor Link

Think of a restaurant.

• The CMS is the kitchen. Editors write the posts and check them.
• The site SDK is the waiter. It takes the posts that are approved and carries them to your website.
• Your website is the dining room. Visitors read the posts there.

A post starts as a draft. Visitors never see a draft. When an editor marks a draft as ready, it is approved, but still not public. When an owner presses Go live, Areca packs every approved post into a release. Your website is then built and deployed with those posts, and visitors see them.

What you needCopy Anchor Link

• Node.js 22.6 or newer. Node 24 is recommended. Check with node --version.
• pnpm, the tool that installs packages. Check with pnpm --version. If it is missing, run npm install -g pnpm.
• A running Areca CMS. Your agency may run one for you. To run your own on your computer, follow the quickstart.
• An agency admin account in the CMS. Only agency admins create clients and sites. Admins sign in with a code from an authenticator app.

The stepsCopy Anchor Link

1. Create the client and the site in the CMS.
2. Start the project and install the SDK on your computer.
3. Describe your content in a config file.
4. Send the content plan to the CMS.
5. Write posts and go live.
6. Pull the published content into your project.
7. Show the posts on your website.
8. Preview drafts (optional).
9. Deploy and publish for real.

Plan for about an hour and a half. Steps 1 to 7 are the core. You can stop after step 7 and still have a working site.