This site is built using the GitHub-pages & jekyll framework. This put togheter modern static site generation and versioning control + automatic git workflows. Basically, the site is automatically generated at every git push event.

In the following you can find a step by step guide to help you replicate this site.

install Ruby and Jekyll’s depenences:

sudo apt-get install ruby-full build-essential zlib1g-dev

update bashrc with the required environment variables:

echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc

Finally, install Jekyll and Bundler

gem install jekyll bundler

Set up a personal or project-specific github repo. You can follow the first part of this guide if you have troubles with this. Note that the repo must be set to “Public” for actually deploying it. However, you can start initializing it as private, locally build it to preview it, and change the repo setting to “Public” once you’re satisfied with the result. Once you have set the repo, clone it locally from github. From a directory of your choice, run in the terminal:

git clonegit@github.com:YOUR_REPO/YOUR_REPO.github.io.git

create a docs dir inside the master directory of the locally cloned repo, we’ll build the site therein

mkdir docs
cd docs

initialize the bundle and add jekll (this is missing in the official GitHub pages guide)

    bundle init
    bundle add jekyll

without specifying a version, force a new jekyll instance executing in the terminal the folowing: bundle exec jekyll new . --force
make the following changes in the Gemfile in the docs directory to be able to work with GitHub pages:

    # This will help ensure the proper Jekyll version is running.
    # Happy Jekylling!
    #gem "jekyll", "~> 4.1.1"
    # This is the default theme for new Jekyll sites. You may change this to anything you like.
    gem "minima", "~> 2.5"
    # If you want to use GitHub Pages, remove the "gem "jekyll"" above and
    # uncomment the line below. To upgrade, run `bundle update github-pages`.
    gem "github-pages", group: :jekyll_plugins

install the minima theme dependencies, executing the following in the terminal: bundle install
test the site locally (the default port 4000 is usually used by nomachine, if you don’t have installed you can keep it). The --livereloadoption makes your editing dynamic. bundle exec jekyll serve --port 4001 --livereload
access the site locally from a browser: http://localhost:4001/

Add sections to the main page

To add a static initial section to the site (and make the site more landing page look-alike), create the following folders in the docs/ dir:

mkdir _sections
mkdir _inclusdes
cd _includes
mkdir sections

in _includes/sections/ create a default.html file with the following content:

    
    <section id="" class="content-section"
    style="background: "
    >
    <div class="row">
        <div class="col-md-12">
        <h1></h1>
        
        </div>
    </div>
    </section>

Now create a _layouts dir in docs/, copy there all the default theme _layouts from ~/gems/gems/minima-2.5.1/_layouts/ file. Directly modifying the layouts in that dir will only affect our local preview at localhost. Copying the layouts file in our repo will allow us to modify them while allowing GitHub to automatically deploy them for us in the hosted version of our site. Then modify the home.html in docs/_layouts/ adding the following section under {{ content }}:

        {% assign sections = site.sections | sort: 'order' %}
        {% for section in sections %}
            {% if section.include != null %}
                {% include {{ section.include }} %}
            {% else %}
                {% include sections/default.html %}
            {% endif %}
        {% endfor %}

this will cycle through the markdown sections that you’ll place in the docs/_section folder

Additional tip

The {%…%} syntax used by Jekyll is part of the Liquid templating engine. Basically, everything in {%…%} will be parsed and interpreted. For example, quoting the above code directly would result in rendering the _section content directly in the current page. To escape these tags, and so show them literally, you should use the raw tag.