Issue with linking css & js files on Github - github

I'm hosting a site/page on Github, however, it is only reading the index.html file and not applying the css or js files to the site. I'm listing the file path for both the css and js files in a relative format (develop/style.css & develop/script.js) - I've tried reformatting this multiple times and have friend quite a few threads on stack overflow, nothing seems to be working :(. Can anyone find the missing link? Here's a link to the Github repo: https://github.com/emblair96/HW3-password-generator (it's an assignment for a coding Bootcamp I'm in -- so this is all very new to me).

The src tag is case sensitive. Your folder is Develop with a capital "D," but your HTML src tags both use develop with a lowercase "d."

Related

Visual Studio Code - Live Server - Html Displays but no CSS markup

I have used VSC with LiveServer for some years with only 1 problem, back a few years ago when either LiveServer or Windows10 had an update installed, next time I opened my HTML file in LiveServer, the HTML was rendered in a "basic" layout, and did not include my CSS Styles.
On an Internet search I found a solution for either this site or similar where I needed to add a line of code to either LS or Windows, sorry but I cant remember which. And all was well again until, now. The very same problem has returned, and no matter how much I search, I cant fine the solution.
There are plenty where there were errors in HTML or CSS, but this is occurring on files which haven't changed, and on new ones from the same master I use for my new pages. The screenshot included shows the HTML, LS as basic HTML and how the page loads on the browser directly. I am using Chrome, but have tried on Firefox with same results.
How LS displays and how it should be
You need to open your VS Code project from a directory that contains your HTML and CSS.
Your HTML document is in the root directory of your project (hence the URL being /filename) but you are trying to load CSS from ../../css/filename.
The project needs to be two directories higher for the webserver to include that path.

AEM Design Importer - File Not Found

I'm having a problem with AEM's design importer and wondering if anyone else has seen this or has any suggestions..
After uploading my zip file with the following file structure the page is unable to find my JavaScript file or Fonts. It does however, render my CSS and images and html:
- index.html
- css\style.css
- css\bootstrap.css
- css\fonts\*various font files*
- scripts\customjavascript.js
- img\*various img files*
The error message in the console says
"headindex.htmlclientlibs.min.js does not exist or cannot be found".
The file path its looking to find this file is https://*aemserver*/etc/designs/default/canvas/*domain*/_jcr_content/importer/headindex.htmlclientlibs.min.js
When I look at CRXDe I can see that my js and font folder/files were successfully imported under etc/designs/default/canvas/importer/ with the following folder structure:
css/font/*font files*
headindex.htmlclientlibs/css/style.css
headindex.htmlclientlibs/scripts/customjavascript.js
A workaound I have found that works is as follows:
- copying the fonts folder and pasting it under the root of /importer
- copying the customjavascript.js file and pasting it under the root of /importer and also renaming it to headindex.htmlclientlibs.min.js
But our authors don't have access to make these changes so it would kind of defeat the purpose of implementing the importer page to begin with...
I've searched all over and have yet to find anyone else who's had a similar situation or anything in the AEM documentation that addresses this. Hoping this may lead to something as I'm at a bit of a dead end. Thanks in advance!

Jekyll site attempting to download 'Posts' page instead of rendering it when link is clicked (deployed at Github)

Folks, help is needed and MUCH appreciated with a fuzzy behaviour of Jekyll site deployed to Github.
The site works perfectly when putting it up and using it in the local machine (through 'jekyll serve'). The surprise came up upon deployment to Github, the HTML 'posts.html' page created to show the post list does not get rendered at all. The rest of the site is up and running fine, but once the link is clicked to reach the mentioned page the browser is trying to DOWNLOAD the file, instead of rendering.
If you need to have a peek at the code:
https://github.com/zekdeluca/zekdeluca.github.io
And the site can be seen at:
http://zekdeluca.github.io/
Thanks in advance!
It has to do with the permalink and how the extension-less urls are working. If you add a trailing slash to your url it will work. If you are trying to do it without the trailing slash, I was under the impression that what you did would work on GH.
Something like permalink: /my-page/ will work and it creates a folder called my-page with an index.html file in it. The url will show as /my-page/ without the index.html - pretty except the trailing slash.
If you do permalink: /my-page it should be making a file my-page.html, but in your case it seemed to have made just my-page with no extension, which is then being served as a file by github and it doesn't seem to know what it is so it is downloading it instead of serving it.
There seems to be a lot of conflicting info on this, I think the behavior has changed recently, and maybe the version GH is using is able to output a file with no extension? I did not think that was the case.
more reading:
http://overengineer.net/pretty-extensionless-urls-in-github-pages-using-jekyll/
Jekyll extension-less permalinks with markdown

Using Jekyll for Website without Blog

I'd like to use Jekyll for my website, but I can't figure out how to set it up. All of the documentation I've seen shows how to use Jekyll to set up a blog. I just want to write Markdown and have Jekyll convert it to a website.
I understand that this question is a bit vague and the terminology may not be perfectly accurate. I'm new to creating a website and I don't want to learn HTML.
(Disclosure: My website will be for a project on GitHub.)
There's four types of document that you can find in a Jekyll site :
Static files like js, css or even html page. They don't have a front matter, are simply copied at generation time and can be found in the site.static_files hash,
posts they are located in _posts folder, have a front matter and can be found in the site.posts hash by liquid,
pages they can be anywhere in your folder structure, have a front matter and can be found in the site.pages hash by liquid,
collections that are more elaborated pieces of datas with a front matter and can be found in site.collections hash by liquid.
You can choose to use any of them. If you don't want to use posts, just remove or empty the _posts folder and just use pages.
If all you want to do is write markdown and have that generate a single page for a project, consider using the GH-pages automatic generator.
In step 3 you write the content for your page in Github-flavoured Markdown and then select a layout to publish it in.

Can I use a Markdown file in a GitHub page?

Since the GitHub wiki does not support directories, I want to put my md files into GitHub pages. However when I open them I found they are not interpreted at all. GitHub just gives me the raw file. See http://greenlaw110.github.com/Rythm/en/index.md. Any idea?
The documentation isn't particularly clear on this, but given that the Markdown rendering is done by Jekyll, I believe you need what they call "YAML front matter" for it to compile the page. So try putting this at the top of your file:
---
title: Document Center
---
That should be enough to trigger Jekyll. (And then you can get fancy and start using layouts, etc.)
Another reason (found by experience) why you might get a raw index.md file, is if you happen to also have a similarly-named index.html file. This blocks GH Pages.
Deleting index.html produces (on the site) a new index.html with parsed markdown. The original index.md is then no longer accessible.