Editor-friendly templates

Vonge

A great portfolio/blog template with page builder

portfolio

Choose your SSG:

Deploy to CloudCannon Deploy to CloudCannon

Vonge is a Personal portfolio/blog site template for Jekyll. Browse through a live demo. Increase the web presence of your brand with this configurable theme.

Vonge was made by CloudCannon, the JAMStack Cloud CMS. The component library is built and maintained for use with Bookshop

Find more templates, themes and step-by-step Jekyll tutorials at CloudCannon Community.

Features

  • Component library for website building
  • Fully configurable Website
  • Pre-built pages
  • Pre-styled components
  • Blog
  • Category pages
  • Testimonials
  • Portfolio
  • Live editing with CloudCannon
  • Optimised for editing in CloudCannon
  • Search engine optimisation

Develop

Vonge was built with Jekyll version 4.2.1, but should support newer versions as well.

Install the dependencies for Bookshop:

$ npm install

Install the Jekyll dependencies with Bundler:

$ npm run jekyll:install

Run the website:

$ npm start

Important

When running locally, the pagination will not work. Deploy to CloudCannon to see successful pagination.

Vonge is a Personal portfolio/blog site template for Hugo. Browse through a live demo. Increase the web presence of your brand with this configurable theme.

Vonge was made by CloudCannon, the JAMStack Cloud CMS. The component library is built and maintained for use with Bookshop

Find more templates, themes and step-by-step Hugo tutorials at CloudCannon Tutorials.

Features

  • Component library for website building
  • Fully configurable Website
  • Pre-built pages
  • Pre-styled components
  • Blog
  • Category pages
  • Testimonials
  • Portfolio
  • Portfolio tags
  • Live editing with CloudCannon
  • Optimised for editing in CloudCannon
  • Search engine optimisation

Develop

Requirements

This template is built with Hugo Extended v0.143.1 (see hugoVersion in .cloudcannon/initial-site-settings.json). It requires the extended edition of Hugo (for Sass compilation) and a minimum version of v0.128.0 (declared in component-library/config.toml).

Make sure you have installed:

Check your Hugo version and confirm it's the extended edition:

hugo version

Running locally

Install the Node dependencies (Bookshop components are pulled in as Hugo modules, but the Bookshop tooling is installed via npm):

npm i

Then start the local development server:

hugo serve

The site will be available at http://localhost:1313/.

Component browser

To generate the component browser:

npm run bookshop-browser

This will create browser files in the site's static directory. Running a Hugo build after this will show a live component browser at /components.

Troubleshooting

If there is a bookshop error when running locally, try updating bookshop:

npx @bookshop/up@latest

Structure

The bookshop components live in component-library, which is loaded as a Hugo module in site/config.toml.

The site also pulls in the main dependency of github.com/cloudcannon/bookshop/hugo/v3.

For further help with Bookshop, see the Bookshop Guides.