KrittIT Blog Setup Part 5

Previously

In the last part we covered gathering all the information needed for the environment variables to get the contact form working. Now the last step, deployment.

Deploying Your Blog

In this part of the series I will walk you through deploying your blog on using Vercel as a hosting provider. They make it extremely simple and is free for a hobby site.

Git Repository

First we need to get your project into a cloud git provider. I recommend GitHub for this. It is free, easy and there is lots of support for it.

If you are familiar with git then skip to the next section. The following is intended for those who don't know how git works and don't really care to.

Go to https://github.com/ and create your account. Then in the top right you should see a plus sign. Click that and select new repository. There you will enter a name for your repository like krittit-blog-live. Select private or public either is fine but in this case I would recommend private. Then click create repository.

You should see the above after the repository is created. Click uploading an existing file. Then open your file explorer and navigate to your projects root directory. There you will select all the files and folders except for node-modules and .next. I recommend doing this by holding shift down clicking blog-posts then, while still holding shift, click the last file. This should have selected all the files except .idea and .next. Now press the ctrl key and click node-modules. That should hav unselected node modules for you while keeping the rest of the files selected.

Once that is done drag the files over to the area shown bellow in your GitHub repository.

You should see all your files being uploaded. Now scroll down to the bottom of the screen and slick commit changes. Congratulations your project is not on GitHub.

Vercel

Now that that is finished, it's time to create our Vercel account. Got to https://vercel.com/signup and select continue with GitHub. There it will link your GitHub account to it, be sure to give the appropriate permissions when asked.

Once that is finished you should see a screen asking you to import a git repository. Click add, say you only want to give accesses to a single repository, select your blog's repository, then click import.

You should see a screen like the above now. Here, if you have chosen to have the contact form, is where you will input the environment variables for it. Just expand the environment variables tab and put the information in there like bellow, clicking add after each one.

Then click deploy. It will take a few minutes, but afterwords you should see the domain to where your site is currently accessible from. Visit it and make sure everything is working.

Domain

This next part is completely optional. You can leave your blog at the domain that was given, or you can route a custom domain to it. For this just navigate to settings, then domains, type in your domain and click add. FYI for this to work you need to have already purchased a domain from a domain registrar. After clicking add you should see your domain with a routing error and instructions on how to fix it. Copy the cname they give you, go to you domain registrar, select your domains DNS setting and add the cname or a record that was provided. After that is saved and is live your blog should come up at your new domain.

Congratulations

You have created fully functioning blog on one of the most advanced frameworks available.

Next Steps

Now anytime you want to post to your blog just create your blog post like you did the first one then upload that folder to the public/blog-posts folder in your git repository. Vercel will see the change and automatically update the blog.