Principles and practices, project management [1]

Create my own website

about me

Jekyll

webpage jekyll

To create my website I've chosen to use Jekyll. That's because this system allows you to create a web in a easy and static way, making modifications by simple changes in the configuration files (Markdown)

Editor's

As a editor of my website I prefer the Sublime Text since I am used to using it daily, although the greater number of partners use the braket

Install Jekyll

Requirements

Installing Jekyll should be straight-forward if all requirements are met. Before you start, make sure your system has the following:

  • GNU/Linux, Unix, or macOS
  • Ruby version 2.0 or above, including all development headers
  • RubyGems
  • GCC and Make (in case your system doesn’t have them installed, which you can check by running gcc -v and make -v in your system’s command line interface)

Basic Usage

1
2
3
4
5
6
7
8
9
10
11
12
13
# Install Jekyll and Bundler gems through RubyGems
~ $ gem install jekyll 

# Create a new Jekyll site at ./myblog
~ $ jekyll new myblog

# Change into your new directory
~ $ cd myblog

# Build the site on the preview server
~/myblog $ bundle exec jekyll serve

# Now browse to http://localhost:4000

Jekyll also comes with a built-in development server that will allow you to preview what the generated site will look like in your browser locally

1
2
3
4
5
6
7
8
~ $ jekyll serve
# => A development server will run at http://localhost:4000/
# Auto-regeneration: enabled. Use `--no-watch` to disable.

~ $ jekyll serve --detach
# => Same as `jekyll serve` but will detach from the current terminal.
#    If you need to kill the server, you can `kill -9 1234` where "1234" is the PID.
#    If you cannot find the PID, then do, `ps aux | grep jekyll` and kill the instance.

Markdown

Markdown is a text-to-HTML conversion tool for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, and then convert it to structurally valid XHTML (or HTML).

Syntax

Here, an example to show how easy is to create a link using Markdown:

