Skip to content

Instantly share code, notes, and snippets.

@wouterj
Last active July 13, 2021 02:00
Show Gist options
  • Star 23 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wouterj/4945964 to your computer and use it in GitHub Desktop.
Save wouterj/4945964 to your computer and use it in GitHub Desktop.
How to use Jekyll, Plugins and Sass on GitHub Pages

How to use Jekyll, Plugins and Sass on GitHub Pages

Jekyll is a great CMS for developers and GitHub Pages is a great host to store your Jekyll sites. There is just one problem, GitHub runs Jekyll in safe mode, which means you can't use plugins. One thing you can do is building the Jekyll website locally and then push to GitHub.

Alexandre Rademaker found a solution to do this easially, which is quite usefull: "GitHub Pages and Jekyll plugins" After reading this I thought, that can be done easier!

Aliases to rescue

Git provides a way to have aliases of bash commands. You can do this by adding items to the alias key of your configuration. For this, you can add this locally by adding this lines to your %PROJECT_ROOT%/.git/config file:

[alias]
    publish = "!f() { git checkout master && git merge source && clear && echo '[BUILD]' && jekyll && sass css/wouterj.scss css/wouterj.min.css --style compressed && echo && echo '[COMMIT]' && git add -A && git add -f css/wouterj.min.css && git commit -m 'Build website' && echo && echo '[PUSH]' && git push github master source && git checkout --; }; f" 

That looks like a very long alias. Let's explain it:

Common things

publish             The name of the alias, you can run this by using `git publish`

"!f() { ...; }; f"  Group this all in a sh function

..1.. && ..2..      Run `..1..` and then `..2..`

Specific commands

git checkout master                                           Go to the master branch

git merge source                                              Merge the source branch (this is the
                                                              branch you work on locally)

clear                                                         clear the terminal

echo '[BUILD]'                                                echo a heading

jekyll                                                        build the site

sass css/wouterj.scss css/wouterj.min.css --style compressed  generate sass file

echo                                                          echo a new line

echo '[COMMIT]'                                               echo a heading

git add -A                                                    add all files, including deleted files

git add -f css/wouterj.min.css                                add the generate CSS file, because I
                                                              normally ignore these in my .gitignore
                                                              file

git commit -m 'Build website'                                 create build commit

echo                                                          echo a new line

echo '[PUSH]'                                                 echo a heading

git push github master source                                 push the master and source branches
                                                              to github (or whatever your remote is)

git checkout --                                               go back to the previous branch

As you can see, some things are just repository specific. I recommend you to change commands, add your own commands and remove commands.

Usage

When you set up the alias, you can run git publish to run everything:

$ git publish
[BUILD]
Configuration from e:/wouter/web/wamp/www/wouterj.github.com/_config.yml
Building site: e:/wouter/web/wamp/www/wouterj.github.com -> e:/wouter/web/wamp/www/wouterj.github.com/_site
Successfully generated site: e:/wouter/web/wamp/www/wouterj.github.com -> e:/wouter/web/wamp/www/wouterj.github.com/_site

[COMMIT]
[master 998a254] Build website
 1 file changed, 5 insertions(+)
 create mode 100644 css/wouterj.min.css

[PUSH]
Password for 'https://WouterJ@github.com':
Counting objects: 14, done.
Compressing objects: 100% (9/9), done.
Writing objects: 100% (10/10), 5.01 KiB, done.
Total 10 (delta 5), reused 0 (delta 0)
To https://WouterJ@github.com/WouterJ/wouterj.github.com.git
   998a254..3af9b92  master -> master
   2e7ef6f..35234bc  source -> source
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment