How to make GitHub's Jekyll work with index.html?

Question

I'm trying to make a GitHub page. At the beginning, I use GitHub generator. I included Gemfile and _config.yml to generate SEO tag and it works as expected. The generated site will include the following section.

<!-- Begin Jekyll SEO tag v2.6.1 -->
  <meta ...
<!-- End Jekyll SEO tag -->

Now, I've just updated my site to the new one using HTML template from HTML5 UP. It's up and run normally, however, I cannot find a way to make Jekyll generate SEO tag for my index.html file. I've tried to add triple dashes (front matter) to my index.html on the first line.

---
---
<!DOCTYPE HTML>
<!-- Other code below -->

The thing is, it partially break the site (page isn't rendered properly). Therefore, I've to copy/paste the generated tag and add them manually to my code. Is there a way to make Jekyll properly create SEO tags for my site? Or did my misunderstand something very basic here?

To be clear, I've very limited knowledge in web development, that's why I use a template in the first place. Here is my page in case it helps clarify the question https://hunghvu.github.io/ and here is its GitHub repository incase you want to know the file structure.

Update

(09/30)
- I attempted to turn the index.html file into index.md while still keeping all the code (plus the tripled dashes). In a sense, it works. The page is generated, but still, it's not rendered properly as when I use html format. I'm aware that the way to actually build site using Jekyll is much different, but that does not answer my question.
- In case it is necessary to show what I mean by saying "not properly rendered", I will update this question later on.
(09/31)
- The picture below is how my page looks like when I add front matter and {% seo %}. Notice that when I first go to the page, the side bar is already in SOME OTHER WORK, or last section. It should be on the WELCOME. The WELCOME section is not rendered and sidebar functionality is broken.

I tried, added in the bottom of head section but it doesn't work. — Hung Vu
It is rendered as a line of text on the page. Like a pure html page without any css element. — Hung Vu
Can you add a screenshot of that? I have a suspicion that your default layout might be the reason. — Polygnome

pygeek pygeek · Accepted Answer · 2020-10-02T16:26:36

Problem

GitHub pages gem is not included in your project, therefore GitHub is not running Jekyll build. Furthermore, you have nothing specified in your front matter. You also have no layout.

Solution

Include gem "github-pages", "~> VERSION", group: :jekyll_plugins in your Gemfile.

Notes

Consider using front matter and creating a layout file _layouts/default.html and moving everything except what’s in body (including SEO)to the layout file. The index.html should extend the layout by specifying layout property in front matter.

References

Front Matter: https://jekyllrb.com/docs/front-matter/ GitHub (step 9): https://docs.github.com/en/free-pro-team@latest/github/working-with-github-pages/creating-a-github-pages-site-with-jekyll