Article version: Enterprise Server 2.13

This version of GitHub Enterprise will be discontinued on This version of GitHub Enterprise was discontinued on 2019-03-27. No patch releases will be made, even for critical security issues. For better performance, improved security, and new features, upgrade to the latest version of GitHub Enterprise. For help with the upgrade, contact GitHub Enterprise support.

Customizing CSS and HTML in your Jekyll theme

GitHub Pages is available in public repositories with GitHub Free, and in public and private repositories with GitHub Pro, GitHub Team, GitHub Enterprise Cloud, and GitHub Enterprise Server.

You can personalize your GitHub Pages site by adding custom styles to your Jekyll theme and changing your theme's layout.

We recommend installing Jekyll to test your changes locally before publishing them. Your changes are published on your site after they're merged into your site's publishing branch. For more information, see "Jekyll's build process."

Your Jekyll theme's source repository may also offer some help in customizing your theme. For an example, see the Jekyll theme Minima's README.

These instructions are optimized to work best with Jekyll themes that are officially supported by GitHub Pages. For a complete list, see "Supported themes."

Customizing your Jekyll theme's CSS

  1. Create a file called /assets/css/style.scss in the root of your site's repository.

  2. Add the following content to the top of the file, exactly as shown:

     ---
     ---
    
    @import "{{ site.theme }}";
  3. Add any custom CSS (or Sass, including imports) you'd like immediately after the @import line.

Customizing your Jekyll theme's HTML layout

  1. Navigate to your Jekyll theme source repository's default.html file in the _layouts folder on GitHub Enterprise. For example, navigate to https://github.com/pages-themes/THEME_NAME/blob/master/_layouts/default.html and replace THEME_NAME with the name of your Jekyll theme.

  2. Copy the content of the default.html file.

    Tip: Click Raw in the upper-right of the page to change your view of the file to make copying easier.

  3. Create a file called /_layouts/default.html in your site repository.

  4. Paste the default layout content copied in step two in the new /_layouts/default.html file in your site repository.

  5. Customize the layout as you'd like.

Further reading

Ask a human

Can't find what you're looking for?

Contact us