hugoBasicExample

This repository offers an example site for Hugo and also it provides the default content for demos hosted on the Hugo Themes Showcase.

Using

1. Install Hugo
2. Clone this repository

git clone https://github.com/gohugoio/hugoBasicExample.git
cd hugoBasicExample

1. Clone the repository you want to test. If you want to test all Hugo Themes then follow the instructions provided here

2. Run Hugo and select the theme of your choosing

hugo server -t YOURTHEME

1. Under /content/ this repository contains the following:

• A section called /post/ with sample markdown content
• A headless bundle called homepage that you may want to use for single page applications. You can find instructions about headless bundles over here
• An about.md that is intended to provide the /about/ page for a theme demo

1. If you intend to build a theme that does not fit in the content structure provided in this repository, then you are still more than welcome to submit it for review at the Hugo Themes respository

License

Hugo Claris MIT licensed.

Hugo Claris — Responsive, Modular, Modern

Visit an example website of Hugo Claris

· · · ·

Claris is a theme for Hugo, the world’s fastest static website generator.

• Mobile-first: Claris works great on mobile devices as well as on laptops, iMacs, and desktop PCs.
• Responsive: Adapts its layout and design to the device and orientation of the user.
• Modular: Implemented as a Hugo module, which is just a Go module.

Responsive

Mobile

iPhone 12 Pro (390x844px)

Desktop

WXGA 1280x720px

Getting Started with Hugo Claris

Follow these steps to start using Claris for your Hugo site.

1. Get Hugo

Ensure that you have Hugo installed on your system. You need Hugo’s extended version (0.121.0 or later). Install it from the official Hugo website.

2. Initialize your Hugo site

To use Claris as a Hugo module, create and initialize your Hugo site (if you haven't already) in two steps:

2a. Create a new Hugo site

hugo new site your-hugo-site

2a. Initialize your site as a Hugo module

Determine, where you will put the repository of your Hugo site. The URL of the repository minus the scheme (https://) will be the identifier of your site's Hugo module.

For example, if you aim to put your site on GitHub and your GitHub user name is your-username, you would run:

hugo mod init github.com/your-username/your-hugo-site

3. Install the Module for Claris

Now, add Claris as a module in the main config file of Hugo located in config/_default/hugo.toml:

[module]
  [[module.imports]]
    path = "github.com/simonheimlicher/hugo-claris"

Or, in your config/_default/hugo.yaml:

module:
  imports:
    - path: github.com/simonheimlicher/hugo-claris

The module will be fetched automatically by Hugo in the next and final step.

4. Run hugo server Locally

Start the Hugo server with:

hugo server

Your site should now be running locally, accessible at http://localhost:1313. You can see Claris in action!

4. Deploy to Cloudflare Pages

To deploy your Hugo site with the Claris theme to Cloudflare Pages:

• Push your site to a GitHub repository.
• Set up a new project on Cloudflare Pages, linking it to your GitHub repository.
• In the build settings, set the build command to hugo and the build output directory to public.
• Cloudflare Pages will build and deploy your site every time you push to your repository.

Contributing

We welcome contributions to Claris! Whether it's bug fixes, feature additions, or improvements to the documentation, your help is appreciated. Please read our Code of Conduct and Contributing Guide for guidance on how to contribute.

License

Claris is MIT licensed.

---

For more detailed information and advanced configuration options, visit the Hugo Claris repository on GitHub.