CODEWITHSUNDEEP
cssjekyll
SenderDefender
SenderDefender

Reputation: 43

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!

Upvotes: 3

Views: 2191

Answers (1)

Mr. Hugo
Mr. Hugo

Reputation: 12592

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

Upvotes: 3

Related Questions