NOTE: To easily deploy an awesome list; Use the Template Repository.
This repository contains the source code for "Awesome Website", a project that transforms a simple YAML file into a beautiful, interactive, and easily deployable website. It's the perfect solution for creating and maintaining "awesome lists" with a polished and professional look.
Demo: https://raideno.github.io/awesome-website
To create your own awesome list website, you'll need to fork this repository and modify the example.list.yaml file.
name: Deploy Awesome Website to GitHub Pages
on:
push:
branches: [main]
workflow_dispatch:
jobs:
build-and-deploy:
runs-on: ubuntu-latest
permissions:
contents: read
pages: write
id-token: write
steps:
- name: checkout repository
uses: actions/checkout@v4
- name: build awesome website
uses: raideno/awesome-website@main
with:
# Formatted according to the structure specified below
yaml-path: 'example.list.yaml'
- name: upload build artifact
uses: actions/upload-pages-artifact@v3
with:
path: awesome-website-src/dist
name: github-pages
- name: deploy to github pages
id: deployment
uses: actions/deploy-pages@v4
with:
artifact_name: github-pages
- Create a GitHub repository.
- Create List File: Copy
example.list.yamlinto your repository. - Customize your list: Edit the
example.list.yamlfile to add your own title, description, and list of resources. See the YAML File Structure section below for a detailed explanation of the available fields. - Enable GitHub Pages: In your repository's settings, go to the "Pages" section and select "GitHub Actions" as the source. This will trigger the deployment workflow.
- Create Workflow file: Copy .github/workflows/deploy-awesome-website.yml into your repository.
- Finally: Push your changes and wait for the github action to complete in order to see your changes.
Your new awesome list website will be available at https://<your-username>.github.io/<your-repository-name>/.
The example.list.yaml file has a clear structure that's easy to understand and modify. Below is a breakdown of each section and its purpose.
| Field | Type | Description |
|---|---|---|
title |
String | The main title of your awesome list. |
description |
String | A short description of your list that will appear in the header. |
author |
String | The name of the primary author of the list. |
thumbnail |
URL | An optional URL for a thumbnail image to be displayed in the header. |
links |
Array of Url Strings | A list of additional links to be displayed in the header. |
elements |
Array of Objects | The core of your awesome list, where each object represents a resource. |
| Field | Type | Description |
|---|---|---|
name |
String | The name of the resource. |
description |
String | A short description of the resource. |
link |
Url | A relevant URL for the resource (e.g., website, GitHub, documentation). |
tags |
Array of Strings | A list of tags specific to this resource for filtering. |
notes |
String | A long detailed notes that support markdown and latex. |
group |
String | The group to which belongs this element. |
This project includes a GitHub Actions workflow that automatically builds and deploys your website to GitHub Pages. The workflow is triggered every time you push a change to the main branch.
To enable automated deployments, make sure to configure GitHub Pages to use the "GitHub Actions" source in your repository's settings.
Copy the .env.example file to .env and fill in the required values.
- Development:
npm run dev - Build:
npm run build - Start Build:
npm run start
Do your changes in a separate branch and create a pull request to merge them into the main branch or develop branch if you are working on a feature.