Euruko 2020-2021

This is the website for Euruko 2020-2021.

Overview

Built using Victor Hugo.

The site uses Hugo as a static site generator and Webpack as your asset pipeline.

Deployments

⚠️ The main branch is deployed automatically! If you make changes to the main branch, they WILL go live on the internet.

Usage

❗ Prerequisites

You should have the following installed:

• node (the latest LTS version)
• yarn
• hugo (v0.57+)

Next step, clone this repository and run:

yarn install

👷 Development

While developing the website, use:

yarn start

or for developing your website with hugo server --buildDrafts --buildFuture, use:

yarn run preview

Then visit http://localhost:3000/ - or a new browser windows popped-up already - to preview your new website. Webpack Dev Server will automatically reload the CSS or refresh the whole page, when stylesheets or content changes.

📦 Static build

To build a static version of the website inside the /dist folder, run:

yarn run build

To get a preview of posts or articles not yet published, run:

yarn run build:preview

See package.json for all tasks.

Structure

|--site                // Everything in here will be built with hugo
|  |--assets           // Stores all the files which need be processed by Hugo Pipes
|  |--content          // Pages and collections - ask if you need extra pages
|  |--data             // YAML data files with any data for use in examples
|  |--layouts          // This is where all templates go
|  |  |--partials      // This is where includes live
|  |  |--index.html    // The index page
|  |--static           // Files in here ends up in the public folder
|--src                 // Files that will pass through the asset pipeline
|  |--css              // Webpack will bundle imported css separately
|  |--index.js         // index.js is the webpack entry for your CSS & JS assets

Basic Concepts

You can read more about Hugo's template language in their documentation here:

https://gohugo.io/templates/overview/

The most useful page there is the one about the available functions:

https://gohugo.io/templates/functions/

The src/index.js file is the entrypoint for webpack and will be built to /dist/main.js

You can use ES6 and use both relative imports or import libraries from npm.

Any CSS file imported into the index.js will be run through Webpack, compiled with PostCSS Next, and minified to /dist/[name].[hash:5].css. Import statements will be resolved as part of the build.

Environment variables

To separate the development and production - aka build - stages, all tasks run with a node environment variable named either development or production.

You can access the environment variable inside the theme files with getenv "NODE_ENV". See the following example for a conditional statement:

{{ if eq (getenv "NODE_ENV") "development" }}You're in development!{{ end }}

All tasks starting with build set the environment variable to production - the other will set it to development.

Deploying to GitHub Pages

1. Push your changes
2. Run yarn run deploy, this will first build a production version of the site and then deploy to GitHub pages