Difficulty in setting up jekyll theme for github page - github

I have enabled github page for my repository. I am trying to set up theme for the page using repository settings. When I selected the theme ,a _config.yml file was generated in docs folder. But no theme is there on github page. Do I need to add any other file in /docs/ folder apart from index.html and _config.yml ?

Thanks to Github support team, I got the solution. I added this front matter at the top of my HTML file, that made the theme styles applied:
---
layout: default
---
If you use Markdown, the theme would be applied automatically so converting your HTML to Markdown is another option.

Related

Github Jekyll theme hacker style does not apply to sublinks

I created a GitHub page with a hacker theme.
Then, I created another .md file (other than the index.md) and linked it to the index file.
The referenced .md (named as testlink.md) does not have the same style, unfortunately.
Here is the code: https://github.com/YesimSem/thecuriousanimal/tree/gh-pages
How may I ensure that all the .md files have that same style?
Thank you,
Updated Answer
Your link needs to be changed from .md to .html. Please see this pull request on your repository for the fix. The testlink.md is being rendered correctly but your link is going to the original Markdown file. It should be going to the HTML rendering of the Markdown file. See this URL for the correct page https://yesimsem.github.io/thecuriousanimal/testlink.html
Original Answer
You need to add Jekyll Front Matter to your new page (i.e. testlink.md) and specify the a Jekyll layout. In your situation, your new page needs the same layout as the index.md from the GitHub Jekyll Hacker theme. See the layout specified at the top of index.md.

Why are headings automatically creating links in GitHub readme.md markdown pages?

