Setting up the blog project

As I mentioned earlier, we're going to be building a blog throughout this book as we learn to use Bootstrap 4. Let's start by creating a new directory and call it something like Bootstrap Blog. Open up that folder and create the following sub-directories inside it:

• css
• fonts
• img
• js
• partial

css

The css directory will hold the Bootstrap framework's CSS file and a custom theme file which we'll build later on. Go to the Bootstrap source file directory and locate the dist/css folder. From there, copy bootstrap.min.css to our new blog project's css directory.

fonts

The fonts directory will hold either a font icon library such as Glyphicon or Font Awesome. Previously, Bootstrap shipped with Glyphicon but they have dropped it in version 4. If you wish to use it, you'll need to download the icon font set and then drop the files into this directory. You could also include a web font that you may want to use on your project in this directory. If you are looking for web fonts, a good place to start is Google Web Fonts.

img

The img directory will hold any images used in the blog.

js

The js or JavaScript directory will hold the Bootstrap framework JavaScript files. If you add any other third-party libraries, they should also be included in this directory. Go back to the Bootstrap source files one last time and locate the dist/js folder. From there, copy bootstrap.min.js to the js directory in the blog project.

partial

The partial directory will hold any reusable snippets of code that we want to use in multiple locations throughout our templates or web pages, for example, the header and footer for our project. It's important to note you can have as many partial files as you like or use none at all.

Within this folder, create two new files and name them _header.ejs and footer.ejs. For now, you can leave them blank.

EJS files

EJS stands for Embeddable JavaScript. This is a type of template file that allows us to use things such as partials and variables in our templates. Harp also supports Jade if you prefer that language. However, I prefer to use EJS because it is very similar to HTML and therefore really easy to learn. If you've ever used WordPress, it is very similar to using template tags to insert bits of content or components into your design.