Skip to content

Commit 1eebfed

Browse files
authored
Merge pull request #1981 from appwrite/init-day1
Init day1
2 parents 0065c1a + fb0cace commit 1eebfed

File tree

28 files changed

+1041
-11
lines changed

28 files changed

+1041
-11
lines changed

src/routes/(init)/init/(components)/announcement-banner.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@
1010
class="mx-auto flex w-full items-center gap-4 bg-[url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIyIiBoZWlnaHQ9IjY4IiB2aWV3Qm94PSIwIDAgMTIyIDY4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cmVjdCB5PSIyIiB3aWR0aD0iMiIgaGVpZ2h0PSIyIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjI0Ii8+CjxyZWN0IHg9IjYwIiB5PSIzMiIgd2lkdGg9IjIiIGhlaWdodD0iMiIgZmlsbD0id2hpdGUiIGZpbGwtb3BhY2l0eT0iMC4yNCIvPgo8L3N2Zz4K)] py-4 md:h-[76px]"
1111
>
1212
<div class="md:basis-1/3">
13-
<Badge class="ml-0">Init is coming <span class="text-accent">/</span> {initDates}</Badge>
13+
<Badge class="ml-0">Init is here <span class="text-accent">/</span> {initDates}</Badge>
1414
</div>
1515
<a href="/init" class="md:basis-1/3">
1616
<img class="mx-auto mt-2 hidden max-w-[200px] md:block" src={Lockup} alt="Appwrite" />
1717
</a>
1818
<div class="mr-0 ml-auto justify-self-end text-right">
1919
<a href="/init" class="text-primary group mr-0 ml-auto flex items-center gap-2 text-right"
20-
>Register now <Icon
20+
>Go to Init <Icon
2121
class="transition group-hover:-translate-x-0.5"
2222
name="arrow-right"
2323
/></a

src/routes/+page.svelte

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -134,16 +134,14 @@
134134
<div class="my-12 lg:my-[7.5rem]">
135135
<section class="container pb-0">
136136
<a
137-
href="/blog/post/init-may-2025"
137+
href="/blog/post/announcing-appwrite-sites"
138138
class="web-hero-banner-button mb-4"
139139
onclick={() => trackEvent('main-banner-button-click')}
140140
>
141141
<span class="web-icon-star shrink-0" aria-hidden="true"></span>
142142
<span class="text-caption shrink-0 font-medium">New</span>
143143
<div class="web-hero-banner-button-sep"></div>
144-
<span class="text-caption web-u-trim-1"
145-
>Announcing Init: a new era begins</span
146-
>
144+
<span class="text-caption web-u-trim-1">Announcing Appwrite Sites</span>
147145
<span class="web-icon-arrow-right shrink-0" aria-hidden="true"></span>
148146
</a>
149147
<Hero>
@@ -153,10 +151,9 @@
153151
>
154152

