Why Bootstrap and Jekyll?
For the purpose of a simple academic website, Bootstrap provides a simple way to responsively structure content with containers, rows, and columns. With only a few divs, you can create appealing layouts for different screen sizes. It provides classes for:
- Quickly adjusting margins/padding (e.g. "mt-2" = margin-top: 0.50rem, "py-4" = top and bottom padding: 1.5rem).
- Making a number of display changes depending on screen size (e.g. "d-md-none" = display:none on medium screen sizes and larger).
- Responsive navbars and images.
These features make development and site upkeep very quick.
Jekyll
Jekyll lets you to use HTML more efficiently. Among other things it allows you to:
- Include HTML files into other HTML files via its include tag.
- Create reusable templates.
- Easily work with multiple static blog pages.
Jekyll has a very quick tutorial here.
Bootstrap has a more complicated tutorial. I recommend you get to the layout overview as soon as possible after browsing the Introduction and getting the Bootstrap CDN setup.
Icons
Using icons for your GitHub, LinkedIn, Twitter, etc. links is generally a better look than putting raw text links on your site. Font Awesome and Bootstrap Social icons are good for this. These sites contain many free social media (and other) icons which look good and are easily usable in your site via their CDNs.
Jekyll Data
Another particularly useful feature of Jekyll is how you can easily store and load data from .yaml files. For example, in the image, the content under the Education, Industry Experience, and Languages is all stored in .yaml files and loaded into the webpage with a Jekyll for each loop. The links in the navbar are also all stored in a .yaml file which is loaded similarly.
Blogging
Jekyll provides useful features for managing blog pages. You can write content with HTML or Markdown and use Jekyll to load them onto your site. You can make a "posts" page which lists your posts, provides a description, and an image very easily. The site in the image has title+description, but take a look BLOGPAGE for an example with all three content pieces. You can also generate blog pages from .yaml files.