Search
Venture is a polished and modern template for businesses.
Venture is a polished, marketing website template for Eleventy. Browse through a live demo.
Venture is set up for adding, updating and removing pages, components, posts, navigation and footer elements in CloudCannon.
Changes in the data files require the site to be rebuilt to see your changes.
Get a workflow going to see your site's output (with CloudCannon or locally).
npm i
to install the modules.npm run start
to run the project. This will create a _site
folder, where all the developed files will remain.By default the site will be at http://localhost:8080
Venture is built using Bookshop components. Bookshop is a framework that allows you to use component architecture in your static site, and enables live editing in CloudCannon. You can read more about Bookshop and how it integrates with Eleventy here.
Within Venture, there is a components.html
page that allows you to use a feature of Bookshop called Bookshop Browser. When developing locally, you can use localhost:8080/components
to preview your Bookshop components in the context of your site. This /components
page is for local development only, and will not show up in CloudCannon or on your live site.
You can use the "Form" component to create a form with a range of inputs. This component is set up to submit to a CloudCannon inbox as long as you configure the inbox key following the instructions below. If you want to integrate your custom form with custom submission actions you can use the "Embed" component.
The "Form" component has validation and error messages build in.
The site uses the eleventy image plugin to optimize your images.
To keep build times short you can set preserved paths for your image optimizations by setting preserved paths following the instructions below:
Within your site on CloudCannon navigate to Site Settings (found at the bottom of the site sidebar)
Navigate to the configuration tab
Open "caching options"
Add node_modules/,_site/optimized/
to the preserved paths section
This will mean that only new/updated images get optimized on build.
See this blog for more on optimizing images with Eleventy and CloudCannon.
All options in the above list (except YouTube videos) require you to use the "Embed" component.
We have made efforts to prioritize accessibility in our design, but we acknowledge that it may not be perfect. Your feedback is valuable to us, so please feel free to share any suggestions or concerns to help us improve accessibility further.
All blocks have an id field that can be set and then used as a link to that component.
This is helpful (for example) if you want to link to information about your services from the nav without having a fully seperate page for it. You can set the id field in the services block to be services
and then in Data / Nav you can have a link to #services
.
There is a prebuild step with this template to process the user-defined theme variables (such as color_groups
or fonts
, defined in src/_data/theme.yml
) and create associated CSS variables. The file which does this processing is located at utils/fetch-theme-variables.js
.
When developing locally, you can run $ npm run fetch-theme-variables
to execute the preprocessing. This command also runs automatically as part of $ npm run start
.
Deploying your site to CloudCannon, there is a file located at .cloudcannon/prebuild
which contains necessary commands to run before the build step, including $ npm run fetch-theme-variables
.