This one has me scratching my head. My other pictures are working except my banner image. I am unable to figure out why it is not appearing, I have tried ../images/topb.jpg and ../topb.jpg. Any suggestions will be great! Here is my code:
<img src="images/topb.jpg" alt="topb"/>
So the directory hierarchy is as follows(couldn't post a picture not enough rep yet):
redesign
├── Css
├── images
| └── topb.jpg
└── home.html
Related
I'm trying to use the html header link with a media attribute. Weirdly enough, I'm having an issue where it works on production but not localhost. Since it's just a static page I'm using VSCode Live Server extension to run it locally. I can see that desktop.css is present in the network tab and in the sources when I use Chrome dev tools. Images, fonts and the base styles.css file all work great, no problems there.
Obviously, I could work around this by using a css media query instead but I'd really like to know what's going on here for my own edification.
Weirdly enough, it does work when I use the "Toggle device toolbar" thing and view it at desktop width.
Relavent Code
From index.html
<head>
...
<link href="./css/styles.css" rel="stylesheet" type="text/css" />
<link href="./css/desktop.css" media="(min-width: 992px)" rel="stylesheet" type="text/css" />
...
</head>
Project Structure
project_root
├── README.md
├── css
│ ├── desktop.css
│ └── styles.css
├── fonts
│ └── ...
├── images
│ └── ...
└── index.html
I would say that it is the server at fault, try using Apache HTTP server. It seems to happen with other live servers as well. I've seen this happen in other live servers as well, and it seems to just be a limitation of sorts.
I am not even 100% sure if this is the case with the server you are using.
I'm trying to make a simple webapp using Flask. When referencing my functions.js as src in the script tag, the app doesn't recognize it. My current file arrangement goes like this:
. ├── README.md ├── pycache │ └── application.cpython-39.pyc ├── app.db ├── application.py ├── functions.js ├── requirements.txt ├── static │ ├── favicon.ico │ └── styles.css ├── templates │ ├── control.html │ ├── index.html │ ├── layout.html │ └── login.html
And my html reference goes like this:
<script src="/functions.js"></script>
The weird thing is, html recognizes the files inside the /static folder, and when I put the .js inside it and change the path, it's referenced, but when I make a new folder named js, put funtions.js inside it, and change the path (Which would be /js/functions.js), it isn't found.
The value of the src attribute has to be a URL.
The webserver has to translate that URL into a set of instructions to read the file.
It is configured to do that for /static. This is a traditional place to put static files.
It is not configured to do that for any other path. If /functions.js worked then /application.py would and your server-side code would suddenly be public.
Keep your static files in the static folder. That is what it is for.
I recently started learning Flask and everythings went well until one point.
So, my project is structured this way:
FlaskApp Folder, which contains : Templates(a folder which contains: index.html , layout.html and styles(folder) and javascript(also folder) and application.py.
I included my css in the layout.html (layout.css and bootstrap.css) after the title tag like this:"
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/bootstrap.css">
And at the bottom, before the i added the javascript file of the bootstrap:
<script src="javascript/boostrap.js"></script>
After all of this, i added some html into the index.html from the bootstrap documentation page, such as alert messages...
And there is no CSS applied.(I mention that i've restarted the Flask App).
PS: i added a:
body{ background-color: red; }
to the layout.css and it's still not working.
Thank you very much !
This is strictly for development only.
So, you need to have two directories under your app, those are: static and templates. The *.html files are usually palced under templates and *.js and *.css files are placed under static.
So your app structure might be something like:
app
├── app.py
├── static
│ ├── base.css
│ ├── base.js
│ └── index
│ ├── index.css
│ └── index.js
└── templates
└── index.html
Now, lets move onto how to link these.
In your HTML file, replace the current <link> and <script> tags with something like this:
For CSS:
<link rel="stylesheet" type="text/css" href= {{ url_for("static",filename="index/index.css") }} >
For JS:
<script src= {{ url_for("static",filename="index/index.js") }} ></script>
And finally, ensure your python's route returns the appropriate html page. Simplest is to use render_template function.
#app.route("/")
def home():
return render_template("index.html")
I am trying to set up a personal homepage with Jekyll using the domain provided by my University.
An issue that I have not been able to resolve is Jekyll forcing me to use absolute paths which I believe are not compatible with the webpage hosting service.
The _config.yml file determines how Jekyll generates linkings in the index.html file which is the homepage. _config.yml looks like this...
title: Homepage | Ishank Juneja
email: ishankjuneja#gmail.com
description: >- # this means to ignore newlines until "baseurl:"
Personal homepage Beta version
baseurl: "foobar" # the subpath of your
site, e.g. /blog
url: "http://home.iitb.ac.in/~ishankjuneja" # the base hostname & protocol for your site, e.g.
http://example.com
twitter_username: ishankjuneja
github_username: ishank-juneja
# Build settings
markdown: kramdown
theme: minima
plugins:
- jekyll-feed
An example of the (many) linkings it generates in the index.html file is
<link rel="stylesheet" href="/foobar/assets/main.css">
This link explained to me that this is, in fact, an absolute path, which didn't seem like a problem to me, but the Directory Tree on the Web hosting service looks like,
public_html
├── 404.html
├── about
│ └── index.html
├── assets
│ ├── main.css
│ └── minima-social-icons.svg
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2018
└── 10
└── 04
└── test-post.html
The URL for my homepage http://home.iitb.ac.in/~ishankjuneja/ is associated with the folder public_html, so the path for main.css above would be incorrect. Something like href="assets/main.css" works well, but there seems to be nothing that I can type in _config.yml to get this result.
In configuration you have to properly set up baseurl:
baseurl: "~ishankjuneja"
Then use
{{site.baseurl}}page.url
In your example , putting /foobar (the baseurl in _config.yml) is not a good idea.
Using absolute URl is not a good idea either as you have said.
The solution is to use relative_url Liquid Filter as
<link rel="stylesheet" href={{"/assets/main.css" | relative_url }} >
similar solution as #Aleksandr Kiselev suggested.
Use {{ page.url | absolute_url }}
Liquid filters description: https://jekyllrb.com/docs/liquid/filters/
I've been experimenting with Jekyll using Octopress for deployment. I've got it working perfectly on localhost, but for some reason the CSS isn't getting loaded when the site loads on Github Pages. I'd appreciate any assistance understanding why.
When I view the site loading at the Github Pages url it shows a 404 error for main.css. The initiator column (using developer tools in Chrome btw) indicates this comes from the index.html file, at the line in the HTML head:
<link rel="stylesheet" href="/css/main.css">
The tree for the _site directory on my local machine is:
.
├── 2015
│ └── 11
│ └── 09
│ ├── another-jekyll-blog.html
│ ├── fifth-time-is-the-charm.html
│ └── jekyll-and-octopress-is-this-thing-on.html
├── about
│ └── index.html
├── css
│ └── main.css
├── feed.xml
├── index.html
└── jekyll
└── update
└── 2015
└── 11
└── 09
└── welcome-to-jekyll.html
This tree matches exactly in the Github repository after the site has been pushed up (I used jekyll build followed by octopress deploy).
When I look at the Sources tab in developer tools, for the deployed site, the tree shows as:
[USER].github.io
|-css
| |-main.css
|
|-octo-5
| |-(index)
But when I view the site on localhost, the site tree is:
localhost:4000
|-css
| |-main.css
|
|-(index)
The issue clearly seems to have something to do with the way the main.css file is being referenced on Github Pages. I assume that the link to the stylesheet in the index file is not working because main.css isn't in the relative path /css/main.css as expected. It works locally, but not on the Github Pages site. But I can't understand why, since the site tree appears to be correct, hasn't been modified from Jekyll defaults, and is the same locally as well as on the remote.
For good measure, including the _config.yml file below. It is essentially unchanged from the default settings at install, though I added some Octopress settings:
# Site settings
title: Test Site
email: your-email#domain.com
description: > # this means to ignore newlines until "baseurl:"
Site description here...
baseurl: "" # the subpath of your site, e.g. /blog
url: "http://yourdomain.com"
twitter_username: jekyllrb
## --- Octopress defaults --- ##
# Default extensions for new posts and pages
post_ext: markdown
page_ext: html
# Default templates for posts and pages, found in _templates/
post_layout: post
page_layout: page
# Format titles with titlecase?
titlecase: true
# Change default template file (in _templates/)
post_template: post
page_template: page
draft_template: draft
For reference, the repository is publicly available at: https://github.com/bg-scro/octo-5
I'm using jekyll and github's personal website generator. Adding the following code to my _config.yml file below solved the issue of my css not rendering in production. Not exactly sure why though. Would love an explanation. :)
baseurl: /PROJECT
url: http://USERNAME.github.io
Repo: https://github.com/kaeland/kaeland.github.io
For my case(not using octopress),
When I checked the rendered html in my blog by inspect element, link for css in head tag was this:
'/css/main.css'
This seems to be in correct to me because css/main.css or ./css/main.css worked on index.html. But it broke things on other post pages.
So, kept the css path to be default BUT changed the root in _config.yml as
root: /
Now, everything works fine on local and after publishing on git with this as root.
But yes, in your case, it is what previous answer told,
root: /octo-5
EDIT:
Strangely, I was working with keeping root as / and I am not sure what happened wrong but that stopped working for internal pages. But this below solution works. Note: In default project ofr jekyll, baseurl and url given in _config.yml are commented, so put it according to you.
In case user site
baseurl: /
url: http://USERNAME.github.io
or
In case project site
baseurl: /PROJECT
url: http://USERNAME.github.io
See difference between user site and project site here
https://help.github.com/articles/user-organization-and-project-pages/
In _config.yml, set root: /octo-5.
Call css like the original octopress :
<link rel="stylesheet" href="{{ root_url }}/css/main.css">