Page History

Setting Up

Check out the website from 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 (Denis Magda Mauricio Stekl ).

Local deploy of website using apache

Open httpd.conf file located in /etc/apache2, and make following changes:

Load the mod_include module by adding or uncommenting the following line, near the top of the file on Mac OS X 10.10.4:

LoadModule include_module libexec/apache2/mod_include.so

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).

Project structure and files to be changed:

- 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.

Website building

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.

Adding new releases to Downloads

The tables with download links can be found in _src/components/download-*.pug files. 

Editing Upcoming events

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. 

Editing Blog

/_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

• blog.pug - a list of blog posts
• post.pug - a blog post
• tags.pug - a list of blog tags

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.

Site map

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.

...

#ServerName www.example.com:80

...

...

#
# Controls who can get stuff from this server.
#
Require all granted
</Directory>

Replace all that code with the one below :

#ServerName www.example.com:80
#
# Deny access to the entirety of your server's filesystem. You must
# explicitly permit access to web content directories in other
# <Directory> blocks below.
#
<Directory />
    AllowOverride none
    Require all denied
</Directory>
#
# Note that from this point forward you must specifically allow
# particular features to be enabled - so if something's not working as
# you might expect, make sure that you have specifically enabled it
# below.
#
#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "/Users/prachig/ignite-web/website/trunk"
<Directory "/Users/prachig/ignite-web/website/trunk">
    #
    # Possible values for the Options directive are "None", "All",
    # or any combination of:
    #   Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews
    #
    # Note that "MultiViews" must be named *explicitly* --- "Options All"
    # doesn't give it to you.
    #
    # The Options directive is both complicated and important.  Please see
    # http://httpd.apache.org/docs/2.4/mod/core.html#options
    # for more information.
    #
    Options FollowSymLinks Multiviews Includes
    MultiviewsMatch Any
    #
    # AllowOverride controls what directives may be placed in .htaccess files.
    # It can be "All", "None", or any combination of the keywords:
    #   AllowOverride FileInfo AuthConfig Limit
    #
    AllowOverride None
    #
    # Controls who can get stuff from this server.
    #
    Require all granted
</Directory>

Make sure to provide correct values for: 

DocumentRoot "path-to-ignite-website-folder" 

<Directory "path-to-ignite-website-folder">

Locate in your file:

<IfModule mime_module>
...
...
# To parse .shtml files for server-side includes (SSI):
# (You will also need to add "Includes" to the "Options" directive.)
#
#AddType text/html .shtml
#AddOutputFilter INCLUDES .shtml
</IfModule>

Add following lines after comments:

AddType text/html .html
AddOutputFilter INCLUDES .html

Start Apache HTTP Server, in the terminal, using:

$ sudo apachectl start

If this command fails for you try this instead:

sudo apachectl -k start

In your browser, type- localhost:80

Edit CSS

If you need to change CSS styles you need to edit one of ".scss" files located under "scss" directory.

Install Gulp that can keep track of changes in .scss files and update the .css counterparts on the fly. 

Once Gulp is installed run SCSS watchdog under the project's root directory using:

 $ gulp watch

...

...