I have a Jekyll bootstrap based blog hosted on Github pages.
My problem is: Every time I change something on my web page, I have to forcefully reload the page (CTRL + R) to see the changes.
Jekyll or my browser does not seem to realize that there is a newer version available to send out.
How can I configure Jekyll to better handle this?
There are a couple of jekyl plugins to handle assets cache busting.
https://github.com/ixti/jekyll-assets/
http://matthodan.com/2012/11/22/jekyll-asset-pipeline.html
I tried jekyll-assets and it's pretty nice as it manage all kind of assets with an md5 version number.
Before I use to append a string to my css links at compilation time.
<link href="{{ ASSET_PATH }}/css/global.css?{{ site.time | date:'%Y%m%d%U%H%N%S' }}" rel="stylesheet">
You can add these meta tags to your html to disable browser caching for your pages.
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
If you want to bypass the cache on static resources you could change the name of the file each time you push it. This will make the browser get the new resource since it won't know anything about a file with a new name.
For example:
Old file name: project.css
New file name: projectv01.css
Or whatever you would like.
Related
[enter image description here][1]I am creating a website and I have a pdf page that I wish to insert into my website for people to download.
This is my link below:
Download the pdf
Harry.pdf is inside my Books folder. I already put the Books folder inside my workspace on VSCode. However, my website saids the file is not there.
I have also tried it with my website name as well before the Books/Harry.pdf and it had the same problem. If anyone knows how to just put a pdf link inside a HTML page and how it is done inside VSCode, I would appreciate it.
Try this code
Download
Or it will default to the filename on the serverside if you leave it empty, like this:
<a href="./Books/Harry.pdf" download>Download the pdf</a>
Should just be this:
Download
It should be the same in VSCode as anywhere else not sure why it isn't working, try setting the href as a URL like from google photos, to see if your file is compatible. Another equivalent is to get the url from the file source. So if you own the domain example.com your html file would be at example.com/index.html and therefore your pdf would be at example.com/Books/Harry.pdf. So you could try that if you have a url. It would look like.
Download
If you want to provide me with the .html file and the .pdf file I could probably set it up, but my guess is that is confidential.
As #Spectric said
Try clearing your cache. It would also be helpful if you showed us the file structure.
That is some good advice.
As per comment you appear to be using relative paths in common parental subfolders e.g. VSyes and Books are both folders together.
With index.html in the former and Harry.pdf in the latter.
Thus your Harry.pdf is a 1st cousin of your index.html in which case you need to use:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- meta http-equiv="X-UA-Compatible" content="IE=Edge" // Should not be needed -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="download">
<!-- if you have other canvas elements on this page
which have been tainted with cross-origin content
they can become dirty and not readable by html2xxx -->
Download Not so Dirty Harry
</div>
</body>
</html>
Beware that since both parental folders are independent of each other that in a production environment although within the same domain (thus not subject to CORS), you may still need to be aware of testing access rights.
if Books is a sub folder in VSyes then remove one dot.
so I'm trying to write a simple hello world page using Polymer. The problem I'm having is whenever I run the #polymer serve command and load up my webpage it can't find the webcomponents.min.js and the iron-component-page.html. Any reason as to why this is happening and how can I fix it?
index.html
<!doctype html>
<html>
<head>
<title>polymer-element</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../iron-component-page/iron-component-page.html">
</head>
<body>
<iron-component-page src="polymer-element.html"></iron-component-page>
</body>
</html>
I tried some of the answers given here but still can't get it to work.
I haven't quite figured it yet but polymer is using polyserve under the hood, and I think that tries to be clever with url to file directory mapping. I think it assumes a directory structure where you are developing a re-usable component so after complete when your element also sits in bower_components, you go ../web-component/web-component.html to find the import, but your development structure has bower_components within the directory you are actually developing your component in.
When dealing with an app, I just put "bower_components" at the route of my app directory, and my elements in the "src" directory as a subdirectory of that. Then I explicitly use /bower_components/web-component/web-component.html in my html imports.
Running polymer serve from the root of your app then serves that at localhost:8080/
Short answer: Assuming your working dir is "x" and components are in "x/components" , create a soft link thus:
$ ln -s components bower_components
Long answer:
polymer serve does not seem to read/honor .bowerrc.
My components directory is "components" under which all my polymer components are present.
.bowerrc --> { "directory":"components"}
Running "polymer serve" starts the server, but when I navigate to "http://localhost:8000/index.html", I get a blank page.
Upon inspecting the network traffic in the browser, all requests to webcomponentjs* are returning 404s.
So.. polymer serve is not honoring a non-default components directory. It is expecting bower-components dir.
Is it possible to define a redirect for an atom feed? If so, how does one do this? I attempted to simply replace my old atom.xml file with an 301 redirect HTML file, like so:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta rel="canonical" http-equiv="refresh" content="0;url=http://io.carlboettiger.info/2014/atom.xml" />
<link rel="canonical" href="http://io.carlboettiger.info/2014/atom.xml"/>
</head>
</html>
and saved this as atom.xml, but (perhaps because of the misleading xml extension?) this doesn't seem to redirect either in the browser or any existing feed reader.
For the RSS format, it looks like the rssboard suggests that an html redirect or an XML-based redirect like so
<redirect>
<newLocation>
http://weblog.infoworld.com/udell/rss.xml
</newLocation>
</redirect>
should do it, but I cannot find any such advice for the atom format. So, how does one define redirects for atom files? (Note: I'm not looking for a hack using .htaccess rewrite rules, since the site is deployed via Github's gh-pages and I don't have the option of custom .htaccess rules anyhow)
Is it possible to define a redirect for an atom feed?
Yes, but only through HTTP redirection. In general, this is the best way to redirect a resource on the web.
the site is deployed via Github's gh-pages
As 301 redirect for site hosted at github? indicates, there's no way to specify HTTP redirection for a GH-pages-hosted site.
The Atom spec assumes that you have control over the server, and doesn't define any additional redirection mechanism.
Unfortunately I don't know of any standard (be it de-facto) to achieve this. As far as I know, the only way to do so is to find ways to do it at the HTTP level, which you don't control when using Github pages.
Both ways you're trying are documented, but I don't know of any reader which actually implements them. At Superfeedr, we have also seen redirects using the iTunes pattern: <itunes:new-feed-url>.
We've been able to do it using services like cloudflare which will act as proxies and allow you to setup rules for specific pages or addresses.
I have created a gh-pages branch for a project that I am working on at GitHub.
I use Sublime text to author the website locally and my problem is that when this is pushed to GitHub, all the links to javascrips, images, and css files are invalid.
For instance, I have this in my head section.
<link href="assets/css/common.css" rel="stylesheet">
This works great locally, but it does not work from GitHub as the links are not resolved using the repository name as part of the URL.
It asks for:
http://[user].github.io/assets/css/common.css
when it should have been asking for:
http://[user].github.io/[repo]/assets/css/common.css.
I could of course put the repo name as part of the URL, but that would prevent my site to work locally during development.
Any idea how to deal with this?
You'll need to use Jekyll.
Copying verbatim from the relevant documentation:
Sometimes it’s nice to preview your Jekyll site before you push your
gh-pages branch to GitHub. However, the subdirectory-like URL
structure GitHub uses for Project Pages complicates the proper
resolution of URLs. Here is an approach to utilizing the GitHub
Project Page URL structure (username.github.io/project-name/) whilst
maintaining the ability to preview your Jekyll site locally.
In _config.yml, set the baseurl option to /project-name – note the leading slash and the absence of a trailing slash.
When referencing JS or CSS files, do it like this: {{ site.baseurl}}/path/to/css.css – note the slash immediately following
the variable (just before “path”).
When doing permalinks or internal links, do it like this: {{ site.baseurl }}{{ post.url }} – note that there is no slash between
the two variables.
Finally, if you’d like to preview your site before committing/deploying using jekyll serve, be sure to pass an empty
string to the --baseurl option, so that you can view everything at
localhost:4000 normally (without /project-name at the beginning):
jekyll serve --baseurl ''
This way you can preview your site locally from the site root on
localhost, but when GitHub generates your pages from the gh-pages
branch all the URLs will start with /project-name and resolve
properly.
(Apparently someone figured this out only a few months ago.)
Which browser are you using? Are you sure that this happens? Because it shouldn't. If you include a relative URL in a link, it will get resolved relative to the URL of the document that contains the link. In other words, when you include
<link href="assets/css/common.css" rel="stylesheet">
in an HTML document at http://www.foo.com/bar/doc.html, the link to assets/css/common.css will get resolved by appending it to the prefix of the URL of the HTML document without the last part of the path (without doc.html), i.e. the link will resolve to http://www.foo.com/bar/assets/css/common.css, not to http://www.foo.com/assets/css/common.css as you claim.
For example, view the source of the Twitter Bootstrap webpage: http://twitter.github.io/bootstrap/. Notice the style links at the top, specified as <link href="assets/css/bootstrap.css" rel="stylesheet">. That link correctly resolves to http://twitter.github.io/bootstrap/assets/css/bootstrap.css, i.e. it does include the repo name.
You could just put this
<base href="/[repo]/">
inside of the <head> tag, and it solves the problem.
You could also improve this solution by setting:
<base href="{{site.baseurl}}" />
and then set site.baseurl to empty string for the local testing.
This should not be an issue anymore in Dec. 2016, 3 and an half years later.
See "Relative links for GitHub pages", published by Ben Balter:
You've been able to use relative links when authoring Markdown on GitHub.com for a while.
(that is from January 2013)
Now, those links will continue to work when published via GitHub Pages.
If you have a Markdown file in your repository at docs/page.md, and you want to link from that file to docs/another-page.md, you can do so with the following markup:
[a relative link](another-page.md)
When you view the source file on GitHub.com, the relative link will continue to work, as it has before, but now, when you publish that file using GitHub Pages, the link will be silently translated to docs/another-page.html to match the target page's published URL.
Under the hood, we're using the open source Jekyll Relative Links plugin, which is activated by default for all builds.
Relative links on GitHub Pages also take into account custom permalinks (e.g., permalink: /docs/page/) in a file's YAML front matter, as well as prepend project pages' base URL as appropriate, ensuring links continue to work in any context.
And don't forget that since August 2016, you can publish your pages right from the master branch (not always the gh-pages branch)
And since Dec. 2016, you don't even need Jekyll or index.md. Simple markdown files are enough.
It seems that Github Pages is not very responsive. Though it makes new files available immediately, modified files would not appear immediately due to caching or something.
After waiting 15 minutes or so, everything is fine.
Another option is to create a new repo specifically for the github.io webpages. If you name the repo as [user].github.io on github then it will be published at https://[user].github.io and you can avoid having the repo name in the URL path completely. Obviously the downside is that you can only have 1 repo like this per github user, so it may not suit your needs, I'm not sure.
The best option is now the relative_url filter:
<link href="{{ '/assets/css/common.css' | relative_url }}" rel="stylesheet">
Static servers are (partial) for not sending the main site cookies for every request.
Also they help with splitting connection( subdomains) so that the browser will be able to download in parallel.
But I looked at viewsource of the http://winterba.sh/copacabana
And in the head section they used the same facivon name but via specific location
<link rel="shortcut icon" href="http://cdn.prom.sstatic.net/WinterBash/img/favicon.ico">
Why did they do that ? what benefit does it provides ?
This is suppose to be when I want to load the favicon but with a different name .
But why should i do it ? the browser searches favicon.ico automatically. ( and they didnt rename it)
Once the favicon is downloaded , the next time it will be taken from the cache...
so ...why ?
It's a CDN. The whole purpose of a CDN is to serve static files fast. The file is probably called favicon.ico because that's what favicons are usually called, and is not relevant.