# Index.html in \_site folder does not show style

**URL:** <https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069>\
**Category:** Help\
**Created:** [May 23, 2021, 8:00pm UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069 "2021-05-23T20:00:42Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![codejs98](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@codejs98](https://talk.jekyllrb.com/u/codejs98)\
**Post date:** [May 23, 2021, 8:00pm UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069/1 "2021-05-23T20:00:42Z")

</div>

I’ve finished my website and am excited to make it public, but I’ve run into a problem. Hope you can help ☹

My problem is after running jekyll build / serve, the \_site folder is created and the website looks good on my localhost, but when I view the index.html file in the \_site folder, in my browser, it shows just the text and none of the style, effects or even the pictures. It’s just text and hyperlinks.

---

<div class="post-metadata">

**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\
**Post date:** [May 23, 2021, 9:43pm UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069/2 "2021-05-23T21:43:01Z")

</div>

Are you viewing the file with a `file://` protocol URL, rather than `http://`? Typically, Jekyll sites are only set up to be browsed with the HTTP protocol (`http://` and `https://`). For example, style sheets are referenced with site-relative-absolute URLs like `/asset/style.css`, which won’t work with a file protocol.

---

<div class="post-metadata">

**Author:** ![codejs98](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@codejs98](https://talk.jekyllrb.com/u/codejs98)\
**Post date:** [May 24, 2021, 9:50am UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069/3 "2021-05-24T09:50:11Z")

</div>

Thank you Chuck.  
Yes I am viewing with a file:// protocol URL.  
In the browser bar, I replace file:// with http://, but then it gives me an error message.  
How do I open a local html file using an http:// protocol? I’m currently just right clicking, open with firefox…

Sorry I’ve only been doing web development for 8 months…

---

<div class="post-metadata">

**Author:** ![chuckhoupt](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/chuckhoupt/32/523_2.png) [@chuckhoupt](https://talk.jekyllrb.com/u/chuckhoupt)\
**Post date:** [May 24, 2021, 12:20pm UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069/4 "2021-05-24T12:20:00Z")

</div>

> [@codejs98](#):
>
> How do I open a local html file using an http:// protocol?

To open a local file with the HTTP protocol, you’ll need to run a web server on your local machine. In addition to building your site, the `jekyll serve` command also runs a small web server to provide HTTP access to the files in the `_site` directory via an URL like `http://127.0.0.1:4000/` (localhost is typically an alias for 127.0.0.1).

So the best way to open local html files using HTTP is to run `jekyll serve`.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 24, 2021, 7:48pm UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069/5 "2021-05-24T19:48:14Z")

</div>

Agreed. You want to run a web server. It is generally a bad idea to view an HTML by double clicking on it, because the local CSS paths will likely break plus images etc. And also JavaScript will _not_ run.

Jekyll with a serve command as above will allow \_site to be the directory server and all paths are relative to that.

E.g.

`/index.html` in the browser is really something going to translate to a file on disc like.

```auto
My Documents/my-repo/_site/index.html

```

And `/css/styles.css` is going to be like

```auto
My Documents/my-repo/_site/css/styles.css

```

And for any non-Jekyll projects you would use a more generic web server to achieve the same server task, but without Jekyll to build the site.

E.g.

In a folder which has an index.html file already (not a markdown fine)

Run

```auto
python3 -m http.server

```

Then open

[http://localhost:8000/](http://localhost:8000/)

Or in VS Code, uses the Live Server extension.

---

<div class="post-metadata">

**Author:** ![codejs98](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@codejs98](https://talk.jekyllrb.com/u/codejs98)\
**Post date:** [May 24, 2021, 7:56pm UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069/6 "2021-05-24T19:56:11Z")

</div>

Thanks again Chuck! My site renders perfectly locally when I run jekyll serve. But I’m at the stage where I want to host it from AWS S3, I’ve uploaded my jekyll site, but it does not render with any css or pictures. I will also try to ask these questions on an AWS forum…

I also asked a web hosting company in my country if they could host my jekyll site for me - but they ran it on their test server and also got no style, just text and links. I’ve read through many articles that say that it does work.

---

<div class="post-metadata">

**Author:** ![codejs98](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@codejs98](https://talk.jekyllrb.com/u/codejs98)\
**Post date:** [May 24, 2021, 8:00pm UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069/7 "2021-05-24T20:00:52Z")

</div>

Hi Michael, thanks for your comment!!!  
I ran the python http server from my \_site folder as per your comment - and it renders!!!

So my last problem is getting my site to render from AWS S3. It’s still just giving me text, no css:/

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 25, 2021, 2:46pm UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069/8 "2021-05-25T14:46:59Z")

</div>

When you view the site on AWS and the CSS is broken, right click and inspect to open dev tools.

The Console tab will tell you any images, css and JS that were attempted but broke.

You can also go to Network tab, clear the log and refresh the page. Look for 404 errors.

You can also just do View Source and look at the CSS link and click on it to see what it is going to. But the inspect approach makes errors more obvious without clicking all over.

---

<div class="post-metadata">

**Author:** ![MichaelCurrin](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.jekyllrb.com/michaelcurrin/32/2340_2.png) [@MichaelCurrin](https://talk.jekyllrb.com/u/MichaelCurrin)\
**Post date:** [May 25, 2021, 3:18pm UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069/9 "2021-05-25T15:18:04Z")

</div>

You can also try setting up a free site at Netlify

specify the build dir and build command.

> **[Jekyll](https://michaelcurrin.github.io/code-cookbook/recipes/ci-cd/netlify/configure/jekyll.html)**
>
> Reusable code patterns which you can use as reference or copy to your project

It will build and deploy whenever you push to GitHub. It even handles dependencies. You get to skip CloudFront, S3, DNS, local build step, clearing cache…

---

<div class="post-metadata">

**Author:** ![codejs98](https://avatars.discourse-cdn.com/v4/letter/c/3d9bf3/32.png) [@codejs98](https://talk.jekyllrb.com/u/codejs98)\
**Post date:** [May 26, 2021, 12:41pm UTC](https://talk.jekyllrb.com/t/index-html-in-site-folder-does-not-show-style/6069/10 "2021-05-26T12:41:30Z")

</div>

Hi Michael.

I was on the verge of ditching AWS, but then I finally got it to work - was a cache problem. Thanks, I couldn’t have done this without your assistance.
