Search code examples
cssjekyll

Add custom css to Jekyll

Im new to Jekyll and I am making a site with custom html and css in order. Jekyll downloads the minima theme by default, so I overrode the homepage with the following html:

<!DOCTYPE html>
<html>

<head>
    <title>testsite</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>

    all my html

    <script>
           $.ajax(an ajax call);        
    </script>

</body>
</html>

I am looking to add a custom stylesheet, yet I am having trouble correctly linking to within the theme. I have checked online but many forums seem out incorrect on the folder structure.

Here is the current structure.

--layouts
  -home.html
--posts
--site
  --assets
    -main.css
    -main.css.map
  --jekyll
    --update
  --privacy
  -index.html
--jekyll-cache
-config.yml
-Gemfile
-Gemfile.lock
-index.markdown

My question is, is there a simple way to add a stylesheet that will work on all pages when live? I can link a stylesheet the normal way id do it, however that doesn't work when uploaded to github. Would it be better to start from a build without a theme? If so how do I setup the gemfile?

Thanks!

Solution

  • Great simple approach. I love it. Here is how to proceed:

    1. Remove Minima from your config file/project
    2. Create a directory _includes
    3. Move the head to header.html in _includes
    4. Call the header in the home.html (and any other layout) file by using {% include header.html %}
    5. Link the new CSS in the header.html file

    Jekyll without themes (and plugins) is so much better. Looking for more? https://www.jekyllcodex.org