Building with SvelteKit and GraphCMS with Scott Spence
Deploying to Netlify with Git
Okey dokey. In this lesson, we'll deploy our site to Netlify. Much like when we made the static build in the earlier lesson, we'll need to do some additional steps to deploy to Netlify via Git. First, we're going to need to create a Netlify dot toml file, this should contain a couple of configuration options, I'm just going to go through them now. This will be build, and the command is going to be NPM run build, we want to set the Publish directory. To build, let's save that so this will tell Netlify to run the command NPM, run, build and publish to the build directory. As this will be for James that project, we're going to need to configure SvelteKit to work with Netlify. So for that, we're going to need to use the pre-render options in the svelte.config.js file. We already have adapt to static configured. And down here, we're going to enter some additional configuration. Crawl true. enabled true on error continue. And pages is all we're going to denote that with an asterisk. Let's save that. Now I'm going to need to commit the changes I've made to git just going to pop open my source control sidebar. And I'm going to use conventional commits again here, put it in as a feature, no scope, new features. And the additional message. And its hit enter for the rest of those. Now. I'm going to use GitHub for my source code provider. I'm just going to hop on over to my GitHub now.
And if you go over to the side here, there's this plus button, you can say new repository. And I'm going to call this SpaceX explorers. I'm going to have it as public. I'm gonna say create repository. Now GitHub will give us the configuration we need to add to the current project. So this is the configuration here, I'm just going to go to my terminal and stop the dev server from running. I'm just going to add this in here. I'm going to copy each line in.
Now that has been pushed to GitHub, I can go back to the browser here and refresh the page. And I have my projects on GitHub. Now I just need to go over to Netlify and login. I'm going to log in with GitHub. Now from the dashboard here, I can select new site from git this will authenticate me. Now I can search from our site, SpaceX now can pick this and
In the advanced Build Settings here. I'm going to set the environment variable for the vites GraphCMS endpoint. Just gonna paste these in. And I'm going to deploy the site. I'll scroll down here a bit, I can see that my site has been deployed. I can follow the output here. Okay, now that's done, I can go over to the preview. And my site is now deployed on Netlify I can click around the links and see the pages.
I can use the navigation actually. Okay, there is a couple more features of SvelteKit I'd like to talk about before we finish off here, and that is prefetching and pre-rendering. Let's just quickly take a look at pre-rendering. So pre-render will let you render your static pages ahead Time, we just need to put in pre-rendered or true into our modules here. So let's just quickly do this. And we have two pages, we need to add this to which be the index put this here save that. And the slug file down here hit save. And there's also prefetch. Let's take a quick look at that. So prefetch here will cause Svelte to run the pages load function as soon as the user hovers over a link in the desktop. So this is what we're going to use here prefetch before the href. Let's just copy that and go over to the links to anywhere we've got a link which will be on the Index page here. Let's scroll down to where we are using our href here our anchor tag here and put in prefetch. Let's hit save on that and commit these changes with conventional commits. Again, it's going to pop up my source sidebar and commit these I'm going to put them in as features again,
add an additional message and go over to my terminal and git push. If I go back over to Netlify, now let's go to the top of the page here. Go back to deploys. You can see that the last push I've done to GitHub is doing another production build for me there's check this out. Okay, looks like it's finished. Let's check out the preview here. So the prefetch as a good way to highlight this, if I pop open the dev tools here and go to the network and then as soon as I hover over a link, you see that it will pre-render the page for me. So clicking now, it's almost instantaneous. When we navigate to the page, one final thing we can look at is in Netlify, and we go back over to the site settings here. And the current deploy name friendly Newman isn't great, we can change that in the Site Settings over here. If we go over to domain management, we can use our custom domain, or we can remove this one, we just say options, edit site name,
and hit save. We now have this readable domain. Okay, that's it for this one. We're nearly done. Now there is one more optional lesson on styling, where I will go through using tailwind and a component library called Daisy UI. And it will just be a whistlestop tour of how to quickly put together some nice simple styles for our site we've built together. Okay, that's it for this one. I'll see you next one. Thanks a lot. Bye bye.