All Projects → forestryio → Forestry.io

forestryio / Forestry.io

Forestry.io website

Projects that are alternatives of or similar to Forestry.io

Eleventy Netlify Boilerplate
A template for building a simple website with the Eleventy static site generator
Stars: ✭ 359 (+54.08%)
Mutual labels:  cms, jamstack
Hugo Boilerplate
A Hugo boilerplate for building modern websites
Stars: ✭ 58 (-75.11%)
Mutual labels:  hugo, jamstack
Wowchemy Hugo Modules
🔥 Hugo website builder, Hugo themes & Hugo CMS. No code, build with widgets! 创建在线课程,学术简历或初创网站。
Stars: ✭ 6,093 (+2515.02%)
Mutual labels:  cms, hugo
snipcart-hugo-integration
Hugo Website Tutorial with a Live Static E-Commerce Example
Stars: ✭ 38 (-83.69%)
Mutual labels:  hugo, jamstack
Gatsby Starter Netlify Cms
Example gatsby + netlify cms project
Stars: ✭ 1,932 (+729.18%)
Mutual labels:  cms, jamstack
Jamstackthemes
A list of themes and starters for JAMstack sites.
Stars: ✭ 298 (+27.9%)
Mutual labels:  hugo, jamstack
Cms
Statamic 3: The Core Composer Package
Stars: ✭ 965 (+314.16%)
Mutual labels:  cms, jamstack
hugo-theme-massively
Massively theme for Hugo static site generator
Stars: ✭ 113 (-51.5%)
Mutual labels:  hugo, jamstack
Ghost
Turn your audience into a business. Publishing, memberships, subscriptions and newsletters.
Stars: ✭ 39,261 (+16750.21%)
Mutual labels:  cms, jamstack
Strapi
🚀 Open source Node.js Headless CMS to easily build customisable APIs
Stars: ✭ 41,786 (+17833.91%)
Mutual labels:  cms, jamstack
geeky-hugo
Geeky is a Personal Hugo blog theme focused on high speed. Geeky is fully responsive, Superfast, and powered by Bootstrap v5.
Stars: ✭ 44 (-81.12%)
Mutual labels:  hugo, jamstack
Netlify Statuskit
Netlify StatusKit is a template to deploy your own Status pages on Netlify.
Stars: ✭ 216 (-7.3%)
Mutual labels:  hugo, jamstack
influencer-hugo
Influencer is a Hugo theme for book authors and writers. It has also Snipcart supports for order books and payments.
Stars: ✭ 66 (-71.67%)
Mutual labels:  hugo, jamstack
Ghost Cli
CLI Tool for installing & updating Ghost
Stars: ✭ 313 (+34.33%)
Mutual labels:  cms, jamstack
navigator-hugo
Navigator Business theme powered by Hugo. It also could be used for a personal portfolio.
Stars: ✭ 133 (-42.92%)
Mutual labels:  hugo, jamstack
Jamstack Cms
Modern full stack CMS. Built with Gatsby, GraphQL, AWS Amplify, and Serverless technologies.
Stars: ✭ 702 (+201.29%)
Mutual labels:  cms, jamstack
persian-hugo
Persian is a box design personal blog theme based on Bootstrap and powered by Hugo. It is very responsive and perfectly fits on any sized screen device.
Stars: ✭ 32 (-86.27%)
Mutual labels:  hugo, jamstack
trailing-slash-guide
Understand and fix your static website trailing slash issues!
Stars: ✭ 255 (+9.44%)
Mutual labels:  hugo, jamstack
Jekyll Netlify Boilerplate
A simple Jekyll template for creating a fast, static website on Netlify
Stars: ✭ 62 (-73.39%)
Mutual labels:  cms, jamstack
Netlify Cms
A Git-based CMS for Static Site Generators
Stars: ✭ 14,776 (+6241.63%)
Mutual labels:  cms, jamstack

Build forestry.io

Forestry Website

This site wraps Hugo with Gulp as your asset pipeline.

PostCSS and Webpack + Babel are used for CSS and JS compiling & transpiling.

ImageMin is used to optimize and compress images, and SVG Sprite is used to generate a SVG Sprite.

BrowserSync is used for providing a modern local development experience, allowing you to preview your site on multiple devices in sync.

BrowsersList is used for configuring Browser support.

Installation

Prerequisites

To use Gulp, you must have Node and NPM installed.

Setup

Once the prerequisites are installed, clone the repository to your local machine, and then run:

npm install

This will install Hugo as well as all of the Node dependencies needed to run your Hugo environment. This may take a little while!

Development

All development tasks are performed using npm run. See "scripts" in package.json for a full list of commands.

Local Development

Local development is powered by BrowserSync, you will be able to develop sites rapidly through:

  • A local development server at http://localhost:3000/.
  • Automatic CSS & JS updates without reloading the page
  • Automatic page reloads when content is changed

Running the local development server is as simple as running:

npm start

This will display all draft, future-dated, or expired content, which is not included in your production build.

If you'd like to develop with the site as it will appear in production, run:

npm run preview

Production Build

To generate a final production build on your local machine you can run:

npm run build

