Too busy to start from scratch, but excited to start learning how to use an API-based CMS? Get a blog up and running in minutes. Modify and adapt it to your liking, it's all yours!
For this project, we provide you with all the source code you need to get your blog up and running. We will also walk you through setting up a new Prismic project from your terminal using the 'prismic-cli' tool, which will not only copy all the required code for you to get started right away, but also setup the required content repository for you in a few simple steps.
Setting up a Prismic project from a sample
We're going to kickstart our project by using the command line tool
prismic theme which takes care of every step of your initial setup.
The first step will be to install the 'prismic-cli' package. Launch a terminal instance, from where you will run the command to globally install the package.
npm install -g prismic-cli
Once it's been installed, you just need to navigate to where you want to create your new project folder and run the following command. This will create a new Prismic content repository, setup the custom types, and install the project code:
prismic theme --theme-url https://github.com/prismicio/gatsby-blog --conf prismic-config.js
(MAKE SURE YOU'RE USING THE LATEST VERSION OF THE CLI)
Navigate to the folder you have just created, and open
Confirm that the name you have chosen for your content repository has been setup as the API endpoint that the web application will use to fetch the content you create in Prismic.
Write some content
Visit the repository you have just created in your browser. It will show in your Prismic Dashboard, just as any other repositories you create. Select your master language and it's time to create some content!
Go to "Content" and hit "Create new" (or the button with the pencil icon if you're on a smaller screen), choose the Blog's home type and fill it with your own content. Save and publish!
Now, write a few blog posts. Make sure to fill the mandatory UID field that is used for your post's URL. Save and publish!
Run the blog
Now that we have some content to show off, let's check back on the code that will run your blog. Open your project folder once more in the terminal and run the development command.
This will launch a local development server at http://localhost:8000.
Deploy and go live!
You can deploy your production-ready Gatsby site to any provider that supports static sites. Follow Gatsby's team's recommendations for deploying to platforms like Now, Netlify, GitHub Pages, and more.
If you choose a provider that supports builds triggered by webhooks such as Netlify, you can configure Prismic's Webhooks to automatically rebuild your static pages whenever the content in your Prismic repository is updated. Follow Netlify's instructions to generate a webhook url, which will take the form of
https://api.netlify.com/build_hooks/xxxxxxxxxxxxxxx . You can now add this to your repository's Webhooks. Now, whenever a content update triggers it, Netlify will automatically start a fresh build of your site.
Customize to your liking
You should easily find what to modify in the code to customize the blog: just edit the stylesheets and the templates to fit your design! And if you're wondering about how the web app works or wish to learn more about expanding this project into a bigger, more personal project, feel free to contact us and we'll be happy to help you in getting your Gatsby.js project with Prismic off the ground.