I'm trying the waters with Github pages, and (at the machine I'm trapped at for the moment) can't install Jekyll locally. The impression I get from the documentation is that I should just be able to write the Jekyll template commands into the content, and Github will know what to do as the commits come in.
However, that doesn't seem to be happening.
Specifically, I added: _includes/header.html:
<ul>
<li id="home_page">Home</li>
<li id="other_page">Other Stuff</li>
</ul>
and then in root index.html:
<body>
{% include header.html %}
<p>helloworld</p>
</body>
but when I go that page, it shows the include statement, instead of the processed page. I am working in the gh-pages branch (and have that set to default).
What other steps do I need to take to actually have Github process the templates?
Discovered via asking Github support:
Files for Jekyll processing actually are unique. They need to have a YAML block at the beginning, even if that block is empty. So, the above code basically needed
--- <-- these two lines of dashes are
--- <-- important
<!doctype html>
<html>
<head>
<script type="text/javascript" src="site.js"></script>
</head>
<body>
{% include header.html %}
<p>some edit? helloworld</p>
</body>
</html>
You need to include those two lines of dashes --- before starting a document that you'd like to be processed by Jekyll. If you do not, Jekyll simply copies your files as it is and does not run the commands.
You can specify different parameters between those dashes, like title, description, date, tags, categories etc etc.
Related
I've moved to Jekyll blogs since I wasn't using most of the features in Wordpress, and since my main is to have a portfolio I don't really need to be spending so much for hosting etc.
I'm having an issue calling my about.md file in my index.html in the about directory. The about.md file contains the information about myself (simple portfolio info. that will rarely be changed).
Currently the index.html file in about directory is:
---
layout: post
title: "About Me"
---
{% include head.html %}
<body class="about">
<div class="pure-g">
<section class="pure-u-2-3 container">
{% include nav.html %}
</section>
{% include about.md %}
</div>
{% include footer.html %}
</body>
As you can see I am calling the head.html + footer.html files from _include directory. I'm not sure how to call about.md though (this is the file containing info. I want shown on the page when the page is generated on the web).
Also, in which directory should about.md be? I initially had it in the root directory, but then moved it to _includes as I wanted to call it - was a right?
I'm still learning the bits and pieces of this, but can't find a tutorial.
I have a bunch of pages with the following structure:
<html>
<body>
<div id="summary">
</div>
<div id="promotions">
</div>
</body>
</html>
I want these pages to be accessible by both:
/items/one
/items/two
/items/three
And:
/promotional-offers/2014/february/one
/promotional-offers/2014/february/two
/promotional-offers/2014/february/three
/items/... should just open the page. /promotional-offers/2014/february/... should open the page /items/... and go to the anchor #promotions (scroll down to the appropriate div).
/items/one/#promotions
/items/two/#promotions
/items/three/#promotions
I'm not sure though how to set up rewrite rules in web.config to help search engines with indexing my pages and avoid having 'duplicate content'.
I would add a Canonical tag to completely avoid duplicate content, so It won't matter from which page you are showing the same content.
<!--url /promotional-offers/2014/february/one-->
<link rel="canonical" href="http://www.example.com/items/one" />
I'm trying to get this script to work on the test post. The goal is to have the links below the video jump to certain spots in the video. It works fine in the jsfiddle demo, but not on my post.
In my header.php, I load that script and the script it refers to:
<head>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
<script type="text/javascript" src="http://wcportal.acbaldwin.info/js/vimeochapters.js"></script>
</head>
In the post that I want to use, I inserted this markup in text-only view:
<iframe width="540" height="304" frameborder="0" src="http://player.vimeo.com/video/7100569?api=1&player_id=player_1" id="player_1">
</iframe>
<h2>Chapters</h2>
<ul class="chapterLinks">
<li><a class="seek" href="#" name="15">Seek to 15</a></li>
<li><a class="seek" href="#" name="30">Seek to 30</a></li>
<li><a class="seek" href="#" name="60">Seek to 60</a></li>
</ul>
Here's the test page
I'm sure I'm calling something incorrectly, but I don't know where. I'm not sure I saved the .js file correctly or if there need to be additional tags within the .js file.
I know there are more optimized and wordpress friendly ways to integrate JS, but I just need quick, dirty, and functioning for a demo. Thanks for any help!
Got the solution here from a redditor:
http://www.reddit.com/r/webdev/comments/1dn0j6/im_having_a_hard_time_getting_javascript_to_work/c9rwy85
Turns out the script needed to be in the footer. (Either that or I had a lucky coincidence while fixing an ajax issue!)
It looks like you are missing an ending } on the vimeofunction(); in the vimeochapters.js file.
I have article pages where the only content on the page is the article. When marking up pages with schema.org microdata, is it best to define the itemscope and itemtype at the very top in the <html> tag? Or in the <body> tag? Or a <div> in the body? Or does it not matter?
Example of defining in <html> tag:
<html lang="en" itemscope itemtype="http://schema.org/Article">
<body>
<div>
<span itemprop="name">How to Tie a Reef Knot</span>
...
</div>
</body>
</html>
Versus a <div> in the body:
<html>
<body>
<div itemscope itemtype="http://schema.org/Article">
<span itemprop="name">How to Tie a Reef Knot</span>
...
</div>
</body>
</html>
Is one better than the other in terms of SEO? It seems like it would be best to define it as close to the top of the page as possible (ie, <html> tag) so the search engine spiders pick it up immediately.
If you inspect this very page, you will find that the html tag does indeed include schema.org metadata
<html itemscope="" itemtype="http://schema.org/QAPage">
Not everyone does this, but stackoverflow is a top 100 website- take that for what its worth.
Obviously, you will want schema.org metadata throughout the page as well.
Doesn't matter, in the sense that either will work and neither is "wrong". Where you put these things depends very much on what information's on your page, and how it's arranged (e.g., some schemas can't go inside certain other ones). However, though it's actually implied, you might want to put WebPage on the body element, be more specific from there on down through your page code.
There's absolutely no difference in terms of SEO, partly because it doesn't matter if the microdata is parsed a fraction of a microsecond earlier, and partly because only a few select bits of microdata are currently used by major search engines (of which Article isn't one), and Google have explicitly stated there's no effect on ranking (yet).
You need to put that on div tag as your article is enclosed under it at the lowest level..so when a search engine spider will crawl your page, it can more appropriately index your article content..
Although your pages contain only articles but still they may contain other portions such as menus, author information, etc.
Here's a Github repository of mine: https://github.com/n1k0/casperjs
There's a gh-pages branch to hold the project documentation, which is basically the project website: https://github.com/n1k0/casperjs/tree/gh-pages
This branch setups the documentation site at http://n1k0.github.com/casperjs/ — hurray.
In the meanwhile, I've bough the casperjs.org domain to get this website available through it, so I put a CNAME file as recommended in the docs: https://github.com/n1k0/casperjs/blob/gh-pages/CNAME — in their example, the operation is supposed to create redirects from www.example.com and charlie.github.com to example.com…
While the website now points to http://casperjs.org/, there's no 301 redirect from http://n1k0.github.com/casperjs/ (the old site url) to the new domain name.
Any idea how to setup such a redirect, if it's even possible? Is it a bug? If it is, where should I open an issue?
Bringing this topic back from the dead to mention that GH now supports redirect-from's redirect-to parameter https://github.com/jekyll/jekyll-redirect-from#redirect-to
Simply add this to your _config.yml
gems:
- jekyll-redirect-from
And this to the top of your index page.
---
redirect_to: "http://example.com"
---
To avoid the duplicate content, in a first time you can add a meta canonical like this:
<link rel="canonical" href="http://casperjs.org">
You can redirect using Javascript after host detection, like this:
if (window.location.href.indexOf('http://niko.github.com') === 0) {
window.location.href = 'http://casperjs.org{{ page.url }}';
}
But I agree, it's not an HTTP redirection.
Why didn't you use http://www.w3.org/TR/WCAG20-TECHS/H76.html?
That would give
<meta http-equiv="refresh" content="0;URL='http://casperjs.org/'" />
Github pages don't support anything like .htaccess or nginx/conf
https://help.github.com/articles/redirects-on-github-pages/
so easiest way is:
HTML redirect:
index.html
<html>
<head>
<meta http-equiv="refresh" content="0; url=http://www.mywebsite.com/" />
</head>
<body>
<p>Redirect</p>
</body>
</html>
Manual layout method
If you don't feel like using https://github.com/jekyll/jekyll-redirect-from it's easy to implement it yourself:
a.md:
---
layout: 'redirect'
permalink: /a
redir_to: 'http://example.com'
sitemap: false
---
_layouts/redirect.html based on Redirect from an HTML page :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Redirecting...</title>
{% comment %}
Don't use 'redirect_to' to avoid conflict
with the page redirection plugin: if that is defined
it takes over.
{% endcomment %}
<link rel="canonical" href="{{ page.redir_to }}"/>
<meta http-equiv="refresh" content="0;url={{ page.redir_to }}" />
</head>
<body>
<h1>Redirecting...</h1>
<a href="{{ page.redir_to }}">Click here if you are not redirected.<a>
<script>location='{{ page.redir_to }}'</script>
</body>
</html>
Now:
firefox localhost:4000/a
will redirect you to example.com.
Like this example, the redirect-from plugin does not generate 301s, only meta + JavaScript redirects.
We can verify what is going on with:
curl localhost:4000/a
Tested on GitHub pages v64, live demo at: https://github.com/cirosantilli/cirosantilli.github.io/tree/d783cc70a2e5c4d4dfdb1a36d518d5125071e236/r
No.
Other answers talk about redirections with meta refresh or javascript. But the OP asked about 301 redirects. And here's the answer: No. It is not possible. Your site on GitHub Pages is static, so you don't have any control over the server.
I had a similar issue when switching the domain for my github pages site. I set up rerouter on Heroku to handle the 301 redirects to the new domain. It handles domain-to-domain redirects very simply, but you may have to modify it to handle your site's legacy domain+path location.
I described the steps in detail here:
http://joey.aghion.com/simple-301-redirects/