Download the Bootstrap source files

To allow us to compile source files into production, we now need to download the Bootstrap source files and install them on our local machine. Head to the following URL and download the Bootstrap source files: http://v4-alpha.getbootstrap.com/getting-started/download/.

Once you've download the files, unzip the package and move the directory to where you want it to live on your computer. If you just want to leave it on the desktop for now, that is fine. You can safely move the project around before or after editing it. The next thing you need to do is install the project dependencies. First, navigate to the root of the download package in the Terminal. It will likely be called something like bootstrap-4.0.0-alpha.2. Once you are there, run the following command to install the files:

$ npm install

If you get any type of error, try including sudo at the beginning of the command.

Note

If you are using sudo, you'll likely be prompted for your system password. Type it in then hit Enter to execute the command.

Installing Ruby

Another tool you need to work with the Bootstrap source files is Ruby. Ruby is an objected-oriented programming language that was designed in the 1990s in Japan. If you are familiar with Perl, you will likely enjoy Ruby, as Perl was the main inspiration for the language.

In Bootstrap, Ruby is used to run the documentation website and to compile the core Sass files into regular CSS. For the Bootstrap documentation, you can always visit http://getbootstrap.com/. However, in some cases, you may find yourself offline, so you might want to install a local version of the docs that you can use. Let's first start by installing Ruby before we get to the documentation.

Good news! If you're on a Mac, Ruby comes pre-installed with OS X. Run the following command to check the Ruby version number and verify that it's available:

$ ruby -v

If Ruby is installed, you should see something like this in the Terminal:

$ ruby 1.9.2p320 (2012-04-20 revision 35421) [x86_64- darwin12.3.0]

If you're on a Windows machine, you may need to manually install Ruby. If that's the case, check out the following website to learn how to install it: http://rubyinstaller.org/.

Installing the Bundler gem

After Ruby is ready to roll, you need to install a Ruby gem called Bundler. In the words of the developers of Bundler: Bundler provides a consistent environment for Ruby projects by tracking and installing the exact gems and versions that are needed. For more info on Bundler, please visit http://bundler.io/.

Don't worry too much about what Bundler does. The important thing is to just install it and move on.

1. To do this, we need to run the following command in the Terminal in your Bootstrap source file root directory:

   $ gem install bundler
   

2. Again, if you get any errors, just begin the command with sudo. To confirm your installation of Bundler, run the following command to view the version number as in our previous examples:

   $ bundler -v
   

3. If all is good, you should see something like this printed out in the Terminal:

   $ Bundler version 1.11.2
   

4. The last step you need to do is install the actual documentation bundle of files. Do this by running the following command in the Terminal from your root Bootstrap directory:

   $ bundle install
   

5. This will install all Ruby dependencies, such as Jekyll, which is used for the documentation, and the Sass compiler we'll need a little later in the book. If you're a Windows user and you want to run the Jekyll documentation locally then you should check this out: http://jekyll-windows.juthilo.com/.

   Note

   Jekyll is a database-independent static site generator that will convert plain text into a static website or blog. You can write templates in Markdown, Textile, Liquid, or HTML and CSS. On deployment, the code will be compiled into production-ready files that can be uploaded to a web server or run locally. That completes the setup for the first part of the Bootstrap build tools. Before we move onto the static site generator portion, let me show you how to run the documentation locally.

Running the documentation

Getting the documentation running locally is actually pretty easy. From the root of the Bootstrap source file directory, run the below command in the terminal:

bundle exec jekyll serve

In the Terminal, you'll see that the server is running. The next step is to open up a web browser and enter the following address:http://localhost:9001/

The Bootstrap documentation website will load up and now you have a local version of the documentation! To quit out of the server, hit Ctrl + C and you will exit.

Setting up the static site generator

In Chapter 1, Introducing Bootstrap 4 I gave you a quick overview of setting up Harp.js, which is a static site generator. In this chapter, I'll go into more depth on how to properly set up your website, CSS, HTML, and JavaScript files. Before I do that though, we should talk about why you might want to use Harp.js.

Why use Harp.js

There are a number of great arguments for using a static site generator such as Harp.js: cleaner code, modern best practices, and more. However, the best reason is that it will just make your life simple. Instead of having to update a header on all 50 pages of the website, you can simply update the header partially and then have that compiled into all your templates. You can also take advantage of using variables to insert content and configuration.

Installing Harp.js

Harp is another project that runs on Node.js so we can use npm to install it with the following command:

$ sudo npm install -g harp

Note

If you did this in Chapter 1, Introducing Bootstrap 4, you can skip down to the next part of this chapter.

To confirm that Harp was successfully installed, let's use our version-checking trick by entering the following command into the Terminal:

$ harp version

If all is good, you should see something like this printed out in the Terminal:

$ 0.14.0

Harp is now installed and we can move on to setting up our project for the book.