The fresh production build of your site will end up in the dist/ directory.

Environment Variables

This project uses environment variables to handle the CircleCI deployment, as well as the Algolia index.

For local development, environment variables can be included in .env.js. See .env.js.stub for the available variables.

Project Structure

.
├── .tmp/                  // Temporary directory for development server
├── dist/                  // The production build
├── hugo/                  // The Hugo project, with all content and static files
|   ├── .forestry/         // Contains Forestry.io configuration files
|   ├── content/           // Where all site content is stored 
|   ├── data/              // TOML, YAML or JSON files containing site data 
|   ├── layouts/           // Your site's layouts
|   |   ├── partials/      // Your site's partials
|   |   └── shortcodes/    // Your site's shortcodes
|   ├── static/            // Where all static files live
|   |   ├── css/           // Where compiled CSS files live
|   |   ├── js/            // Where compiled JS files live
|   |   ├── img/           // Where theme images live
|   |   └── uploads/       // Where user uploads are stored
|   └── config.toml        // The Hugo configuration file
└─── src/
     ├── css               // CSS source files to be compiled to /css/
     ├── scss              // Sass source files to be compiled to /css/
     ├── js                // JS source files to be compiled to /js/
     └── img               // Unoptimized raw image source files to be compiled to /img/

Images

Images found in src/img/ will be optimized and compressed and sent to hugo/static/img/ for usage in your layouts and content.

Inline SVG

Any SVGs found in src/img/ will be combined into a single SVG Sprite at hugo/static/svg/sprite.symbol.svg

This can then be used in layouts as a Hugo partial:

{{ partial "svg" (dict "id" "logos--github" "class" "example-class" "width" "64" "height" "64") }}

Algolia

Algolia powers the search for the documentation and the blog. The Algolia index is generated by Hugo, using custom output formats.

These are found in config.toml:

  • outputformats.Algolia: the Algolia search index
  • outputformats.OpenSearch: the OpenSearch.org template for notifying search engines about the site search

Any Hugo section can have an index generated for it by adding the following to the front matter:

outputs:
- algolia
- opensearch

The templates for generating the search indexes and open search definitions are:

  • layouts/_default/list.algolia.json
  • layouts/_default/list.opensearch.xml

They are automatically added to the head of the page in layouts/partials/head.html

S3 Redirects

Hugo aliases handles the sites redirects. A valid S3 redirects configuration is generated using custom output formats.

This is found in config.toml:

  • outputformats.Redirects: the redirects output format

Any Hugo section can have an index generated for it's children by adding the following to the front matter:

outputs:
- redirects

Redirects generated using content/_index.md to generate redirects for all pages on the site.

Testing & Code Quality

This boilerplate comes with standard ESLint, StyleLint, and Prettier configurations that will lint and clean your CSS and JS for errors or common style issues, which work with most popular IDEs.

Popular IDE plugins:

The tests can also be run from the command line:

  • JS: npm run eslint
  • CSS: npm run stylelint

If you want to automatically fix lint errors, you can do this from the command line as well:

  • JS: npm run eslint:fix
  • CSS: npm run stylelint:fix

Cleanup

This boilerplate is self-cleaning, and will remove the production dist/ and development .tmp/ folders every time a command is run to ensure that their contents are always up to date.

If you wish to manually cleanup, run:

npm run clean

Configuration

All build tasks are handled by Gulp and are located in gulpfile.babel.js. All parts of the build are configurable in discrete files to make management easy.

Paths

All build source and destination paths can be configured from gulp.config.js.

Hugo

The build commands for Hugo can be configured from gulp.config.js. Build commands are set based on the GENERATOR_ARGS environment variable, and will fallback to NODE_ENV if not provided.

Four options are available:

  • default: the default build commands that are always run
  • development: additional build commands for the development server
  • preview: the additional build commands for the development server when serving production build
  • production: additional build commands for production builds and preview server

BrowserSync Development Server

The configuration for BrowserSync is found in browsersync.config.js

CSS/SASS

The configuration for PostCSS is found in postcss.config.js

Javascript

The configuration for Webpack is found in webpack.config.js

Browser support

Both PostCSS and Webpack use .browserslistrc to decide on browser support when compiling.

Tips & Resources

  • To learn about how to develop with Hugo, see Hugo's documentation
  • To learn how to use Hugo's templating system, see the documentation
  • Static files should be stored in the hugo/static/ folder as they should appear in the built site E.g, a CNAME file should be stored at hugo/static/CNAME to become /CNAME
  • Javascript files are compiled from the root of src/js/ to js/{filename}.js
    • Javascript can be written using ES6, supporting require() and import statements from npm packages and local JS files
  • CSS files are compiled from the root of src/css/ to css/{filename}.css
    • Import statements are resolved and included in the compiled CSS files
  • For compatibility with Forestry or other CMSs, ensure that compiled CSS and JS files in the hugo/ folder are always committed
  • Environment variables are provided to your templates, which can be accessed in templates as follows: {{ getenv "HUGO_ENV" }}
    • For development pipelines, this is equal to development
    • For production pipelines, this is equal to production
    • For Forestry's in-app preview feature, this is equal to staging
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].