Don't edit the HTML files of the website directly! Instead, you have to update the PUG version of the pages and then generate the new HTML pages following the instructions on this page. |
Check out the website from Git:
$ git clone https://github.com/apache/ignite-website.git |
Note, that all the commits to the master branch update the production version of the website (https://ignite.apache.org) on-the-fly. Thus, we encourage all website contributors to set up a local version and check changes before pushing anything into production. Contributors have to send pull-requests through the Git repository. Committers should send changes at least for a post-commit review to the website maintainers ( Mauricio Stekl ).
The task-manager gulp.js (https://gulpjs.com/) is already set in the Apache Ignite Repository. If a new person starts working, they need to do the following:
- Clone Apache Ignite Repository;
- Install node.js, version 13.2 or later (support for ES-imports is needed) and npm;
- Install the gulp cli utility globally with the `npm install --global gulp-cli` command (version 2.3.0 or later is required);
- Go to the root directory of the repository and install all dependencies with `npm install` command;
- Run the development with the `gulp` command.
When the gulp command is run, the following will occur:
- All pug files of pages are recompiled;
- The local server at localhost:3000 will be launched, and the browser will open;
- File-change tracking with automatic recompilation and live-reload will be activated (BrowserSync - https://browsersync.io/ is used).
- Page code is in the /_src folder. Files with the «.pug» extension are written using the PUG preprocessor, https://pugjs.org/. It allows embedding certain files inside others, prevents repetition of the same code on different pages, and also removes the need to keep track of HTML validity and formatting. When the site is under development and the pug files are being updated, gulp automatically compiles these files into html, saving the name and path to the root folder. The local server with live-reload works in this folder.
- CSS and JS code is not compiled, no preprocessors are used. CSS code is displayed in the browser as is, and is located in the /css folder. The JavaScript code is located in the /js folder and is not compiled either. In the gulp assembly, the live reload is configured for both CSS and JS files, which refreshes the browser after any change of css or js in the /css and /js folders respectively. Thus, you can edit styles directly in the /css folder.
- The images are in the /img folder.
To build a website, run the `gulp build` command. This recompiles all the pug files in the /_src folder and saves them in the root directory of the project.
Old code from the current branch has also been moved to the /build folder, namely the folders:
/docs/
/_docs/
/jcache/
/releases/
/assets/
.asf.yaml
.htaccess
These folders and files are there as is, they are ignored when building the site with the gulp build command.
The tables with download links can be found in _src/components/download-*.pug files.
Upcoming events are edited in the source code in /_src/events.pug. During development or when building, the code is compiled into /events.html
Past events are a little more complicated. Since there were more than 300 events on your website, we parsed all the content and decided to structure it as json arrays. The /_src/_components/events/ folder contains several pug files named according to the year. The json array is located at the top of these files. Each element of the array is a js-object. It has title, link, loc, speaker and data properties. Each element of the array is converted into a separate card of the past event. By analogy, you can add new objects to these arrays. Then, when compiling the files, they will automatically appear in the desired tabs.
/_src/_blog/ - blog post pages. After running the build command, the codes are compiled into *.html files and stored into /blog/ folder.
/_src/_components/templates - layouts that are used to create the blog pages
Attributes
All blog posts must have front matter attributes.
---
title: "Blog post’s title"
author: "Blog post’s author"
date: YYYY-MM-DD (published date)
tags:
- tag1
- tag2
- etc
—
Summary
The full blog post will be displayed by default. If you want to show only a summary of this post on the blog list page, please use a special tag
<!-- end -->
You can add it anywhere in your blog post and everything before this tag will be displayed as a summary.
Build
In addition to the standard commands (gulp build, gulp watch), we have added an additional one to speed up the development process:
gulp blog
It will generate ONLY blog pages.
Use the gulp sitemap command to update the sitemap - ./sitemap.xml file if necessary. Currently, the main pages, as well as the documentation from the /docs/2.11.0/ folder, get into the sitemap. The paths to the documentation files are transformed into /docs/latest/ and all the html files inside have the .html extension removed. If you want to change the documentation version in the sitemap, change the sitemap() code in the ./gulpfile.js file.