Tailwind Resources Logo Tailwind Resources
Editable Website screenshot

Editable Website

Author Avatar Theme by Michael
Updated: 13 Jun 2024
1611 Stars

A SvelteKit template for building CMS-free editable websites

Github Live Preview

Categories

Svelte Vite

Overview

Editable Website is a SvelteKit template that allows users to code custom websites while providing a user-friendly interface for non-technical individuals to make content edits. By logging in with a secure admin password, users can easily update the content of their website. With a lightweight structure and customizable features, Editable Website offers a dynamic web development solution without the complexity of a CMS.

Features

  • Customizable websites using SvelteKit
  • Secure admin login for content editing
  • Lightweight design compared to CMS-based websites
  • Fully adjustable source code
  • Ability to add new pages and adjust existing ones
  • Deployment options to Fly.io

Installation

  1. Ensure that you have Node.js 18+ and SQLite3 installed.
  2. Create a copy or fork of the source code and rename the project accordingly.
  3. Copy the contents of .env.example into .env and modify as needed.
  4. Seed the database.
  5. Install project dependencies using npm install (or pnpm install or yarn).
  6. Start the development server.
  7. To create and test a production version of your app:
    • Build the app with npm run build.
    • Preview the production build with npm run preview.
  8. Make desired changes to your website by editing the source code.
  9. To make content changes, navigate to http://127.0.0.1:5173/login and enter the admin password.
  10. Deploy your site to Fly.io:
  • Create an account with Fly.io.
  • Install Fly and sign in.
  • Clone the repository to your computer.
  • Enter the repository directory.
  • Create your Fly application using fly apps create.
  • Adjust the contents of fly.toml to fit your needs.

Summary

Editable Website is a SvelteKit template that enables users to create custom websites while providing an intuitive admin interface for content editing. With its lightweight design compared to CMS-based websites, Editable Website offers a flexible and customizable solution for dynamic web development. By following the installation guide, users can easily set up and deploy their website using Fly.io.