Customizing CSS and HTML in your Jekyll theme

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

• Jekyll's official documentation on Themes
• "About Jekyll themes on GitHub"
• "Adding a Jekyll theme to your GitHub Pages site"
• "Editing files in your repository"