Sendit

Sendit is a polished, marketing website template for Hugo. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Optimised for editing in CloudCannon

Setup

Get a workflow going to see your site's output (with CloudCannon or Hugo locally).

Develop

Sendit was built with Hugo version 0.96.0, but should support newer versions as well.

Prerequisites

• Hugo install. brew install hugo
• Go install. brew install go

Quickstart

1. In the terminal at the root dir, run: npm i
2. Start site and bookshop: npm run dev OR site alone: npm run start

• By default bookshop live browser will be at : http://localhost:30775/
• By default the site will be at : http://localhost:1313/

Editing

Sendit is set up for adding, updating and removing pages, components, posts, portfolio items, company details and footer elements in CloudCannon.

Company details

• Reused around the site to save multiple editing locations.
• Set in the Data / Company section.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Data section with respective names

Sendit

Sendit is a polished, marketing website template for Eleventy. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Configurable theme colors
• Optimised for editing in CloudCannon

Setup

Get a workflow going to see your site's output (with CloudCannon or locally).

Prerequisites

Quickstart

2. Run npm i to install the modules.
3. Run npm run start to run the project. this will create a _site folder, where all the developed file will remain.

By default the site will be at http://localhost:8080

Editing

Sendit is set up for adding, updating and removing pages, components, posts, navigation and footer elements in CloudCannon.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Navigation section with respective names

SEO details and favicon

• Favicon and site SEO details are set in the Data / Site section
• SEO details can also be set in pages for page specific details

Theme colors

• Theme colors can be set in Theme Palette / Theme
• The main colors are set and variants of them are computed
• The colors will update on the next build

Sendit

Sendit is a polished, marketing website template for NextJS. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Configurable theme colors
• Optimised for editing in CloudCannon

Setup

1. Get a workflow going to see your site's output (with CloudCannon or Next.js locally).

Develop

Sendit is built with Next.js (version 13.0.4).

$ npm install
$ npm run dev

Editing

Sendit is set up for adding, updating and removing pages, components, posts, portfolio items, company details and footer elements in CloudCannon.

Posts

• Add, update or remove a post in the Posts collection.
• The Staff Author field links to members in the Staff collection.
• Change the defaults when new posts are created in content/posts/_defaults.md.

Company details

• Reused around the site to save multiple editing locations.
• Set in the Data / Company section.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Data section with respective names

Theme colors

• Theme colors can be set in Data / Theme
• The main colors are set and variants of them are computed
• The colors will update on the next build

Sendit

Sendit is a polished, marketing website template for SvelteKit. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Optimised for editing in CloudCannon

Prerequisites

Requires:

• node: ^16.24.0
• npm: ^8.3.1

Setup

Run npm install to install the required packages.

Developing

If you are working locally, you can run the following command to start a development server:

npm run dev

By default the site will be at http://localhost:5173/.

Building

If you are working locally, you can run the following command to build a production version of this site:

npm run build

The above command is run when building this site in CloudCannon (unless configured otherwise).

You can preview the production build with npm run preview. This will serve the site at http://localhost:4173/.

Editing

Sendit is set up for adding, updating and removing pages, components, posts, navigation and footer elements in CloudCannon.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Data section with respective names

SEO details and favicon

• Favicon and site SEO details are set in the Data / Site section
• SEO details can also be set in pages for page specific details

Sendit

Sendit is a polished, marketing website template for Gatsby. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Optimised for editing in CloudCannon

Setup

1. Get a workflow going to see your site's output (with CloudCannon or Gatsby locally).

Develop

Sendit is built with Gatsby (version 5.2.0).

$ npm install
$ npm start

Editing

Sendit is set up for adding, updating and removing pages, components, posts, portfolio items, company details and footer elements in CloudCannon.

Posts

• Add, update or remove a post in the Posts collection.

Company details

• Reused around the site to save multiple editing locations.
• Set in the Data / Company section.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Data section with respective names

Theme colors

• Theme colors can be set in Data / Theme
• The main colors are set and variants of them are computed
• The colors will update on the next build

Sendit

Sendit is a polished, marketing website template for Astro. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Configurable theme colors
• Optimised for editing in CloudCannon
• Live, visual editing powered by Bookshop

Setup

1. Get a workflow going to see your site's output (with CloudCannon or Astro locally).

Develop

Sendit is built with Astro.

$ npm install
$ npm run dev

Editing

Sendit is set up for adding, updating and removing pages, components, posts, portfolio items, company details and footer elements in CloudCannon.

Posts

• Add, update or remove a post in the Posts collection.
• The Staff Author field links to members in the Staff collection.
• Change the defaults when new posts are created in content/posts/_defaults.md.

Company details

• Reused around the site to save multiple editing locations.
• Set in the Data / Company section.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Data section with respective names

Theme colors

• Theme colors can be set in Data / Theme
• The main colors are set and variants of them are computed
• The colors will update on the next build

Sendit

Sendit is a polished marketing website template for Nuxt. Browse through a live demo.

Features

• Pre-built pages
• Pre-styled components
• Blog with pagination and category pages
• Configurable navigation and footer
• Multiple hero options
• Configurable theme colors
• Optimised for editing in CloudCannon

Specifications

Sendit is built with Nuxt 3.

Components are built with Vue.js using the Composition API, and are structured using Bookshop.

This project uses the Nuxt Content module for handling Markdown content, with Document-driven mode for routing and for fetching page data.

Setup

Clone this repository to your machine. The relevant build scripts can be found in the package.json:

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build static site
$ npm run generate

# launch server with a preview of the built site
$ npm run preview

You can also add this site to CloudCannon by clicking the Deploy to CloudCannon button at the top of this page.

Editing

Sendit is set up for adding, updating and removing pages, components, posts, company details and navigation elements in CloudCannon.

Components

• Pages are built using Vue components.
• Components are structured using the Bookshop system.

Pages

• Set up for live editing in CloudCannon's Visual Editor.
• Changing the component data will re-render the page, letting you preview your changes without needing to rebuild.

Posts

• Add, update and/or remove posts in the Blog collection.
• Edit posts' Markdown content in the WYSIWYG Content Editor.

Nav/footer details

• Reused around the site to save multiple editing locations.
• Set in the Data section with respective names.

Theme colors

• Theme colors can be set in Data / Theme.
• The main colors are set and variants of them are computed.
• The colors will update on the next build.

SSG

• This site is build using the Nuxt Content module to generate a static site. SSR features are disabled.
• The project structure uses Nuxt Content's Document-driven mode. Read their docs here: https://content.nuxtjs.org/guide/writing/document-driven
• Page data is fetched with the useContent() composable.
• Page components are organized in an array named content_blocks within the page's front matter.