155153
<svelte:fragment slot="description">
156-
Build your entire backend within minutes and scale effortlessly using
157-
Appwrite's open-source platform. Add Authentication, Databases,
158-
Functions, Storage, and Messaging to your projects using the frameworks
159-
and languages of your choice.
154+
Build your entire backend within minutes and host your site, all within
155+
Appwrite's all-in-one platform. Authentication, Databases, Functions,
156+
Storage, Messaging, and Hosting.
160157
</svelte:fragment>
161158
<div class="mt-8 flex flex-col gap-4 sm:flex-row" slot="cta">
162159
<Button
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
layout: post
3+
title: "Announcing Appwrite Sites: The open source Vercel alternative"
4+
description: This is Appwrite's biggest release to date, and it will change the way you build with Appwrite forever. Develop, deploy, and scale your applications directly from Appwrite. Your all-in-one cloud platform.
5+
date: 2025-19-05
6+
cover: /images/blog/sites-announcement/sites-cover.png
7+
timeToRead: 6
8+
author: matej-baco
9+
category: product,init
10+
featured: true
11+
callToAction: true
12+
---
13+
14+
You love using Appwrite to power your backend, but when it’s time to actually *ship* your website, you’re bouncing between tools, platforms, and extra accounts. That ends today.
15+
16+
Introducing **Appwrite Sites**.
17+
18+
A new Appwrite product that lets you deploy and host your websites and web apps *right inside Appwrite*. No more juggling services. No more gluing things together. No more multiple subscriptions. Just build, deploy, and go live. All in one place, and it's 100% open source, the kind that lets you (really) self-host and (really) own your data.
19+
20+
# The all-in-one cloud platform
21+
22+
Appwrite has always been about giving you the tools you need to build fast, secure, and modern apps. However, while Appwrite has always worked hard to deliver a great backend experience, one big piece was missing: web hosting.
23+
24+
Until now, you had to rely on external platforms like Vercel or Netlify to get your web app live. That meant extra configs, more integrations, and one more invoice to worry about. With Sites, that gap is gone.
25+
26+
The best part: **Appwrite is a fully open-source platform to offer both frontend hosting and your entire backend. All under one roof.** From static sites and SSR apps to databases, authentication, storage, messaging and serverless functions, you can now build, deploy, and scale your entire app stack using just Appwrite.
27+
28+
![Sites on console](/images/blog/sites-announcement/sites-console.png)
29+
30+
# Important Sites features
31+
32+
Building Sites as part of the Appwrite ecosystem was a deliberate choice to deliver a seamless experience from crafting your backend to deploying your web apps and websites. To ensure your usage of the platform feels consistent and robust, we set out to match the high standards of other Appwrite products when developing Sites over the past year.
33+
34+
We’ve introduced several critical features to elevate the hosting experience. Helping you scale efficiently, keep data secure, and deliver lightning-fast performance.
35+
36+
## What’s part of Sites?
37+
38+
- **Static hosting**: Ideal for single-page applications (SPAs), landing pages, documentation sites, and any project that compiles down to static files.
39+
- **Server-side rendering (SSR)**: Full support for frameworks like Flutter, React, Next.js, Nuxt, SvelteKit, Astro, Remix, and more right out of the box.
40+
- **[Git integrations](docs/products/sites/deploy-from-git)**: Connect your GitHub repository to enable automatic deployments on every push.
41+
- **Deployment previews**: Get a unique preview URL for each pull request—review, test, and merge with confidence.
42+
- **Global CDN**: Distribute your content worldwide with a powerful content delivery network to ensure low-latency access from anywhere.
43+
- **DDoS protection**: Built-in protection mechanisms to help safeguard your apps from denial-of-service attacks.
44+
- **[The Appwrite Network](docs/products/network)**: Take advantage of a growing number of cloud regions, Points of Presence (PoPs), and edge network capabilities, reducing latency and enhancing performance globally.
45+
- **[The Appwrite DNS](docs/products/network/dns):** Appwrite provides a dedicated DNS (Domain Name System) service through its `appwrite.zone` nameservers to help you manage domain records for your applications.
46+
47+
All this is managed from your Appwrite Console or CLI, and deployable in both [**Cloud](**https://cloud.appwrite.io/) and **self-hosted** environments.
48+
49+
# Sites templates: One-Click websites
50+
51+
![site-templates](/images/blog/sites-announcement/sites-templates-add.png)
52+
53+
To make building your website even easier, we created ready-to-use customizable templates that you can deploy with one click, directly from Appwrite. Because not every project needs custom design, and not every team has the time to build from scratch.
54+
55+
We partnered with open-source maintainers like Docusaurus, ReactAdmin, and many more to bring you diverse templates. We will continue to add more templates to ensure we have everything you need.
56+
57+
From polished landing pages to waitlist forms and simple promo sites, Sites templates let you go live faster. Read more on how to get started with [Sites templates in our docs](/docs/products/sites/templates).
58+
59+
# How to get started with Sites
60+
61+
![create-first-site](/images/blog/sites-announcement/create-first-site.png)
62+
63+
## Cloud
64+
65+
Getting started with Sites Templates takes just a few clicks:
66+
67+
1. In the Appwrite Console's sidebar, click **Sites**.
68+
2. Click on the **Create site** button.
69+
3. After clicking on **Connect Git repository**, select your repository.
70+
4. After connecting to GitHub, (optionally) add a name and site ID.
71+
5. Verify that the correct framework is selected.
72+
6. Confirm the install command, build command, and output directory in the build settings. To learn more, visit your preferred [framework quick-start](/docs/products/sites/quick-start#framework-quick-starts).
73+
7. Add any environment variables required by the site.
74+
8. The site will be created, and a build will begin. Once the build is completed, you'll have created your first site. You can use your site's **domain** to access the deployment.
75+
76+
We have added quick starts for popular frameworks to help you set up faster with your preferred framework, with more to come. As of today you can follow quick starts for [Flutter](/docs/products/sites/quick-start/flutter), [Nuxt](/docs/products/sites/quick-start/sveltekit), [Next.js](/docs/products/sites/quick-start/nextjs), Angular, [SvelteKit](/docs/products/sites/quick-start/sveltekit), [Remix](/docs/products/sites/quick-start/remix), [Astro](/docs/products/sites/quick-start/sveltekit), [Vue.js](/docs/products/sites/quick-start/sveltekit), [React](/docs/products/sites/quick-start/sveltekit), and [Vanilla.JS](/docs/products/sites/quick-start/sveltekit).
77+
78+
## Self-hosted
79+
80+
If you prefer to use Appwrite Sites open-source version, you can visit the [self-hosting documentation](https://appwrite.io/docs/advanced/self-hosting) and review the [Appwrite repository](https://github.com/appwrite/appwrite).
81+
82+
# Appwrite Sites pricing
83+
84+
Appwrite Sites is free to use until July 1st, 2025. We will inform you before introducing pricing so that you know well beforehand and have no surprises.
85+
86+
# One platform to build, host, scale
87+
88+
Like many developer tools, we are here to make you more productive. By bringing hosting into Appwrite, you spend less time on setup and more time on what matters: building. Fewer moving parts means fewer things to break, and everything works seamlessly with your existing Appwrite services like Databases, Functions, Storage, and Auth. It’s Appwrite’s goal to improve your time to production. We make you move faster with [Sites](/products/sites).
89+
90+
Sites will be available on both **Appwrite Cloud** and **self-hosted** deployments.
91+
92+
Spin up your first site from the Console or [CLI](/docs/tooling/command-line/sites) and go live in minutes. No more stitching platforms together, no more waiting for deploys, just fast, integrated shipping.
93+
94+
# More resources
95+
- [Appwrite Sites docs](/docs/producst/sites)
96+
- [Appwrite compared to Vercel](/blog/post/open-source-vercel-alternative)
97+
- [Appwrite Sites product tour](https://youtu.be/VtDe6hDw91k)
98+
- [Appwrite Sites video announcement](https://youtu.be/0cERQxFjTW4)
99+
- [Appwrite Discord server](/discord)
Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
---
2+
layout: post
3+
title: "Building with Appwrite Sites templates"
4+
description: To make it easier, and a lot faster to build a website, we have added templates. From e-commerce stores, to documentation, you can get started with a couple of clicks.
5+
date: 2025-19-05
6+
cover: /images/blog/sites-templates/templates-cover.png
7+
timeToRead: 9
8+
author: ebenezer-don
9+
category: tutorial
10+
featured: false
11+
callToAction: true
12+
---
13+
14+
Your web application only provides value when it is live and accessible to users. Appwrite Sites simplifies deployment, allowing you to launch modern, production-ready websites directly from your Appwrite console. With built-in templates, you can quickly deploy complete websites that include integrated version control, environment configuration, and secure global delivery, all without complicated setup or infrastructure.
15+
16+
In this guide, we will walk through the process of deploying your website using one of Appwrite's pre-built templates. We'll build an ecommerce store for this example, but the process is the same for any other type of site.
17+
18+
# Opening the Sites page
19+
20+
After signing into your Appwrite console, look at the sidebar on the left. Under the **Deploy** section, you will find the **Sites** button.
21+
22+
Clicking it opens the Sites page. Here, you will see the **Sites** tab selected by default. Click **Create site** to start the deployment process.
23+
24+
![Sites Concole](/images/blog/sites-templates/sites-templates1.png)
25+
26+
At this point, Appwrite offers two options: **Clone a template** or **Connect a repository**. For this guide, we will focus on cloning a template, which lets you quickly set up a site based on a pre-built project.
27+
28+
![Clone or connect Git](/images/blog/sites-templates/sites-templates2.png)
29+
30+
# Choosing a template
31+
32+
When you select **Clone a template**, Appwrite displays a library of available templates. You can browse through them by scrolling, or you can narrow down the selection using the filters on the left side of the screen.
33+
34+
Templates can be sorted by framework. If you are looking for something specific, you can check one or more framework options like Next.js, Svelte, Astro, and others.
35+
36+
Templates can also be sorted by use case. The available categories include:
37+
38+
- Blog
39+
- Documentation
40+
- Ecommerce
41+
- Events
42+
- Portfolio
43+
- Starter
44+
45+
You can also use the search bar above the list to find a template by name. For this walkthrough, we'll use the **Store template** under the Ecommerce category, so if you don't see it right away, you can search for it.
46+
47+
![Search templates](/images/blog/sites-templates/sites-templates3.png)
48+
49+
Clicking the template will open a new page where you can configure your new site.
50+
51+
## Setting up site details
52+
53+
Once you have selected the template, you will be prompted to enter basic details for your site.
54+
55+
You will need to provide a **Site name** and a **Site ID**. The Site ID becomes part of your site's URL, so it should be lowercase and use hyphens if necessary.
56+
57+
![set details](/images/blog/sites-templates/sites-templates4.png)
58+
59+
At this stage, you can choose whether to connect your repository now or later.
60+
61+
If you choose **Connect your repository**, you will be able to either create a new repository based on the template or link it to an existing one.
62+
If you prefer to skip this step for now, you can choose **Connect later** and connect your version control later using the CLI or through the settings page.
63+
64+
If you opt to connect a repository immediately, you will see the following options:
65+
66+
- Select whether to create a new repository or connect to an existing one
67+
- (Optional) Choose a GitHub organization if you have access to multiple organizations
68+
- Name your repository if you are creating a new one
69+
- Decide whether to keep the repository private by ticking the checkbox
70+
71+
Once your settings are ready, click **Create** to move to the next step.
72+
73+
# Configuring deployment settings
74+
75+
After creating your site, you will be taken to the deployment configuration screen.
76+
77+
Here, you will select your **Production branch**. This is the branch that Appwrite Sites will use for deployments.
78+
79+
You can optionally set a **Root directory** if your production build is inside a specific folder within your repository.
80+
81+
There is also a **Silent mode** option. If enabled, Appwrite will not automatically create comments when pushing changes to the connected repository.
82+
83+
Next, you will configure your **Environment variables**. Two variables will already be present:
84+
85+
- `PUBLIC_APPWRITE_ENDPOINT`
86+
- `PUBLIC_APPWRITE_PROJECT_ID`
87+
88+
You can edit these values if needed, and you can add more environment variables if your application requires them.
89+
90+
Additionally, you can define the domain for your site, using the Appwrite Sites domain.
91+
92+
![Configure](/images/blog/sites/templates/sites-templates5.png)
93+
94+
After reviewing your configuration, click **Deploy**.
95+
96+
# Monitoring the deployment
97+
98+
Once you initiate the deployment, you will be taken to a progress page where you can monitor the build and deployment in real time.
99+
100+
The logs will show you the different stages of the build process.
101+
Depending on the size of your template and the dependencies involved, this process can take anywhere from a few seconds to a few minutes.
102+
103+
![Deploy](/images/blog/sites-templates/sites-templates6.png)
104+
105+
When deployment is complete, Appwrite will display a success screen showing:
106+
107+
- A preview image of your live site
108+
- The domain name
109+
- The size of the deployment
110+
- Global CDN status (should show **Connected**)
111+
- DDoS protection status (should show **Connected**)
112+
113+
![Build](/images/blog/sites-templates/sites-templates7.png)
114+
115+
You will also see a **Visit site** button that you can click to view your newly deployed website.
116+
117+
# After deployment: Next steps
118+
119+
After successfully deploying your site, Appwrite provides a few options to help you continue setting up or expanding your project.
120+
121+
You can **Add domain**, connecting an existing custom domain you own or registering a new one through the console.
122+
123+
You can **Share site**, allowing you to collaborate with your team by sharing access to your project.
124+
125+
You can also **Open on mobile**, previewing your live site directly from a mobile or tablet device to ensure everything looks and functions as expected across different screen sizes.
126+
127+
# Wrapping up
128+
129+
Deploying a site using templates on Appwrite Sites provides a straightforward path from project setup to a live deployment. By using a template, you can quickly spin up a professional-quality application without needing to configure hosting infrastructure manually. Connecting a repository, setting environment variables, and defining your site domain are all built directly into the console, allowing you to move from idea to launch with clarity.
130+
131+
Once your site is deployed, you can continue to customize it, link it to a custom domain, or expand it as your project grows. If you have any questions, don’t hesitate to reach out to us via [Discord](https://appwrite.io/discord).
132+
133+
# More resources
134+
135+
- [Appwrite Sites docs](/docs/producst/sites)
136+
- [Appwrite compared to Vercel](/blog/post/open-source-vercel-alternative)
137+
- [Appwrite Sites product tour](https://youtu.be/VtDe6hDw91k)
138+
- [Appwrite Sites video announcement](https://youtu.be/0cERQxFjTW4)
139+
- [Appwrite Discord server](/discord)

0 commit comments

Comments
 (0)