Getting started with the blog template
This guide shows you how you can use our official Blog Template. We are going to fork the template, connect it with your Caasy instance and deploy it to Netlify. The template is free to use and can be adapted to your needs.
Prerequisites:
- a Caasy account
- a GitHub account
- a Netlify account
- NodeJS, npm and git installed
Live Preview
Step 1: Creating a site in Caasy
If you have already created a site in Caasy, you can skip this step. If not, navigate to https://app.caasy.io/sites and click Add Site. Enter a name and a short description and click Create. Now you will see a new card for the site, you've just created. Click the Select button of that card.
Step 2: Creating a new blog post
After selecting the site, you will see the site's menu in the sidebar on the left. Navigate to Blog Posts and click the New Post button to create a new Blog Post. Add your blog post and make sure to enable the Publish toggle on the right before you save your post.
Step 3: Forking the Blog Template
Next, you need to fork the Caasy Blog Template. Login into your GitHub account, open the Blog Template repository and click the Fork button in the top right corner. This will create a copy of the entire repository, which you can change according to your needs.
Open the terminal on your machine and clone the repository with:
This will copy the code to your machine.
caution
Make sure that you don't clone the official repository from https://github.com/jz222/caasy-nextjs-blog-template.git but the one you've just forked.
Step 4: Customizing the template
Open the code in your favorite code editor. The blog template was developed with the NextJS framework. You can change it according to your needs. Dynamic content, such as the blog posts, are obviously retrieved from the Caasy API. However, there is some static content such as social media links that you can change in the global blog configuration. You can change this configuration in the blogConfig.js file in the root folder.
The only mandatory configuration you need to change in that file is the siteId. You can find your site ID in the site overview.
Step 5: Testing it locally
Now it's time to test your blog locally. Switch back to your terminal from step 3, open the cloned repository and install the dependencies:
Afterwards, you can start the development server with:
Open http://localhost:3002 and you will see the blog post that you have created in step 2.
Step 6: Deploying
If everything works fine, you can continue and deploy your personal blog. You are free to use any kind of hosting you like. In this guide, however, we are going to use Netlify. Log in in to your Netlify account and select Sites in the menu at the top and click the New Site from Git button on the top right.
Now select GitHub at the bottom. If you haven't before, you are asked to authorize Netlify to access your GitHub profile. Once you've done that, you will be shown all your GiHub repositories. Go ahead and select the caasy-nextjs-blog-template that you've forked in step 3. Next, you are asked to provide instructions for the build process.
The command to create a static build is npm run export. It will create a new folder with the name out, which contains the static files.
Step 7: Finishing up
You've now deployed your blog on Netlify. To get the most out of Caasy, we recommend setting up Netlify Notifications to add information about the deployment process to your Caasy activity stream. You probably also want to automatically trigger a new deploy whenever content was created, updated or deleted. Go back to your Netlify dashboard and open the settings of your site. In the sidebar select Build & Deploy and scroll down to Build Hooks.
Create a new build hook and use the URL to create a webhook in Caasy.