This is [an example](http://example.com/ "Title") inline link.

[This link](http://example.net/) has no title attribute.

Will produce:

This is an example inline link.

This link has no title attribute.

Markdown - Cheatsheet

How to generate static website

Jekyll genearate your static site a partir your files, for this propus you need execute this command:

1
2
~ $ jekyll build
# => The static site created in _site/ folder

Jekyll configuration file to work correctly with the fabacademy repository structure

In order for jekyll to work correctly with the folder structure of our webs in the fablab repository, it is important to configure the file that jekyll uses to generate link / image / file paths automatically, since otherwise we will get broken links.

Also in this file we can add any variable that we create static that we create necessary to use in our web, like for example the email, social networks, etc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
### GENERAL SETTINGS ###

# Site settings
title: FAB ACADEMY 2017
description: "Fab Academey 2017 -Esteban Martin Gimenez"
analytics: UA-90860442-1
baseurl: "/archives/2017/fablabbcn/students/271"
url: "http://archive.fabacademy.org"
static: "https://nanusefue.github.io/fab2107-static-resource"
# Build settings
markdown: kramdown
permalink: /:categories/:title.html
excerpt_separator: <!--more--> #use this in posts to define how long the excerpt of the post (that is shown on the Blog page) is

colors:  #in hex code if not noted else
  primary: "#00b3fe" #"#F70031" 
  primary_rgb: "0,179,254" #"247,0,49" #rgb of the primary. Needed in some places for the transparency effect.  
  secondary: "#384452" #"#33004D"
  link: "#428bca"
  link_hover: "#01b2fe"
  footer_heading: "#ffffff"
  footer_content: "#bfc9d3"
  
  
### CONTACT SETTINGS ###

# Social networks usernames. Many more available: google-plus, flickr, linkedin, etc). Shown in footer.
social:
  - title: github
    url: https://github.com/nanusefue
  - title: instagram
    url: https://www.instagram.com/nanusefue/
    
# Postal address (add as many lines as necessary). Shown in footer and on Contact page.
email: nanusefue.at.gmail.dot.com

Part of code for the first assignament

This is an example of how I created the first assignment using markdown, the first part of the code is the one that uses jekyll to know image, title and category of the page, these values are used for jekyll automatically generate our grid of assignaments in the main page, the order is given by the date we use here.

I then use html to create the structure I have decided for my assignaments.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
---
layout: project
title:  "Jan 25: Principles and practices, project management [1]"
date:   2017-01-25 12:00:00
author: Esteban Martin Gimenez
categories:
- project
img: portfolio_01.jpg
thumb: thumb02.jpg
carousel:
- single01.jpg
- single02.jpg
- single03.jpg

website: http://blacktie.co
---
<h2>Create my own website </h2>
<h3>Jekyll</h3>

<img src="/archives/2017/fablabbcn/students/271/assets/img/project/week1/jekyll.png" alt='webpage jekyll'>
<p></p>
<p>To create my website I've chosen to use <a  target="_blank" href="https://jekyllrb.com">Jekyll</a>. That's because this system allows you to create a web in a easy and static way,  making modifications by simple changes in the configuration files (Markdown) </p>

<h4>Install Jekyll</h4>


and more ....

Git (Version control system)

Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

Branch

Git Branch

TODO

Basic Command

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
~ $ git init (initialize de git repository local server)
~ $ git add *.c (add new files in local repository)
~ $ git add README (add Readme file)
~ $ git commit -m 'initial project version' (first commit before add in repository)
~ $ git clone git://github.com/schacon/grit.git (add existent respository for use)
$ git status
On branch master
nothing to commit, working directory clean
$ cat .gitignore
*.[oa]
*~
~ $ git commit -m "Commit message"
~ $ git push origin master (push your local file to remote repository)
~ $ git remote add origin <server> (conect your local repository with remote git server)
~ $ git checkout -b <branchname> (create new branch)
~ $ git checkout <branchname> (switch between branches )
~ $ git push --all origin (upload all file to remote server)
~ $ git pull (download all file to local server)
~ $ git merge <branchname> (merge one especifica branch in the actual branch)
~ $ git tag 1.0.0 <commitID>  (tag the actual commit)
~ $ git fetch origin (recover all file from remote server)

How to deploy my own site

Generating a new SSH

1
~ $ ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

Copy the SSH key to your clipboard and add in fablab repository.

1
2
3
	user@user-ThinkPad-X220:~/.ssh$ cat id_rsa.pub 
	ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC5i+Ck1I9aN5sELzGmWeNGM9MKg+iNdO40IqPRffaMcJ
	.... user@user-ThinkPad-X220

Clone/Add/Commit/Push your file a fablab Repository

First we need to clone the repository of fablab in local, so we can add our files for the first time, then we can do our first commit, once we have the first commit, with the push command we upload everything to the remote repository, it is important to use the command pull to have the local repository updated with the remote.

1
2
3
4
5
6
~ $ git clone git@git.fabacademy.org:fabacademy2017/fablabbcn.git .
~ $ git add .
~ $ git status
~ $ git commit -am 'new assignament'
~ $ git pull origin master
~ $ git push origin master


webpage jekyll webpage jekyll
webpage jekyll webpage jekyll
webpage jekyll webpage jekyll

References

Jekyll

Markdown

Git

Git and SSH

Brackets

Sublime Text

PROJECT IDEA: OPEN ECOTRONs

An Ecotron is a device capable of generating a range of physical and chemical conditions applied to terrestrial or aquatic ecosystems. Its principle is to confine a biological system (natural or artificial, complex or simplified one) in a enclosure sealed in matter but not in energy, and simultaneously measure and control such flows of matter and energy. For For this purpose, the enclosures are equipped with many sensors to obtain precise real-time measurements and different actuators to control and modify the enclosure environmental conditions.

REF: Lawton, J. H., Naeem, S., Woodfin, R. M., Brown, V. K., Gange, A., Godfray, H. J. C., Heads, P. A., Lawler, S., Magda, D., Thomas, C. D., Thompson, L. J. & Young, S. (1993) The Ecotron - a Controlled Environmental Facility for the Investigation of Population and Ecosystem Processes. Phil.Trans. R. Soc. B, 341, 181-194.

The idea is to end up with a generic μCosm/bioreactor/fermentor with a modular design that allows to be adapted by the user to match the specific farming/culturing/fermenting requirements of the chosen biological specie. The device will include sensors and electronic systems to monitor control and automatize all the process, making it more resilient, productive and sustainable in a such easy way that it becomes accessible also for non-experts.

OpenGarden / Open μ-COSM

OpenGarden is about to make a modular chamber with a very well controlled inner weather. That include the daily dynamic changes of the temperature, the humidity and light as basics, but also more sophisticated parameters as the flux of CO2 or the photosynthetic tax of the plants that could be growing inside. OpenGraden will be a cheap DIY “classic” microcosm Ecotron, able to be adapted to the needs of each “user”: mushrooms, mycelium, lichens, moss, orchids, tomatoes, aloe, capsicum peppers, etc...

OpenGrow / Open BioReactor

OpenGrow is about to make a modular bioreactor, following the diy-open-source philosophy and keeping a low-price (a normal commercial one, can cost up to 4000 euros). A bioreactor is nothing else than a enclosed space with controlled liquid environment to make the microorganism that grows inside the “happiest” possible. With this new generic apparatus we could cultivate our own yeast for making bread (or beer), your kefir fungi for yogurt, your bacteria to produce cellulose, glue, plastic, light... or even your favorite microalgae: spirulina, chlorella...etc. The modularity, of this micro-farm will be focused into allowing different configurations of sensors and actuators to control different parameters of the conditions of culturing (pH, temperature, density...) and also in allowing increasing culture volumes. Having that open source apparatus can make us envision the emergence of a world wide community of users. Thus, it could be interesting to create also a on-line website, where the community will share which specifications of the bioreactor makes which microorganism happier. We could even invite the team of users to become a distributed repository of different interesting microorganisms.

Open Brew / Open Fermentor

OpenBrew is the follow-up of the OpenGrow. But now, we are not interested in the microorganism that grows inside but in the liquid media and the fermentation process. It is a project to explore the different ways to elaborate/prepare/ferment different beverages. Specially beer (from different cereals) but also drinks that are developed by similar fermentation process like wine, cider or any other fruit alcohol fermentation. But also Mate or kombucha tea as an non-alcoholic drink. Again, the idea is to end up with a general bioreactor/fermentor with a modular design that allows to be adapted to the special requirements of your beverage preparation. The fermentor, of course, will include some sensors and electronic systems to control and automatize the process, in order to make the fermentation easier, less laboured and accessible to everybody.

webpage jekyll webpage jekyll