ramazanebci/Hexo-ejs_Auto_kroma

Hexo(Static website generator), ejs, Node.js, html, Javascript

Autokroma Website

Install

$ npm install hexo-cli -g
$ npm install

Development

Run server

$ hexo s

For Windows

$ npm run server_win

Dev tasks

$ npm run dev

Go to localhost:4000

Edit files in /themes/autokroma. /!\ Don't edit the themes/autokroma/source folder!

Deploy

1. Generate the static files:

$ npm run generate

For Windows

$ npm run generate_win

2. Commit and push to master
3. Go to GitLab > CI / CD > Pipelines
4. Click on the double arrow > Deploy

PS: If error during generation on Mac try :

$ brew install libtool automake autoconf nasm

If needed, clean cache

$ hexo clean

Generate new blog post

$ hexo new Name-of-the-post

Generate new page

$ hexo new page Name-of-the-page

To add it in the menu, edit the menu in themes/autokroma/_config.yml

Generate new product

1. Create a new page

   $ hexo new page Name-of-the-product
   

2. Edit the following yml in the index.md

   ---
   title: Description
   product: # Name of the Product (string)
   order: 1
   tagline: # Description of the product (string)
   mainAction:
     label: # Main link label (string)
     url: # Main link url (url)
   hero:
     actions:
       - label: # link label (string)
         url: # link url (url)
     image: # background image (url)
     video: # Feature video (YouTube ID)
     colors: # Change background-color (optionnal)
       - '#293351'
       - '#B4003D'
   ---

3. Add the features in a features subfolder with the following yml

   ---
   title: # Title of the feature (string)
   order: # order in the page (integer)
   image: # illustration url
   ---

4. Add the new product in the menu in themes/autokroma/_config.yml

Create new product subpage

1. Create a folder inside the product folder
2. Create a file index.md
3. Add the following yml

   ---
   title: # Title of the subpage (string)
   product: # Name of the product (string)
   order: # Order in the product menu (integer)
   ---

Structure

The HTML is generated by Hexo using the ejs language, the files are located the the /layout folder and is structured as:

1. Pages - The different layouts of pages:
   1. Archive - Blog index page
   2. Article - Blog post pages
   3. Home - Homepage
   4. Product - Product page. Ex: AfterCodecs
2. Partials - Partials are small piece of reusable code like header, footer, icon, etc.
3. aescripts - Layout for export to aescripts.com
4. Others files - The other files are mainly redirection to the right page.

Styles

The styles are written in the /dev/scss folder. It used scss language and is structured as:

1. Settings - The settings folder is used to define all the scss variables, functions and mixins.
2. Base - The base folder is used for the styles as the highest level. Only element without selectors (html {}, button {}...). It's used for css reset, document parameters (general font-size, color...) or overwrite a default behavior of an element.
3. Layout - The layout folder contains the style of elements the will structure the page as container, grid... It also contains big components present on all the pages like header and footer.
4. Particles - The particles folder includes reusable components that can appear in different context such as button, input, icon...
5. Components - The components folder contains the larger components
6. Utilities - The utilities folder includes utility classes that helps to do small things: center text, add margin to element, change the color of an element...
7. Custom - the _custom.scss file is used for quick and dirty fixes. Avoid as much as possible.

All the classes are prefixed by the first letter of the folder they are located in to avoid duplication and to make it easier to find. Ex: in components folder, all classes are prefixed by c-.

To name classes, use the BEM convention. See the doc for more informations.

Scripts

The scripts are written in the /dev/js folder. It used normal JavaScript with jQuery and is structured as:

1. Plugins - The plugins folder is used for the external library.
2. Modules - The modules folder contains every custom script.

Icons

To create a new icon, add a new svg file with dimensions of 24x24px in the /dev/img/icons folder. The icon should be an outpath filled in black.

To use it in your .ejs files, use the partial:

<%- partial('_partial/icon', {name: 'your-file-name', classes: 'optionnal-classes'}) %>

Images

For your images, you can just drop them in the /dev/img folder. They will be optimized by gulp.