{"id":13564611,"url":"https://github.com/michael/editable-website","last_synced_at":"2025-04-05T22:06:05.252Z","repository":{"id":151336656,"uuid":"623683320","full_name":"michael/editable-website","owner":"michael","description":"A SvelteKit template for building CMS-free editable websites ","archived":false,"fork":false,"pushed_at":"2024-06-13T09:56:52.000Z","size":204,"stargazers_count":1592,"open_issues_count":12,"forks_count":130,"subscribers_count":19,"default_branch":"main","last_synced_at":"2025-03-29T20:08:35.577Z","etag":null,"topics":["javascript","richtexteditor","sqlite","svelte","webdev"],"latest_commit_sha":null,"homepage":"https://editable.website","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michael.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-04T21:39:06.000Z","updated_at":"2025-03-28T18:03:33.000Z","dependencies_parsed_at":"2023-06-28T11:15:52.168Z","dependency_job_id":"34a6ff51-d3c6-4d34-95f7-9689b00048d8","html_url":"https://github.com/michael/editable-website","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Feditable-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Feditable-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Feditable-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michael%2Feditable-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michael","download_url":"https://codeload.github.com/michael/editable-website/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247406085,"owners_count":20933803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","richtexteditor","sqlite","svelte","webdev"],"created_at":"2024-08-01T13:01:33.608Z","updated_at":"2025-04-05T22:06:05.226Z","avatar_url":"https://github.com/michael.png","language":"Svelte","readme":"# editable-website\n\nA SvelteKit template for coding **completely custom websites**, while allowing non-technical people to **make edits** to the content by simply logging in with a secure admin password.\n\nCheck out the demo at [editable.website](https://editable.website).\n\nSee it out in the wild at [sonjastojanovic.com](https://sonjastojanovic.com), [nisse.tech](https://nisse.tech), [michaelaufreiter.com](https://michaelaufreiter.com), [postowl.com](https://postowl.com), and [trails-shop.at](https://trails-shop.at).\n\nRead the discussion on [Hackernews](https://news.ycombinator.com/item?id=35456083).\n\nEditable Website won the 2nd price in the [SvelteHack 2023](https://hack.sveltesociety.dev/winners). 🥳 We still can't believe it. Big thanks to the [Svelte Society](https://sveltesociety.dev/) and congrats to the other winners, and everyone who participated. 🙏 So many inspiring projects!\n\n## But why?\n\nIt's a dynamic website but light as a feather compared to building on top of a CMS. It makes editing content self-explanatory for end-users.\n\n## Step 0 - Requirements\n\n- Node.js 18+\n- SQLite3\n\nThese are needed to run the example as is, but you can choose any other database and file storage solution.\n\n## Step 1 - Development setup\n\nThis is a full-fledged web app you want to adjust to your own needs. So please **create a copy** or fork of the source code and rename the project accordingly.\n\nFirst clone the repository.\n\n```bash\n$ git clone https://github.com/michael/editable-website.git\ncd editable-website\n```\n\nInstall the dependencies.\n\n```bash\nnpm install\n```\n\nCopy the contents of `.env.example` into `.env` and adjust to your needs.\n\n```bash\nDB_PATH=./data/db.sqlite3\nADMIN_PASSWORD=xxxxxxxxxxxx\nORIGIN=http://localhost:5173\n```\n\nSeed the database:\n\n```bash\nsqlite3 data/db.sqlite3 \u003c sql/schema.sql\n```\n\nOnce you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:\n\n```bash\nnpm run dev\n```\n\nTo create and test a production version of your app:\n\n```bash\nnpm run build\n```\n\nYou can preview the production build with `npm run preview`.\n\n## Making changes to your website\n\nYou can literally do everything that SvelteKit allows you to do. Below is the source code for the /imprint page, which has a `\u003cPlainText\u003e` title and `\u003cRichText\u003e` content.\n\n```svelte\n\u003csvelte:head\u003e\n  \u003ctitle\u003eImprint\u003c/title\u003e\n\u003c/svelte:head\u003e\n\n{#if showUserMenu}\n  \u003cModal on:close={() =\u003e (showUserMenu = false)}\u003e\n    \u003cdiv class=\"w-full flex flex-col space-y-4 p-4 sm:p-6\"\u003e\n      \u003cPrimaryButton on:click={toggleEdit}\u003eEdit page\u003c/PrimaryButton\u003e\n      \u003cLoginMenu {currentUser} /\u003e\n    \u003c/div\u003e\n  \u003c/Modal\u003e\n{/if}\n\n{#if editable}\n  \u003cEditorToolbar on:cancel={initOrReset} on:save={savePage} /\u003e\n{/if}\n\n\u003cWebsiteNav bind:showUserMenu {currentUser} bind:editable /\u003e\n\n\u003cdiv class=\"py-12 sm:py-24\"\u003e\n  \u003cdiv class=\"max-w-screen-md mx-auto px-6 md:text-xl\"\u003e\n    \u003ch1 class=\"text-4xl md:text-7xl font-bold pb-8\"\u003e\n      \u003cPlainText {editable} bind:content={title} /\u003e\n    \u003c/h1\u003e\n    \u003cdiv class=\"prose md:prose-xl pb-12 sm:pb-24\"\u003e\n      \u003cRichText multiLine {editable} bind:content={imprint} /\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\n\u003cFooter counter=\"/imprint\" /\u003e\n```\n\nTo see the full picture, open [src/routes/imprint/+page.svelte](src/routes/imprint/%2Bpage.svelte) and [src/routes/imprint/+page.server.js](src/routes/imprint/%2Bpage.server.js).\n\nPlease use this as a starting point for new pages you want to add to your website. `editable-website` is not a widget-library on purpose. Instead you are encouraged to inspect and adjust all source code, including the [schema](./src/lib/prosemirrorSchemas.js) for the editors. I want you to be in control of everything. No behind-the-scene magic.\n\n## Making changes to the content\n\nJust navigate to `http://127.0.0.1:5173/login` and enter your secure admin password (`ADMIN_PASSWORD`). Now you see an additional ellipsis menu, which will provide you an \"Edit page\" or \"Edit post\" option for all pages that you have set up as \"editable\".\n\n## Deployment to Fly.io\n\nThis repo contains the files you need to deploy your site to [fly.io](https://fly.io/).\n\n1. Create an account with [fly.io](https://fly.io/). (Fly [require an active, valid credit / bank card](https://fly.io/docs/about/credit-cards/) to prevent abuse, but the site runs well on their free tier. Unless you have a very busy site, hosting will be free.)\n1. [Install `fly`](https://fly.io/docs/hands-on/install-flyctl/) and sign in with `fly auth login`\n1. Clone this repo to a directory on your computer\n1. Enter the directory you cloned the repo to: `cd myapp`\n1. Run `fly apps create`\n   1. Enter a name for your application at the prompt (e.g. `myapp`)\n   1. Choose a Fly organization to deploy to\n1. Copy the contents from `fly.toml.example` to `fly.toml` and adjust to your needs. You have to change `app = \"myapp\"` and `source = \"myapp_data\"` to the app name you provided earlier.\n1. Run `fly deploy` as shown below. **Substitute your own values for the secrets** and make sure to replace all instances of `myapp` with the name you chose when creating the application above:\n\n```\nfly deploy \\\n    --build-secret DB_PATH=\"./data/db.sqlite3\" \\\n    --build-secret ADMIN_PASSWORD=\"your-super-secret-admin-password\" \\\n    --build-secret ORIGIN=\"https://myapp.fly.dev\"\n```\n\nThe `-a` option in `fly deploy` lets you override the app name specified in `fly.toml`.\n\nFly will let you know when the app is deployed. Visit the URL shown in your terminal and sign in at `/login` with the `ADMIN_PASSWORD` you set above.\n\n## Connect a domain to your Fly.io app\n\n- Run `fly ips list -a myapp` to get the IPv4 and IPv6 addresses.\n- Head over to your DNS provider and add A and AAAA records for myapp.com with the IPv4 and IPv6 values.\n- Run `fly certs create -a myapp myapp.com`\n- Run `fly certs show -a myapp myapp.com` to watch your certificates being issued.\n\n## Fly.io Backups\n\nYou can pull a backup locally and run it to check if it is valid. That's also quite useful for developing/testing against the latest production data. For the best experience, keep your database small. ;)\n\n1. Make a snapshot remotely\n   - `fly ssh console`\n   - `sqlite3 data/db.sqlite3 \".backup data/backup-db.sqlite3\"`\n   - `sqlite3 data/backup-db.sqlite3 \"PRAGMA integrity_check;\"` (optional integrity check)\n   - Exit the remote console (CTRL+D)\n1. Download the database and test it with your local instance\n   - `rm -rf data/db.*` (careful, this wipe the database files locally)\n   - `fly sftp get data/backup-db.sqlite3 data/db.sqlite3` (and puts the downloaded backup in place)\n\nTo restore a backup in production, you need to be a bit careful and follow these steps (your site could be down for a few minutes during the restore).\n\n1. Make sure nobody writes to the app\n1. Make a backup remotely (in case something goes wrong)\n   - `fly ssh console`\n   - `sqlite3 data/db.sqlite3 \".backup data/backup-db.sqlite3\"`\n   - `sqlite3 data/backup-db.sqlite3 \"PRAGMA integrity_check;\"` (optional integrity check)\n   - `rm -rf data/db.*` (this removes the current database files, not the backup)\n   - Exit the remote console (CTRL+D)\n1. Copy your local db.sqlite3 file to production using SFTP\n   - `sqlite3 data/db.sqlite3 \".backup data/backup-db.sqlite3\"`\n   - `rm -rf data/db*`\n   - `mv data/backup-db.sqlite3 data/db.sqlite3` (the first 3 commands make sure db.sqlite3 has the very latest state)\n   - `fly sftp shell`\n   - `cd app/data`\n   - `put data/db.sqlite3`\n   - Exit SFTP client (CTRL+D)\n1. Restart the app (so that the new DB gets picked up)\n   - `fly apps restart`\n\n## Get in touch\n\nIf you have questions or need help (with development or deployment), please email me at michael@letsken.com.\n\n## Examples\n\nCommunity provided examples of additional features you can add to your editable website:\n\n- [ChatGPT completion tool](https://github.com/nilskj/editable-website)\n","funding_links":[],"categories":["Svelte","Sites","svelte","JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichael%2Feditable-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichael%2Feditable-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichael%2Feditable-website/lists"}