The SvelteKit Starter Blog with Hygraph is a guide and template for quickly setting up a basic blog using SvelteKit as the frontend framework and Hygraph as the headless CMS backend. It provides a pre-defined content schema and example code to help you get up and running in minutes. Learn more.
Where can I find the SvelteKit starter blog with Hygraph?
You can find the SvelteKit starter blog on GitHub. The repository contains all the starter files and instructions for deployment.
What technologies are used in the Hygraph blog starter?
The Hygraph blog starter is built with SvelteKit, Tailwind CSS, daisyUI, and uses GraphQL for data fetching from Hygraph. Source.
How do I start a SvelteKit project with Hygraph?
You can start a SvelteKit project with Hygraph by running npm init svelte@next sveltekit-graphcms-starter-blog and following the prompts. Then, connect your project to Hygraph by configuring the GraphQL endpoint and using the provided starter schema. See the guide.
How do I deploy the SvelteKit starter blog?
You can deploy the SvelteKit starter blog to Vercel by installing the Vercel adapter (npm i -D @sveltejs/adapter-vercel@next), updating your svelte.config.js, and using the Vercel CLI (vercel or vc). Remember to set your Hygraph API endpoint as an environment variable in your Vercel project settings. Deployment instructions.
How can I style the SvelteKit starter blog?
You can style the SvelteKit starter blog using Tailwind CSS and daisyUI. Tailwind can be added with npx svelte-add tailwindcss --jit, and daisyUI provides pre-built UI components for rapid development. Styling guide.
Features & Capabilities
What features does Hygraph offer?
Hygraph offers a GraphQL-native architecture, content federation, scalability, and a user-friendly interface. It supports rapid content delivery, integrations with popular tools, and robust security features. See all features.
Does Hygraph provide an API?
Yes, Hygraph provides a powerful GraphQL API for efficient content fetching and management. You can learn more at the Hygraph API Reference.
What integrations are available with Hygraph?
Hygraph integrates with a wide range of platforms, including Netlify, Vercel, BigCommerce, Shopify, Lokalise, Cloudinary, AWS S3, Mux, Ninetailed, AltText.ai, and more. For a full list, visit the Hygraph Integrations page.
Is there technical documentation available for Hygraph?
Yes, Hygraph offers comprehensive technical documentation covering setup, API usage, integrations, and advanced features. Access it at Hygraph Documentation.
Pricing & Plans
What is Hygraph's pricing model?
Hygraph offers a free forever Hobby plan, a Growth plan starting at $199/month, and custom Enterprise plans. For details, visit the Hygraph pricing page.
Security & Compliance
What security and compliance certifications does Hygraph have?
Hygraph is SOC 2 Type 2 compliant, ISO 27001 certified, and GDPR compliant. These certifications ensure enterprise-grade security and data protection. Learn more at the Hygraph Security Features page.
How does Hygraph ensure data security?
Hygraph provides SSO integrations, audit logs, encryption at rest and in transit, and sandbox environments to protect sensitive data and meet regulatory standards. More on security.
Performance & Implementation
How long does it take to implement Hygraph?
Hygraph is designed for quick implementation. For example, Top Villas launched a new project in just 2 months from the initial touchpoint. Many users can get started in minutes using the starter templates and documentation. Case study.
How does Hygraph perform in terms of content delivery?
Hygraph emphasizes optimized content delivery performance, ensuring rapid content distribution and responsiveness. This helps reduce bounce rates and increase conversions. Learn more.
Support & Resources
What support is available for Hygraph users?
Hygraph offers 24/7 support via chat, email, and phone. Enterprise customers receive dedicated onboarding and expert guidance. All users have access to documentation, video tutorials, and a community Slack channel. Contact support.
What training resources are available to help me get started with Hygraph?
Hygraph provides onboarding sessions for enterprise customers, video tutorials, webinars, and detailed documentation to help users adopt the platform effectively. Documentation.
Use Cases & Customer Success
Who can benefit from using Hygraph?
Hygraph is ideal for developers, IT decision-makers, content creators, project managers, agencies, and technology partners. It is especially beneficial for modern software companies, enterprises looking to modernize, and brands aiming to scale digital experiences. See case studies.
What industries are represented in Hygraph's case studies?
Hygraph's case studies span industries such as food and beverage, consumer electronics, automotive, healthcare, travel and hospitality, media and publishing, eCommerce, SaaS, marketplace, education technology, and wellness and fitness. Explore industries.
Can you share some customer success stories with Hygraph?
Yes. Komax achieved a 3X faster time to market, Autoweb saw a 20% increase in website monetization, Samsung improved customer engagement, and Dr. Oetker enhanced their digital experience using MACH architecture. Read more success stories.
Who are some of Hygraph's customers?
Notable customers include Sennheiser, Holidaycheck, Ancestry, Samsung, Dr. Oetker, Epic Games, Bandai Namco, Gamescom, Leo Vegas, and Clayton Homes. See all customers.
Pain Points & Solutions
What problems does Hygraph solve?
Hygraph addresses operational pains (like reliance on developers for content updates and outdated tech stacks), financial pains (high operational costs, slow speed-to-market), and technical pains (boilerplate code, evolving schemas, cache issues). It provides solutions through its GraphQL-native architecture, content federation, and scalability. Learn more.
How does Hygraph help with content management pain points?
Hygraph empowers non-technical users with an intuitive interface, reduces reliance on developers, modernizes legacy systems, and ensures consistent branding across regions. It streamlines workflows, lowers operational costs, and supports scalability. Details here.
What KPIs and metrics are associated with the pain points Hygraph solves?
Key metrics include time saved on content updates, system uptime, consistency in content across regions, user satisfaction scores, reduction in operational costs, time to market, maintenance costs, and scalability metrics. See KPI details.
Blog & Community
Where can I find the Hygraph blog?
The Hygraph Blog provides the latest updates, developer tutorials, and essential guides. Visit the Hygraph Blog for more information.
What kind of content can I find in the Hygraph Blog?
The blog includes developer tutorials, product updates, essential guides to content modeling, and industry news. Explore the blog.
Get up and running with this starter, follow the guide, or use the completed project to get started in minutes.
Written by Scott
on May 25, 2021
In this post, I'm going to detail setting up a starter blog using SvelteKit and Hygraph. This will be a guide on creating a basic blog using SvelteKit and Hygraph.
SvelteKit for the bleeding edge goodness that that brings and the Hygraph starter blog so I'm up and running quickly with content that I can later build on when I want to add more content and functionality to the project.
If you prefer to just have the starter files you can get the repo here and if you only want to have a template to get started with then check out the Deploy button on the GitHub repo.
For this starter, I'll be using the predefined and pre-populated "Blog Starter" template available to you on your Hygraph dashboard. The starter comes with a content schema already defined for you.
If you haven't signed up already and created a Hygraph account you can create a free account.
On your Hygraph dashboard select the "Blog Starter" template from the "Create a new project" section, you're then prompted to give it a name and description. I'll call my one "My Blog", pay attention to the "Include template content?" checkbox, in my case I'm going to leave this checked. I'll then select my region and "Create project".
I'm selecting the community pricing plan and I'll select "Invite later" for "Invite team members".
From the project dashboard, I can see from the quick start guide that the schema is already created and the API is accessible.
Clicking on the "Make your API accessible" section of the quick start guide I will be taken to the "API access" settings panel, from here I'm going to check the "Content from stage Published" checkbox and click "Save" so the API is publicly accessible.
Now, I have an accessible GraphQL endpoint to access the blog data from. Time to scaffold out the project to get the data.
I'm selecting Skeleton project, no TypeScript, ESLint and Prettier:
✔ Which Svelte app template? › Skeleton project
✔ Use TypeScript? … No
✔ Add ESLint for code linting? … Yes
✔ Add Prettier for code formatting? … Yes
Now I have the absolute bare-bones starter for a SvelteKit project.
Popping open VSCode in the project directory I can see what I have to work with:
# change directory
cd sveltekit-graphcms-starter-blog
# install dependencies
npm i
# open with VSCode
code .
The project outline looks a little like this:
sveltekit-graphcms-starter-blog/
├─ src/
│ ├─ routes
│ │ └─ index.svelte
│ ├─ app.html
│ └─ global.d.ts
Running npm run dev from the terminal will start the dev server on the default localhost:3000 you can edit this command to open the web browser on that port with some additional flags being passed to the npm run dev command:
Cool, cool, cool, now to start getting the data from the API to display on the client.
If I pop open the API playground on my Hygraph project, I can start shaping the data I want to get for the index page of my project.
I'll want to query all posts available and grab these fields to display on the index page:
queryPostsIndex{
posts{
id
title
slug
date
excerpt
}
}
I'm going to install graphql-request and graphql as dependencies so I can query the Hygraph GraphQL API endpoint with the query I defined in the API playground!
npm i -D graphql-request graphql
I'm copying my Access URL endpoint to a .env file which can be accessed in Vite with import.meta.env.VITE_HYGRAPH_URL. First up I'll create the file first, then add the variable to it with the accompanying Access URL:
In the src/routes/index.svelte file I'm using Svelte's script context="module" so that that I can get the posts from the Hygraph endpoint ahead of time. That means it’s run when the page is loaded and the posts can be loaded ahead of the page being rendered on the screen.
This can be abstracted away later for now it's to see some results on the screen:
<scriptcontext="module">
import{ gql,GraphQLClient}from'graphql-request'
exportasyncfunctionload(){
const hygraph =newGraphQLClient(
import.meta.env.VITE_HYGRAPH_URL,
{
headers:{},
}
)
const query = gql`
query PostsIndex {
posts {
id
title
slug
date
excerpt
}
}
`
const{ posts }=await hygraph.request(query)
return{
props:{
posts,
},
}
}
</script>
<script>
exportlet posts
</script>
<h1>Hygraph starter blog</h1>
<ul>
{#each posts as post}
<li>
<ahref="/post/{post.slug}">{post.title}</a>
</li>
{/each}
</ul>
I'll quickly break down what's happening here, as I mentioned earlier the first section contained in the <script context="module"> block is being requested before the page renders and that returns props: { posts }.
The next section is accepting the posts as a prop to use them in the markup the {#each posts as post} block is looping through the posts props and rendering out a list item for each post.slug with the post.title.
Running the dev server will now give me a list of posts available:
Cool! Clicking one of the links will give me a 404 error though, next up I'll create a layout and an error page.
Adding a layout will mean certain elements will be available on each page load, like a navbar and footer:
# create the layout file
touch src/routes/__layout.svelte
For now, a super simple layout so that users can navigate back to the index page:
<nav>
<ahref="/">Home</a>
</nav>
<slot/>
The <slot /> is the same as you would have in a React component that would wrap a children prop. Now everything in src/routes will have the same layout. As mentioned this is pretty simple but allows for styling of everything wrapped by the layout. Not mentioned styling yet, more on that soon(ish).
Now to the not found (404) page:
# create the layout file
touch src/routes/__error.svelte
Then to add some basic information so the user can see they've hit an undefined route:
<scriptcontext="module">
exportfunctionload({ error, status }){
return{
props:{ error, status },
}
}
</script>
<script>
exportlet error, status
</script>
<svelte:head>
<title>{status}</title>
</svelte:head>
<h1>{status}: {error.message}</h1>
Clicking on any of the links on the index page will now use this error page. Next up, creating the pages for the blog posts.
You may have noticed <svelte:head> in there, that's to add amongst other things SEO information, I'll use that in the components from now on where applicable.
That's a fancy way of saying the URL path for each blog post is generated programmatically.
Create a [slug].svelte file and posts folder in the src directory:
mkdir src/routes/post/
# not the quotes around the path here 👇
touch 'src/routes/post/[slug].svelte'
In <script context="module"> pretty much the same query as before but this time for a single post and using the GraphQL post query from the Hygraph endpoint.
To get the slug for the query I'm passing in the page context where I'm getting the slug from the page params:
<scriptcontext="module">
import{ gql,GraphQLClient}from'graphql-request'
exportasyncfunctionload(context){
const hygraph =newGraphQLClient(
import.meta.env.VITE_HYGRAPH_URL,
{
headers:{},
}
)
const query = gql`
query PostPageQuery($slug: String!) {
post(where: { slug: $slug }) {
title
date
content {
html
}
tags
author {
id
name
}
}
}
`
const variables ={
slug: context.page.params.slug,
}
const{ post }=await hygraph.request(query, variables)
return{
props:{
post,
},
}
}
</script>
<script>
exportlet post
</script>
<svelte:head>
<title>{post.title}</title>
</svelte:head>
<h1>{post.title}</h1>
<p>{post.author.name}</p>
<p>{post.date}</p>
<p>{post.tags}</p>
{@html post.content.html}
Take note of the last line here where I’m using the Svelte @html tag, this renders content with HTML in it.
Now I have a functional blog, not pretty, but functional.
Now to deploy this to Vercel! You're not bound to Vercel, you can use one of the SvelteKit adapters that are available.
npm i -D @sveltejs/adapter-vercel@next
Then I'll need to add that to the svelte.config file:
importvercelfrom'@sveltejs/adapter-vercel'
/** @type {import('@sveltejs/kit').Config} */
const config ={
kit:{
// hydrate the <div id="svelte"> element in src/app.html
target:'#svelte',
adapter:vercel(),
},
}
exportdefault config
Now to deploy to Vercel, I'll need the Vercel CLI installed, that's a global npm or Yarn install:
npm i -g vercel
# log into vercel
vc login
I'm prompted to verify the log in via email then I can use the CLI. I'll deploy with the vercel command from the terminal:
# run from the root of the project
vercel # or vc
I can go straight to production with this by using the --prod flag but before I do that I'll add the VITE_HYGRAPH_URL env value to the setting panel on the Vercel project page for what I've just deployed.
In the settings page of the Project, there's a section for "Environment Variables", the URL will be specific to your username and project name, it should look something like this:
In the Vercel UI for the Environment Variables, I'll add in the VITE_HYGRAPH_URL for the name and the Hygraph API endpoint for the value.
Now I can build again this time with the --prod flag:
vc --prod
That's it, I now have a functional blog in production! If you want to go ahead and style it yourself go for it! If you need a bit of direction on that I got you too!
Tailwind can be added to SvelteKit projects by using the svelte-add helper, there's loads to choose from in this case I'll be using it with JIT enabled:
# use svelte-add to install Tailwind
npx svelte-add tailwindcss --jit
# re-install dependencies
npm i
Tailwind will need the @tailwind directives so I'll create an app.css file in the src directory:
touch src/app.css
I'll add the base, components and utilities Tailwind directives to it:
@tailwind base;
@tailwind components;
@tailwind utilities;
Then I'll bring that into the layout, it could also be added directly to the src/app.html file as a link, in this instance I'll add it to the layout:
<script>
import'../app.css'
</script>
<nav>
<ahref="/">Home</a>
</nav>
<slot/>
Now onto adding the styles, I'm going to be using daisyUI which has a lot of pre-built components to use for scaffolding out a pretty decent UI quickly. I'm also going to use Tailwind Typography for styling the markdown.
npm i -D daisyui @tailwindcss/typography
Then add those to the Tailwind plugins array in the tailwind.config.cjs file:
I'm going to move the navigation out to its own component and import that into the layout, first up I'll create the lib folder, where component lives in SvelteKit:
mkdir src/lib
touch src/lib/nav.svelte
In the nav.svelte I'll add in one of the nav examples from daisyUI:
Same with the post page I'v amended the GraphQL query to bring back some additional data for the author image and the post tags; Here's what the query looks like:
queryPostPageQuery($slug:String!){
post(where:{slug:$slug}){
title
date
content{
html
}
tags
author{
name
title
picture{
fileName
url
}
}
coverImage{
fileName
url
}
}
}
I've added some Tailwind styles and brought in the author image. I'm also rendering out any tags if they're in the post data: