Build a website using Metalsmith and Contentstack

Previous

Next

• 1
• 2

Quickstart

Here’s a quick guide on how to create this demo website using Metalsmith and Contentstack.

Prerequisites

• Contentstack account

Note: For this tutorial, we have assumed that you are familiar with Contentstack. If not, then please refer to Contentstack docs for more details.

In this tutorial, we will first go through the steps involved in configuring Contentstack and then look at the steps required to customize and use the presentation layer. 

1. Create a stack

   Log in to your Contentstack account, and create a new stack. This stack will hold all the data specific to your website. Learn more on how to create a stack.

2. Add a publishing environment

   To add an environment in Contentstack, go to your stack and click the “Settings” icon on the left navigation panel. Select Environments, and click on the + New Environment button. Provide a suitable name for your environment, say “staging”. Specify the base URL (e.g., “http://YourDomainName.com”), and select the language (e.g., English - United States). Then, click on Save. Read more about environments.
   

3. Import content types

   A content type is like the structure or blueprint of a page or a section of your web or mobile property. Read more about Content Types.

   For this example website, five content types are required: Header, Footer, Home, About Us, and Products. For quick integration, we have already created these content types. You simply need to import them to your stack. (You can also create your content types. Learn how to do this).
   

   To import the content types, save the zipped folder of the JSON files given below on your local machine. Extract the files from the folder. Then, go to your stack in Contentstack and access the “Content Models” menu from the left panel. Click the “Import” button, and select the JSON file saved on your machine.

   Here’s a brief overview of all the content types required for this project.
   

   • Header: The 'Header' content type lets you add content for the site's header section.
   • Footer: The 'Footer' content type enables you to add content for the footer section of your site.
   • Home: The 'Home' content type lets you create content for the home page of your site.
   • Products: The 'Products' content type enables you to enter content for the products.
   • About Us: The 'About Us' content type lets you add content for the site's About Us page.

   Download all content types

   Now that all the content types are ready let’s add some content for your website.

4. Adding content

   Create and publish entries for the ‘Home’, ‘About Us’ and ‘Products’ content types.

   Add an entry for 'Home' and 'About Us', and a few entries for the 'Products' content type. Save and publish these entries. Learn how to create and publish entries.

   Create and publish entries for the ‘Header’ and ‘Footer’ content types

   Using the ‘Header’ content type, add the name and other details of your site. Similarly, add footer content using the ‘Footer’ content type.

   With this step, you have created sample data for your website.
   

5. Setting up 'metalsmith-contentstack'

   You can clone a copy of our sample project hosted here. Once cloned, your folder structure would look like this:

   • hooks/: The hooks folder holds your hooks/ plugins
   • layouts/: The 'layouts' folder would hold all your templates
   • partials/: The partials folder holds your partial content type template and CSS
   • src/: The `./src` directory includes the configuration information
   • index.js: The index.js file is responsible for starting up the application
   • package.json: The package.json file holds the package information

6. Build and configure website

   To get your app up and running quickly, we have created a sample static web app (using Node.JS) for this project. You simple need to download it and edit the configuration.

   Download code

   Note: The website uses the Content Delivery API (which has in-built CDN support) to deliver content to the website. Read more about our CDN-enabled content delivery system.

   Once you have downloaded the project, add your Contentstack API Key, Delivery Token, and Environment to the project. (Learn how to find your Stack's API Key and Delivery Token. Read more about Environments.)

   The index.js file would look something like this:

   .use(contentstack({
     api_key: '<< api_key >>',
     access_token: '<< delivery_token >>',
     environment: process.env.NODE_ENV || 'development'
   ...
   

   Note: Mention the environment name that you created in Contentstack.

   Fire up your terminal (command prompt or similar on Windows), point it to your project location, and run the following:

   $ npm install
   $ npm start
   

   This will initiate your project and create a build of static files in your project folder named `build`.

7. Go live

   You can release your application to the live environment by deploying it on any cloud-hosting service. In this tutorial, we have used netlify, read more about deploying on netlify here.

   $ npm install netlify-cli -g
   $ cd ./build
   $ netlify deploy
   

   You can also set up continuous integration with netlify and metalsmith. Read more about it here.

Your static website should now be up and running!

Additional Resource: Gatsby is another fast and powerful static site generator. To know how to use it with Contentstack to build websites, refer to our document on how to build a sample website using Gatsby and Contentstack.