CODEWITHSUNDEEP
githubjekyllgithub-pages
Willy David Jr
Willy David Jr

Reputation: 9151

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

enter image description here

Upvotes: 31

Views: 15352

Answers (6)

vstepaniuk
vstepaniuk

Reputation: 868

https://github.com/orgs/community/discussions/23460#discussioncomment-3351576

To create the _layouts folder and the default.html file in that

  1. Navigate to your repo
  2. Click Add File
  3. When it asks for the name of file, type _layouts/default.html
  4. Copy in the https://github.com/pages-themes/primer/blob/master/_layouts/default.html code. Delete the lines:
{% if site.title and site.title != page.title %}
<h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
{% endif %}
  1. Commit the change (i.e. the added file)

The GitHub Actions bot will get to work and remake your page. You can watch its progress by clicking the Actions tab.

Upvotes: -1

luaphacim
luaphacim

Reputation: 448

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:

  1. Add _config.yml in the root of the GitHub Pages repo
  2. 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.

Upvotes: 28

Codemaker2015
Codemaker2015

Reputation: 15591

You can resolve this by the following steps.

  1. Clone / download the pages-themes/hacker repository.

  2. Copy the assets folder into your repository.

  3. Open the style.scss file located under /assets/css/style.scss folder.

  4. Add the following code into the file.

    @import "{{ site.theme }}";

header {
    display: none;
}

enter image description here

Upvotes: -1

user17130343
user17130343

Reputation:

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

Upvotes: 7

Bart Roozendaal
Bart Roozendaal

Reputation: 11

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.

Upvotes: 0

Carl Walsh
Carl Walsh

Reputation: 6979

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.

Upvotes: 26

Related Questions