/hugo-starter-buttercms

Drop-in proof-of-concept Hugo app, fully integrated with your ButterCMS account

Primary LanguageSCSS

Hugo + ButterCMS Starter Project

Live demo: https://hugo-starter-buttercms.netlify.app/

This Hugo starter project fully integrates with dynamic sample content from your ButterCMS account, including main menu, pages, blog posts, categories, and tags, and all with a beautiful, custom theme. All of the included sample content is automatically created in your account dashboard when you sign up for a free trial of ButterCMS.

Deploy to Netlify

1) Installation

First, create a virtual environment and install dependencies by running the below commands.

$ git clone https://github.com/ButterCMS/hugo-starter-buttercms.git
$ cd hugo-starter-buttercms
$ go mod download

2) Set ButterCMS API Token

To fetch your ButterCMS content, add your API token as an environment variable.

$ echo 'BUTTERCMS_API_TOKEN=your_token' >> .env

3) Fetch Data from ButterCMS

To fetch your ButterCMS content run:

$ go run github.com/ButterCMS/hugo-starter-buttercms/prebuild

Because Hugo is a static site generator, you'll need to run this command for if you make changes to your Butter content and want to pull it into your app. For this reason, we recommend tapping into our webhook architecture, which will allow you to set up your deployed project to automatically show draft changes.

5) Run Hugo Local Development Server

To view the app in the browser, you'll need to run the local development server:

$ hugo server

Congratulations! Your starter project is now live at: http://localhost:1313/

6) Deploy on Netlify

Our starter app can be deployed to Netlify with the click of a button:

  1. Create a Heroku account at https://app.netlify.com.
  2. Click the button below and fill in an app name. Then click "Deploy to Netlify".

Deploy to Netlify

7) Webhooks

In order for your deployed app to pull in content changes from your ButterCMS account, you'll need to follow your hosting provider's steps for setting up webhooks. The ButterCMS webhook settings are located at https://buttercms.com/webhooks/.

8) Previewing Draft Changes

By default, your starter project is set up to allow previewing of draft changes saved in your ButterCMS.com account. To disable this functionality, set the following value in your .env file: BUTTERCMS_PREVIEW=false.