Code for Sebastian Proost's blog about programming, gaming, technology, ...
This theme comes with a number of features, including:
Feel free to use this template as the base for your blog. Just
download this project and add all the files to your project. Add your blog posts to the posts/
directory,
and create your pages with the proper Jekyll front matter (see posts.html
for an example).
Installing Jekyll and the dependencies:
# cd into project directory
cd 4dcu.be
# install Bundler if you don't have it already
gem install bundler
# install jekyll, jekyll-archives, jekyll-sitemap, mini_magick and jekyll-paginate-v2
bundle install
You will need to install ImageMagick on your system as well for the thumbnail generation.
NOTE : This theme is not compatible with github pages as it uses a custom plugin.
Here is a guide how to host it on
github. In a nutshell, the trick is to build the website to the ./docs
locally and commit/push this along with the
other files. GitHub can then be set up to host the site directly from the ./docs
folder.
On windows you can use the batch files included. run_server.bat will start the development server and the site will become available locally on localhost:4000. To build the site into the docs folder (requirement to host on GitHub) use run_build.bat
run_server.bat
run_build.bat
The command to start the dev server is (without using the batch file):
bundle exec jekyll serve --config _config_dev.yml
The underlaying command to (re-)build the website is:
bundle exec jekyll build --config _config.yml
All configuration options can be found in _config.yml
.
index.html
header, and the footer.index.html
header.See the documentation for jekyll-paginate-v2 for more details.
Although this theme comes with a combined, categorized archive (see posts.html
), you can enable further archive
creation thanks to jekyll-archives. Support for category and tag archive pages is included, but you can also
add your own archive pages for years, months, and days.
To change archive settings, see the jekyll-archives section of _config.yml
:
jekyll-archives:
enabled:
- categories
- tags
layout: 'archive'
permalinks:
category: '/category/:name/'
tag: '/tag/:name/'
A sitemap is also generated using jekyll-sitemap.
Your personal social network settings are combined with the social sharing options. In the social section of _config.yml
, include an entry for each network you want to include. For example:
social:
- name: Twitter # Name of the service
icon: twitter # Font Awesome icon to use (minus fa- prefix)
username: ProostSebastian # (User) Name to display in the footer link
url: https://twitter.com/ProostSebastian # URL of your profile (leave blank to not display in footer)
desc: Follow me on Twitter # Description to display as link title, etc
share: true # Include in the "Share" section of posts
Using the Open Graph Protocol or Twitter Card metadata, you can automatically set the images and text used when people
share your site on Twitter or Facebook. These take a bit of setup, but are well worth it. The relevant fields are at the
end of the _config.yml
file.
Also there is another protocol, the Open Source protocol, for saying where your site is hosted if the source is open. This helps develops more easily see your code if they are interested, or if they have issues. For more, see http://osprotocol.com.
You can enhance the posts.html
archive page with descriptions of your post categories. See the descriptions
section of _config.yml
:
# Category descriptions (for archive pages)
descriptions:
- cat: jekyll
desc: "Posts describing Jekyll setup techniques."
You can add page-specific javascript files by adding them to the top-level /js
directory and including the filename in
the custom_js page's configuration file:
# Custom js (for individual pages)
---
layout: post
title: "Dummy Post"
date: 2020-02-09 12:00:00
author: Sebastian Proost
categories: Dummy
custom_js:
- Popmotion
- Vue
---
The /js/
directory would contain the corresponding files:
$ ls js/
Popmotion.js Vue.js
Links in the header and footer are auto-generated. Links will be made for all files marked category: page
, that have a
title, and have the custom main_nav
front-matter variable set to true
. You can modify the rules for link generation
in _layouts/nav_links.html
.
If you want change the CSS of the theme, you'll probably want to check out these files in the _sass/
directory:
base/_variables.scss
: Common values found throughout the project, including base font size, font families, colors, and more.base/_typography.scss
: Base typography values for the site (see typography.html
for a demonstration)_layout.scss
: The primary styles for the layout and design of the theme.assets/
Here are the important variables from base/_variables.scss
you can tweak to customize the theme to your liking:
$base-font-family
: The font-family of the body text. Make sure to @import
any new fonts!$heading-font-family
: The font-family of the headers. Make sure to @import
any new fonts!$base-font-size
: The base font-size. Defaults to $em-base from Bourbon (bourbon/settings/_px-to-em.scss
).$base-font-color
: The color for the body text.$action-color
: The color for links in the body text.$highlight-color
: The color for the footer and page headers (when no cover image provided).MIT. See LICENSE.MD.
4DCu.be is based on a jekyll theme by Ben Centra.
Which includes these awesome libraries: