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.
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.
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…
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.
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.
My Documents/my-repo/_site/index.html
And /css/styles.css is going to be like
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
python3 -m http.server
Then open
Or in VS Code, uses the Live Server extension.
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.
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:/
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.
You can also try setting up a free site at Netlify
specify the build dir and build command.
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…
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.