how to create a link to each category

Question

I am trying to create a navigation bar displaying all the categories and then by clicking on each category, it then links to all the posts in that category.

I tried below, it displays all the categories but not as a link.

{% for category in site.categories %}
   <div class= "categories-title"><a name="{{ category | first }}">{{ category | first   }}</a></div>   
{% endfor %}

I also tried jekyll-category-archive-plugin as below, but it gives Error: Unknown tag 'category'.

{% for category in site categories %}
  {% category link category %}This is a link to {{category}} {% endcategorylink %}
{% endfor %}

Can anyone give me some tips how to best do this?

Thanks a lot. Jing

Answer 1

There's another solution that works on GitHub Pages:
One single page that contains all posts for all categories.

I answered a similar question here where I showed how to do this:
An easy way to support tags in a jekyll blog

In my answer, I'm using tags instead of categories, but as far as I know, both work exactly the same way.
(so you can just take my code and replace site.tags by site.categories)

The generated HTML for each tag will look something like this:

  <h3 id="jekyll">jekyll</h3>
  <ul>
    <li>
      <a href="/blah/">Newest Jekyll post</a>
    </li>
    <li>
      <a href="/foo/">Older Jekyll post</a>
    </li>
  </ul>

---

That was the page which displays all posts for each category.
Now to the categories list in the navigation bar.

Again, take a look at the HTML above:
Thanks to the id="jekyll" part, you can use the link /tags/#jekyll to load the /tags/ page and directly jump to the Jekyll tag.

On my site, I'm using this everywhere where I'm linking to the /tags/ page.

To create these links in your navigation bar as well, you just need to take the first example code from your question and change this:

<a name="{{ category | first }}">

...to this:

<a href="/tags/#{{ category | first }}">

(I'll just assume that your categories page is under the URL /tags/ as well, like in my example)

So the complete code will look like that:

{% for category in site.categories %}
    <div class="categories-title"><a href="/tags/#{{ category | first }}">{{ category | first }}</a></div>   
{% endfor %}

The generated HTML will have a link like the following, for each category:

<div class="categories-title"><a href="/tags/#jekyll">jekyll</a></div> 

---

EDIT:

You wrote in a comment:

I see that you have all tags with posts on one page. I have created a categories page and I would like to use this page as a template. While clicking each category in the navigation bar, I would like it to link to its own page.

In the meantime, I wrote a blog post about building separate category pages without a plugin:
Separate pages per tag/category with Jekyll (without plugins)

Answer 2

Jekyll doesn't render archive pages automatically like category pages by default. You have to create category pages yourself or use a plugin like »Category archive plugin for Jekyll«. But I guess this won't work, if you use GitHub Pages with Jekyll.