Hugo + Tailwind CSS Starter and Boilerplate
Hugoplate is a free starter template built with Hugo, and TailwindCSS, providing everything you need to jumpstart your Hugo project and save valuable time.
Made with β₯ by Zeon Studio
If you find this project useful, please give it a β to show your support.
## π What's Included
We have included almost everything you need to start your Hugo project. Let's see what's included in this template:
### π Key Features
- π₯ Multi-Authors
- π― Similar Posts Suggestion
- π Search Functionality
- π Dark Mode
- π·οΈ Tags & Categories
- π Netlify setting pre-configured
- π Support contact form
- π± Fully responsive
- π Write and update content in Markdown
- π¬ Disqus Comment
- π³ Syntax Highlighting
### π 15+ Pre-designed Pages
- π Homepage
- π€ About
- π Contact
- π₯ Authors
- π€ Author Single
- π Blog
- π Blog Single
- π« Custom 404
- π‘ Elements
- π Privacy Policy
- π·οΈ Tags
- π·οΈ Tag Single
- ποΈ Categories
- ποΈ Category Single
- π Search
### π¦ Tech Stack
- [Hugo](https://gohugo.io/)
- [Tailwind CSS](https://tailwindcss.com/)
- [PostCSS](https://postcss.org/)
- [PurgeCSS](https://purgecss.com/)
- [AutoPrefixer](https://autoprefixer.github.io/)
- [Hugo Modules](https://gohugo.io/hugo-modules/)
- [Markdown](https://markdownguide.org/)
- [Prettier](https://prettier.io/)
- [Jshint](https://jshint.com/)
- [Netlify](https://www.netlify.com/)
- [Vercel](https://vercel.com/)
- [Github Actions](https://github.com/features/actions)
- [Gitlab Ci](https://docs.gitlab.com/ee/ci/)
- [AWS Amplify](https://aws.amazon.com/amplify/)
---
## π Getting Started
First you need to `clone` or `download` the template repository, and then let's get started with the following process:
### βοΈ Prerequisites
To start using this template, you need to have some prerequisites installed on your machine.
- Hugo Extended v0.115+
- Node v18+
- Npm v9.5+
- Go v1.20+
### π Project Setup
We build this custom script to make your project setup easier. It will create a new Hugo theme folder, and clone the Hugoplate theme into it. Then move the exampleSite folder into the root directory. So that you can start your Hugo server without going into the exampleSite folder. Use the following command to setup your project.
```bash
npm run project-setup
```
### π Install Dependencies
Install all the dependencies using the following command.
```bash
npm install
```
### π Development Command
Start the development server using the following command.
```bash
npm run dev
```
### π¬ Still Confused? Watch a Quick Video
https://github.com/zeon-studio/hugoplate/assets/58769763/4a501831-cc79-4427-b2a5-3f1101e90466
---
## π Advanced Usage
We have added some custom scripts to make your life easier. You can use these scripts to help you with your development.
### π Update Modules
We have added a lot of modules into this template. You can update all the modules using the following command.
```bash
npm run update-modules
```
### π Remove Dark Mode
If you want to remove dark mode from your project, then you had to do it manually from everywhere. So we build a custom script to do it for you. you can use the following command to remove dark mode from your project.
```bash
npm run remove-darkmode
```
---
## π Build And Deploy
After you finish your development, you can build or deploy your project to almost everywhere. Let's see the process:
### π Build Command
To build your project locally, you can use the following command. It will purge all the unused CSS and minify all the files.
```bash
npm run build
```
### π Deploy Process
We have provided 5 different platform deploy platform configuration with this template, so you can deploy easily.
- [Netlify](https://www.netlify.com/)
- [Vercel](https://vercel.com/)
- [Github Actions](https://github.com/features/actions)
- [Gitlab Ci](https://docs.gitlab.com/ee/ci/)
- [AWS Amplify](https://aws.amazon.com/amplify/)
And if you want to Host some other hosting platforms. then you can build your project, and you will get a `public` folder. that you can copy and paste on your hosting platform.
> **Note:** You must change the `baseURL` in the `hugo.toml` file. Otherwise, your site will not work properly.
---
## π Guide to Staying Compliant
### π Reporting Issues
We use GitHub Issues as the official bug tracker for this Template. Please Search [existing issues](https://github.com/zeon-studio/hugoplate/issues). Itβs possible someone has already reported the same problem.
If your problem or idea has not been addressed yet, feel free to [open a new issue](https://github.com/zeon-studio/hugoplate/issues).
### π License
Copyright (c) 2023 - Present, Designed & Developed by [Zeon Studio](https://zeon.studio/)
**Code License:** Released under the [MIT](https://github.comzeon-studio/hugoplate/blob/main/LICENSE) license.
**Image license:** The images are only for demonstration purposes. They have their license, we don't have permission to share those images.