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.

sites

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:

# clone the code
git clone https://github.com/<your GitHub username>/caasy-nextjs-blog-template.git

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:

# change directory
cd caasy-nextjs-blog-template
# install dependencies
npm install

Afterwards, you can start the development server with:

# start the development server
npm run dev

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.

sites

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.

sites

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.

sites

Create a new build hook and use the URL to create a webhook in Caasy.