Hello: I have created readme.md files for my repositories and GitHub pages. But when I create headings that are formatted h2/## or h3/###, etc. in-page anchor links are automatically created. I have tried different ways to format the headings -- such as ##, , --- -- but I get the same result. It occurs with each heading. This occurs in readme.md files that are in the repository and those that are converted to GitHub pages. I've tested it in chrome browser and edge browser and it's the same behavior.
# sample will create the heading and an unwanted in-page link
## sample will create the heading and an unwanted in-page link
Here's a page with the behavior: https://burrittresearch.com/
My goal is to be able to format headings in markdown without having these links automatically created.
Thank you!
Those are part of the anchorjs default CSS rules from GitHub pages
<h2 id="skills">Skills
<a class="anchorjs-link"
href="#skills"
aria-label="Anchor"
data-anchorjs-icon=""
style="font: 1em / 1 anchorjs-icons; padding-left: 0.375em;">
</a>
</h2>
If you static page (like this one) include its own set of CSS file/rules (like those ones), you could add, to make sure they are not visible:
.anchorjs-link {
display: none !Important;
}
GitHub documents their markup processing in github/Markup. Note that Markdown is converted to HTML in step one, which does not add any anchors to headers. However, in step 4, which is separate from the Markdown parsing, all headers in the document have anchors added. This is done to all content, regardless of whether is comes from Markdown, ReStructured Text, textile, asscidoc, etc., and is not specific to Markdown.
Note that the above only applies to content supplied by users which is displayed on github.com. It is their site, which they control, so we don't get to change/override that behavior.
However, it is different with GitHub pages. By default, GitHub Pages uses Jekyll to convert Markdown files into HTML. Jekyll includes a number of options to control how Markdown is processed, including the auto_ids option. Turn that option off (set it to false), and Jekyll will no longer add IDs to every header. However, that is a Kramdown option, but, as I understand if, GitHub Pages uses the GitHub Flavored Markdown variant of Commonmark, which doesn't have any such options. For that matter, the GFM spec doesn't indicate that headers would be assigned IDs either (so I'm not sure where those IDs are coming from). You might try configuring Jekyll to use Kramdown with the auto_ids option turned off. Configuration options "can either be specified in a _config.yml or _config.toml file placed in your site’s root directory."
As an alternative, you could install Jekyll (or any other static site generator) locally and build the site before uploading to GitHub Pages. Simply include an empty file named .nojekyll in the site root and GitHub will not run your files through Jekyll. In this way, you get complete control over the content and formatting of the pages.

Cannot use "page" and "post" layouts of Jekyll theme in GitHub pages?

I started experimenting with GitHub pages and Jekyll.
You can find my repository here:
https://github.com/braek/braek.github.io
And the website you can find here:
http://www.braek.be
I created a post and configured "page" as layout, but the page is not rendered in the Cayman theme that I selected in the GitHub pages settings.
The same goes for a post with layout set to "post".
Is this normal? Do I need to add these templates myself in the _layouts directory?
Kind regards,
B.
The Cayman theme does not have a page layout. It only has a default layout.
You have to build the page layout yourself.
The instructions on how to create new layouts & modify the default one are in the repository of the Cayman theme, copied below for simplicity:
Layouts
If you'd like to change the theme's HTML layout:
Copy the original template from the theme's repository(Pro-tip: click "raw" to make copying easier)
Create a file called /_layouts/default.html in your site
Paste the default layout content copied in the first step
Customize the layout as you'd like

How do you remove header on Github Pages?

I am trying GitHub Pages for my developer blog post, unfortunately I am having a hard time deleting the header part after choosing a theme.
Even though I already edited the Readme.md, the header is still there and I can't even remove or edit it. Do you have any idea on how to remove or edit it? There are only 2 files on my repositories: Readme.md and _config.yml
I found you can customize your site CSS to hide the header by creating the file:
/assets/css/style.scss
---
---
#import "{{ site.theme }}";
header {
display: none;
}
This is a closed issue on Github.
That said, you may want to override the HTML layout, so your site doesn't unexpectedly break.
I encountered the same issue with the default Jekyll theme (primer). I found this closed issue very helpful.
My steps to resolve with the default GitHub pages theme, based on the post linked above:
Add _config.yml in the root of the GitHub Pages repo
Add the following lines to _config.yml:
name: luaphacim's site
title: null
Another workaround for this theme would be to give your page the same title as the title you specify in _config.yml.
First, to customize the Jekyll SEO Tag, you can set the name of the site as an empty string and nullify the title itself, so that it does not appear to the right of the title of each page — create this file in the root of your repository:
_config.yml
name: ""
title: null
Then, to completely remove the header block from your page, you can override the default layout. Copy the original file default.html to the _layouts folder of your repository and remove this block:
<header>
<!-- TL;DR -->
</header>
By default GitHub uses the Primer theme — it can also be customized in the same way as other themes.
See also: Editing the footer in GitHub pages jekyll's default minima theme
Best approach to me is to get the templates for the layout you have chosen, add these to your repository, and update them to remove the header. Worked for me.
You can resolve this by the following steps.
Clone / download the pages-themes/hacker repository.
Copy the assets folder into your repository.
Open the style.scss file located under /assets/css/style.scss folder.
Add the following code into the file.
#import "{{ site.theme }}";
header {
display: none;
}

GitHub Pages: How do I edit this page in markdown format, just as I created it?

I'm not too comfortable with touching the generated HTML that the site gives, I was wondering whether there is any way to change the contents of my page in markdown formatting, the same way that I did upon creating the page?
Any input as to go about doing this would be awesome.
By default, GitHub Pages helps you generate html pages only.
But if you setup your site to use jekyll, then you can store files in markdown. For example, in the _posts section of this repo 'cboettig/labnotebook' which is generated to carlboettiger.info.
See Help page "Using Jekyll with Pages"
More specifically (as highlighted in esfandia's answer), see "The Automatic Page Generator", which allows for markdown editing.
As commented by dregad, there is a new theme chooser in Dec. 2016:
See this article by Antriksh Yadav:
Update August 2016: Simpler GitHub Pages publishing now allows to keep your page files in a subfolder of the same branch (no more gh-pages needed):
So you don't need multiple branch anymore.
If you replace index.html with index.md containing your original markdown text, and add a "Front Matter" section at the top, then you can do your page editing in markdown.
It's totally possible and supported: just go back to "Settings", scroll down to GitHub Pages. The Source you used to create your initial page should still be there, and when you click on "Launch automatic page generator" it will allow you to update the markdown code right there in the browser.
When you're done you'll need to select the layout again, but once you're done with that it will create a new index.html, commit it using the GitHub pages source you chose, and publish the modified page.
You need Jekyll. The documentation you are looking for is here: https://help.github.com/articles/using-jekyll-with-pages