1. Setup
In this chapter we will install all the programs needed to run Genit. At the end of the chapter, we will verify the success of this installation through the smoke test that comes with Genit.
1.1 Install the Ruby interpreter
Genit is written in Ruby, which means to run Genit, you need a Ruby interpreter installed on your computer. Note that you do not need to know the Ruby language you use Genit.
Genit requires the installation of Ruby version 1.9.2 or later.
Whatever your operating system, visit the official page of Ruby download and read instructions.
1.1.1 Windows users
Download the installer of the latest stable version >= 1.9.2. As I write this sentence, it is the file Ruby 1.9.2-p180 RubyInstaller. Once downloaded, double-click it to start the installation.
1.1.2 Linux users
I urge you to go through a software called RVM. For more information on RVM, visit Ruby Version Manager. If you are new to Linux, the installation of RVM is not necessarily a cakewalk, but hang in there, it's worth it!
Open a terminal window and type the following :
Information
If you have still decided not to go through RVM to install Ruby, but to use your package manager, it can be that your distribution offers to install version 1.9.1 of Ruby rather than version 1.9.2. You can do it, for obscure reasons, it is the same release branch.
1.1.3 All users
To verify that you have installed the correct version of Ruby, open a terminal window and type ruby-v :
$ ruby -v ruby 1.9.2p180 (2011-02-18 revision 30909) [i686-linux]
If the early numbers are 1.9.2 (or higher), your system is ready to use Ruby.
1.2 Install Rubygems
Programs written in Ruby are generally packaged in the form of gem that manage their own dependencies. Ruby gems is the program that allows to manage the different gem. It is often installed along with Ruby. To find out if Rubygems is already installed on your machine open a terminal window and type gem -v. If the system complains that the command gem can not be found you need to install RubyGems, otherwise jump to the installation of Genit.
1.2.1 To install Rubygems on Windows
Go to rubygems.org/pages/download, downlaod the zip file, unzip the archive and follow the instructions in the README.rdoc file. You just have to open a terminal window, navigate in the ruby gems folder and type: ruby setup.rb code>. (Perhaps a double-click on the file setup.rb also works)
1.2.2 To install Rubygems on Linux
Use your package manager.
1.3 Install Genit
Now that Ruby and Rubygems are installed on your system, installation of Genit going to be very simple. Open a terminal window and type the following command:
$ gem install genit
The program Genit (and its dependencies if necessary) will be downloaded and installed.
To ensure that the installation was successful, type the genit -v command in a terminal window :
$ genit -v genit 2.0
1.4 Smoke test
This step is not strictly necessary and you can skip it if you want. However, it is useful to make sure that Genit works perfectly on your system.
Open a terminal window and type :
$ genit create test-project $ cd test-project $ genit compile $ genit server
Now point your browser to localhost:3000, you must see something like that: 
2. Create a project
In this book, we will develop a simple website for a hypothetical video game. The site will include a home page, a news page, and few pages of documentation.
The first step in any development of website with Genit is the creation of the project. This is done with the command create. Open a terminal window, change to the folder you want then enter the following command :
$ genit create -e sample_app
By default, Genit creates a smoke test for each new project, which means that some files are already pre-filled. With option -e, or --empty, these files are not pre-filled.
Genit only creates HTML5 project. If you have time, look at the documentation of the create command.
2.1 Structure of a Genit project
We can now explore briefly the project structure created by Genit. If you do not understand it for now, do not worry, it's just an introduction. The content and use of each case will be treated in depth elsewhere in this book.
2.1.1 src/fragments
Here we have bits of a web page. Each fragment may be included in any page. Think in terms of fragment helps to modularize the xhtml code, like any other "real" programming language.
2.1.2 src/news
News are very common in a website. Genit can manage them easily. Each news will be placed in a separate file.
2.1.3 src/pages
All web site pages will be placed in this folder.
2.1.4 public
Here we find all files that do not require special treatment, as pdf or text files, images that are not part of site design, etc..
2.1.5 scripts
Here you can place javascript libraries and files.
2.1.6 styles
You place here that relates to site design, CSS files, images, etc.
2.1.7 src/templates
Here you will find site main template (the one that will wrap every page), as well as the main navigation menu.
2.2 Compiling a project
If you performed the smoke test in the section of the installation, you already know how to compile a Genit project. However, I will resume the procedure here.
From the terminal window, move to the folder of the project :
$ cd sample_app
Then use the following command to compile the project :
$ genit compile
When all goes well the compile command produces no output. Also note that cc is an alias for compile, ie the following two lines are equivalent :
$ genit compile $ genit cc
For information, the figure 2.1 shows the terminal session used since the beginning of this chapter: creating and compiling the project.
Figure 2.1 - creating and compiling the project 
Genit put the result of compiling at the root of the project folder.
To see the result, point your browser to localhost:3000 (figure 2.3)
Figure 2.3 - The result 
2.3 Add pages
Page index.html, you just opened at the end of the previous section (2.2) does not come from nowhere.
You will find its contents in the src/pages/index.html file (listing 2.1). With Genit, you will put all the pages of your site in the src/pages folder.
Listing 2.1 - src/pages/index.html file
home page
We will now add the news page. To do this, create the src/pages/news.htmlfile (figure 2.4) and fill it with the simple content of listing 2.2.
Figure 2.4 - news.html file
$ ls src/pages/ index.html news.html
Listing 2.2 - src/pages/news.html file
news page
Use the compile command to reflect changes :
$ genit cc
You can now point your browser to localhost:3000/news.html (Figure 2.5), which just add to your site.
Figure 2.5 - The news page 
The pages of documentation
We will now create three pages of documentation. A page for the user documentation (user.html), a second page for developer documentation (developer.html), and finally a last page that will include links to the previous two pages (documentation.html).
As for the news page, you create these pages in the src/pages folder. Figure 2.6 shows what your src/pages folder should now look like:
Figure 2.6 - Contents of the pages folder after the addition of the 3 documentation pages
$ ls src/pages/ developer.html documentation.html index.html news.html user.html
You will fill these files with the contents of listing 2.3, listing 2.4 and listing 2.5.
Listing 2.3 - pages/developer.html file
developer page
Listing 2.4 - pages/user.html file
user page
Listing 2.5 - pages/documentation.html file
documentation page
A new compilation and you can see the result by opening localhost:3000/documentation.html in your browser. Try the links to make sure they work.
In a real site, you might have dozens of pages of documentation. In this case, I prefer to organize the pages folder in subfolders. Let's go!
You create the subfolder src/pages/doc in which you move the 3 files previously created (figure 2.7) :
Figure 2.7 - Content of pages folder
$ ls src/pages/ doc/ index.html news.html
Then you rename the file src/pages/doc/documentation.html to src/pages/doc/index.html (figure 2.8), which is a common practice. Thus, if a user requires the doc folder in their browser, the server will provide the doc/index.html file.
Figure 2.8 - documentation.html renamed to index.html
$ ls src/pages/doc/ developer.html index.html user.html
It remains to modify the links of the pages/doc/index.html file (listing 2.6) :
Listing 2.6 - Content of pages/doc/index.html
documentation page
Recompile your site and open localhost:3000/doc in your browser to see that the links still work as before.
Information
With Genit, as with most other web frameworks, you write internal links to your site relative to the root of the site.
2.4 Menu
You may have noticed the link home at the beginning of each web page you open in your browser. This is the default menu of Genit and it is in the src/templates/menu.html file. Here are the content (listing 2.7) :
Listing 2.7 - Initial content of src/templates/menu.html
We are going to add links to the news page and to the documentation page. Edit it as follow (listing 2.8) :
Listing 2.8 - New content of src/templates/menu.html
Recompile the project and then open a page to see changes (figure 2.9). Feel free to try the menu links!
Figure 2.9 - The new menu 
2.5 Main template
Before concluding this chapter we have yet to see the main template. This is the central file of your site. The one in which all pages are included. You will find it in src/templates/main.html. See its content in (listing 2.9) :
Listing 2.9 - Initial content of src/templates/main.html