👉 English README | 简体中文说明
A Hugo theme component with layout projects
and shortcodes to display GitHub pinned card style repositories.
- FixIt v0.3.7 or higher
The installation method is the same as installing a theme. There are several ways to install, choose one.
First make sure that your project itself is a Hugo module.
Then add this theme component to your hugo.toml
configuration file:
[module]
[[module.imports]]
path = "github.com/hugo-fixit/FixIt"
[[module.imports]]
path = "github.com/hugo-fixit/component-projects"
On the first start of Hugo it will download the required files.
To update to the latest version of the module run:
hugo mod get -u
hugo mod tidy
Clone FixIt and this git repository into your theme folder and add it as submodules of your website directory.
git submodule add https://github.com/hugo-fixit/FixIt.git themes/FixIt
git submodule add https://github.com/hugo-fixit/component-projects.git themes/component-projects
Next edit hugo.toml
of your project and add this theme component to your themes:
theme = ["FixIt", "component-projects"]
Finally, inject the theme component's assets in layouts/partials/custom.html
within the custom-head
or custom-assets
block:
{{- define "custom-assets" -}}
{{- partial "inject/component-projects.html" . -}}
{{- end -}}
Obtaining repositories information relies on GitHub official API. Before starting to use it, it is recommended to generate personal access token on GitHub to prevent GitHub API usage limit.
- Click to jump to GitHub Generate token, select the scope named
public_repo
to generate personal access token. - Configure with environment variable
HUGO_PARAMS_GHTOKEN=your-person-access-token
, see details in os.Getenv | Hugo
First, create the projects.yml
file and edit your data:
cp themes/component-projects/projects.yml.example data/projects.yml
If your site is multilingual, you can create a
projects.en.yml
file for English andprojects.zh-cn.yml
for Chinese.
Next, create a new page with the projects
layout:
hugo new projects/_index.md
Edit the front matter and content of the new page:
---
title: My Projects
titleIcon: fa-solid fa-laptop-code
subtitle: <https://github.com/Lruihao>
sectionSlot: Some text to display in the section slot which is above the related articles list.
layout: projects
---
Some text to display at the start of the page.
Use the gh-repo-card-container
and gh-repo-card
shortcodes in any page to display a GitHub repository card:
{{< gh-repo-card-container >}}
{{< gh-repo-card repo="hugo-fixit/component-projects" >}}
{{< gh-repo-card repo="Lruihao/hugo-blog" >}}
{{< /gh-repo-card-container >}}
Since it uses server-side rendering, all data is fetched at build time and not requested from the GitHub API on each visit. Therefore, we can use scheduled tasks to update the data to keep it up to date.
If your site is hosted on GitHub Pages, you can use GitHub Actions to deploy automatically.
name: Hugo build and deploy
on:
schedule:
# Rebuid the site every day at 00:00 UTC to update the projects data
- cron: '0 0 * * *'
push:
branches: [ main ]
workflow_dispatch:
jobs:
# Your build and deploy jobs here
If your site is hosted on Vercel, you can use Vercel's Deploy Hooks feature with GitHub Actions to deploy automatically.
name: Vercel deploy hook
on:
schedule:
# Rebuid the site every day at 00:00 UTC to update the projects data
- cron: '0 0 * * *'
jobs:
Vercel-Deploy:
runs-on: ubuntu-latest
steps:
- name: Trigger Vercel deploy hook
run: |
curl -X POST ${{ secrets.VERCEL_DEPLOY_HOOK }}
Create a deploy hook in the project settings of Vercel and add the VERCEL_DEPLOY_HOOK
variable in the Secrets of the GitHub project.
You can add the --ignoreCache
parameter to the hugo server
command to clear the cache in local server.