Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/edheltzel/flightdeck-for-hugo
WIP: 🚀 An opinionated Jamstack starter project for Huge, using Hugo's built in asset pipeline.
https://github.com/edheltzel/flightdeck-for-hugo
hugo hugo-boilerplate jamstack jamstack-site jamstack-theme static-site
Last synced: 3 days ago
JSON representation
WIP: 🚀 An opinionated Jamstack starter project for Huge, using Hugo's built in asset pipeline.
- Host: GitHub
- URL: https://github.com/edheltzel/flightdeck-for-hugo
- Owner: edheltzel
- License: wtfpl
- Created: 2021-02-25T21:57:30.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-13T19:56:46.000Z (about 1 year ago)
- Last Synced: 2024-11-29T06:41:37.640Z (2 months ago)
- Topics: hugo, hugo-boilerplate, jamstack, jamstack-site, jamstack-theme, static-site
- Language: HTML
- Homepage:
- Size: 534 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/flight-deck/flightdeck-hugo/releases/latest) [](https://github.com/gohugoio/hugo/releases/latest) [](https://github.com/flight-deck/flightdeck-hugo/blob/master/LICENSE)
Flightdeck for Hugo
An opinionated starter project for Hugo that takes advantage of Hugo's built in asset pipeline.
## What it is
Flightdeck for Hugo is an opinionated starter project for [Hugo](https://gohugo.io/) that takes advantage of Hugo's built in [asset pipeline](https://gohugo.io/hugo-pipes/).
Includes:
- Base templates using HTML with partials creating components.
- Hugo Pipes ready to compile, minify, and MD5-hash for Scss/CSS and JavaScript with environment variables.
- Hugo Pipes for PostCSS using Autoprefixer and PurgeCSS
- Simple Google Analytics integration.
- Imagemin for image optimization
- Please note that Hugo's built in [image processing](https://gohugo.io/content-management/image-processing/) does not work on images located inside of `/static`. This is why we chose to use Gulp and Imagemin.
- Deployment with rsync and [Flightdeck Liftoff](https://github.com/flight-deck/flightdeck-liftoff).
## What it is NOT
Flightdeck for Hugo **IS NOT** a Hugo theme. It **CANNOT** be dropped inside the `/themes` directory.
## Prerequisites
Make sure that Hugo is installed by checking out the [Quick Start Guide](https://gohugo.io/getting-started/quick-start/#step-1-install-hugo) on the Hugo docs... make sure you're running the extended version.
## Usage
First things first, clone this repo:
```shell
git clone [email protected]:flight-deck/Flightdeck-for-Hugo.git MY-HUGO-PROJECT && cd MY-HUGO-PROJECT
```
Then run the Node commands
```shell
pnpm
pnpm start
```
**OR**
```shell
npm install
npm start
```
### Adding Pages
To add main site pages run the `hugo new` command and create a markdown file in the `pages/` directory. Then create a corresponding `html` template file in `layouts/pages/`
Example:
```
hugo new pages/my-new-page.md
```
The `header.html` partial is configured to generate a main site navigation by utilizing [Hugo Menu Templates](https://gohugo.io/templates/menu-templates). The `pages.md` archetype sets each page markdown file to the main menu via front matter.
### Available Scripts
There are 4 available Scripts:
- `pnpm start` - Runs development server with CSS sourcemaps and drafts enabled, as well as the image task with watch.
- `pnpm build:preview` - Runs the server with `production` for the environment with asset minification and postCSS enabled, and optimized images
- `pnpm build` - The same as `build:preview` but builds production ready site in `public` directory with minified/optimized assets
- `pnpm build:images` - Runs gulp images task to optimize images in `./static/img/`
- `pnpm deploy` - uses (Flightdeck Liftoff)[https://github.com/flight-deck/Flightdeck-Liftoff] for deployments, see [Liftoff for usage](https://github.com/flight-deck/Flightdeck-Liftoff#readme)
- Please note: Hugo's built in deployment options currently does not support DigitalOcean
- `pnpm clean:node` - removes only Node dependencies
- `pnpm clean:site` - removes the `public/` directory
- `pnpm purge` - removes everything and does a fresh install using pnpm.
## File Structure
```
│
└──── /archetypes - Hugo archetypes
│
└──── /assets - Source files for scss, js, and images
│ └─── /images - Images INPUT directory used by Gulp
│ └─── /js
│ └─── /scss
│
└──── /content - Hugo Content Directory
│ └─── /pages - Markdown files for main site pages
│ |
│ | _index.md - Site homepage markdown file
│
└──── /layouts - Template files
│ └─── /_default
│ |
│ | baseof.html - Base template
│ │
│ └─── /pages - Template files for main site pages
│ │
│ └─── /partials
│ └─── /site - Site partials
│ │
│ │ footer.html - Site primary
│ │ header.html - Site primary
│ │ meta.html - Site tags
│ │ scripts.html - JavaScript tags before closing </body>
│ │ styles.html - Stylesheets referenced before closing </head>
│ │
│ │ 404.html - 404 Template
│ │ index.html - Home page
│
└──── /static - Hugo static resources
│ └─── /images - Images OUTPUT directory generated by Gulp
│
│ config.yml - Hugo configuration file
│ gulpfile.js - Gulp js file
│ netlify.toml - Netlify configuration file
│ package.json
│ README.md - The README file you're reading right now
```
### Hope you enjoy the flight. 🚀