This starter is a statically generated personal website that uses Next.js for the frontend and Sanity to handle its content. It comes with a native Sanity Studio that offers features like real-time collaboration, instant side-by-side content previews, and intuitive editing.
The Studio connects to Sanity Content Lake, which gives you hosted content APIs with a flexible query language, on-demand image transformations, powerful patching, and more. You can use this starter to kick-start a personal website or learn these technologies.
- A performant, static personal personal website with editable projects
- A native and customizable authoring environment, accessible on
yourpersonalwebsite.com/studio
- Real-time and collaborative content editing with fine-grained revision history
- Side-by-side instant content preview that works across your whole site
- Support for block content and the most advanced custom fields capability in the industry
- Webhook-triggered Incremental Static Revalidation; no need to wait for a rebuild to publish new content
- Free Sanity project with unlimited admin users, free content updates, and pay-as-you-go for API overages
- A project with starter-friendly and not too heavy-handed TypeScript and Tailwind.css
Personal Website | Studio |
---|---|
File(s) | Description |
---|---|
sanity.config.ts |
Config file for Sanity Studio |
sanity.cli.ts |
Config file for Sanity CLI |
/app/studio/[[...index]]/page.tsx |
Where Sanity Studio is mounted |
/pages/preview.ts |
Serverless route for triggering Preview mode |
/schemas |
Where Sanity Studio gets its content types from |
/plugins |
Where the advanced Sanity Studio customization is setup |
/lib/sanity.api.ts ,/lib/sanity.image.ts |
Configuration for the Sanity Content Lake client |
/lib/sanity.preview.ts |
Configuration for the live Preview Mode |
Use the Deploy Button below. It will let you deploy the starter using Vercel as well as connect it to your Sanity Content Lake using the Sanity Vercel Integration.
Clone the repository that was created for you on your GitHub account. Once cloned, run the following command from the project's root directory:
npx vercel link
Download the environment variables needed to connect Next.js and the Studio to your Sanity project:
npx vercel env pull
pnpm install && pnpm hsuky install && pnpm dev
When you run this development server, the changes you make in your frontend and studio configuration will be applied live using hot reloading.
Your personal website should be up and running on http://localhost:3000! You can create and edit content on http://localhost:3000/studio.
To deploy your changes to production you use git
:
git add .
git commit
git push
Alternatively, you can deploy without a git
hosting provider using the Vercel CLI:
npx vercel --prod
In case of any issues or questions, you can post:
You can remove it by deleting the IntroTemplate
component in /components/pages/home.tsx
.
- Join our Slack community to ask questions and get help
- How to edit my content structure?
- How to query content?
- What is content modelling?
This is a dummy static site that you can deploy to a dokku app "x" quickly. Before using it for the first time, you need to add the dokku remote:
git remote add dokku ssh://dokku@projects.multimediatechnology.at:5412/friendsqueststaging
later you can change that remote url by running
rake static[x]
This will:
- change the title and h1 of the static site to display the name of the app "x"
- change the remote url to point the the app x
- deploy to the dokku
## WARNING: `heroku-buildpack-static` is deprecated
This buildpack is deprecated and is no longer being maintained.
If you are using this project, you can transition over to NGINX via an NGINX buildpack.
Use your project's existing configuration.
To find the NGINX configuration generated by the heroku-buildpack-static you can run:
```
$ heroku run bash
~ $ bin/config/make-config
~ $ cat config/nginx.conf
```
These commands will output your current NGINX config generated from your `static.json` contents.
- Write these contents to your local repo at `config/nginx.conf.erb`, commit them to git.
- Replace path logic that previously used `mruby` with static logic.
- Configure your app to use the NGINX buildpack via `heroku buildpacks:add heroku-community/nginx`.
- Remove this buildpack via `heroku buildpacks:remove heroku-community/static` (or `heroku buildpacks:remove https://github.com/heroku/heroku-buildpack-static`).
-----> Installed nginx 1.21.3 to /app/bin Using release configuration from last framework (Static HTML). -----> Discovering process types Default types for -> web -----> Releasing easyshopping (dokku/easyshopping:latest)... -----> Deploying easyshopping (dokku/easyshopping:latest)... -----> App Procfile file found (/home/dokku/easyshopping/DOKKU_PROCFILE) -----> DOKKU_SCALE file not found in app image. Generating one based on Procfile... DOKKU_SCALE declares scale -> web=1 =====> Processing deployment checks -----> Attempting pre-flight checks (web.1) CHECKS expected result: http://localhost/ => "A Project on Dokku" Attempt 1/10. Waiting for 1 seconds ... All checks successful! =====> easyshopping web container output: Starting log redirection... Starting nginx... 172.17.0.1 - - [11/Jan/2023:10:42:00 +0000] "GET / HTTP/1.1" 200 890 "-" "curl/7.47.0" =====> end easyshopping web container output -----> Running post-deploy -----> Configuring easyshopping.projects.multimediatechnology.at...(using built-in template) -----> Creating http nginx.conf -----> Setting max upload size to 2M Reloading nginx configuration (via systemctl): nginx.service. Reloading nginx -----> Renaming containers Renaming container (84593de70ffd) hopeful_stonebraker to easyshopping.web.1 =====> Application deployed: http://easyshopping.projects.multimediatechnology.at
To ssh://projects.multimediatechnology.at:5412/easyshopping
-
[new branch] master -> master bjelline@Macbook dokku-static-site (master)* $ rake static[quizme] Should work on day quizme Objekte aufzählen: 323, fertig. Zähle Objekte: 100% (323/323), fertig. Delta-Kompression verwendet bis zu 4 Threads. Komprimiere Objekte: 100% (280/280), fertig. Schreibe Objekte: 100% (323/323), 290.69 KiB | 14.53 MiB/s, fertig. Gesamt 323 (Delta 163), Wiederverwendet 105 (Delta 36), Pack wiederverwendet 0 -----> Cleaning up... -----> Building quizme from herokuish... -----> Injecting apt repositories and packages ... -----> Adding BUILD_ENV to build environment... -----> Multipack app detected =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-static =====> Detected Framework: Static HTML ## WARNING:
heroku-buildpack-static
is deprecatedThis buildpack is deprecated and is no longer being maintained. If you are using this project, you can transition over to NGINX via an NGINX buildpack. Use your project's existing configuration. To find the NGINX configuration generated by the heroku-buildpack-static you can run: ``` $ heroku run bash ~ $ bin/config/make-config ~ $ cat config/nginx.conf ``` These commands will output your current NGINX config generated from your `static.json` contents. - Write these contents to your local repo at `config/nginx.conf.erb`, commit them to git. - Replace path logic that previously used `mruby` with static logic. - Configure your app to use the NGINX buildpack via `heroku buildpacks:add heroku-community/nginx`. - Remove this buildpack via `heroku buildpacks:remove heroku-community/static` (or `heroku buildpacks:remove https://github.com/heroku/heroku-buildpack-static`).