Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #111

Merged
merged 2 commits into from
Feb 1, 2024
Merged

Update README.md #111

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e096d1
Update README.md
MWest2020 Jan 29, 2024
0767033
Merge branch 'main' into MWest2020-patch-2
remko48 Feb 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
48 changes: 24 additions & 24 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,33 @@ The template is highly customizable, allowing users to style their product page

One of the key advantages of this template is its simplicity. You can have a fully functional product page up and running in minutes without writing any additional code or documentation. This template saves time and makes it accessible to users with varying technical expertise.

Whether you're a seasoned developer or a newcomer to open source projects, the Product Website Template is a valuable resource that can help you showcase your work professionally and appealingly.
Whether you're a seasoned developer or a newcomer to open-source projects, the Product Website Template is a valuable resource that can help you showcase your work professionally and appealingly.

## Adventages
## Advantages

- **No coding needed** just copy the workflow to your repository
- **No server needed** github pages wil host your site
- **No content needed** the page wil use the documentation that you already have in your repository
- **No maintance or updates** the page will alwasy fetch the latest version of your documentation
- **Follows your organizations style** just use your exisitng NL Design tokens to style the page
- **No server needed** GitHub pages will host your site
- **No content needed** the page will use the documentation that you already have in your repository
- **No maintenance or updates,** the page will always fetch the latest version of your documentation
- **Follows your organization's style;** just use your existing NL Design tokens to style the page

All in all its a simple, quick, fire and forget solution for providing a simple product page that is always up to date.
All in all, it's a simple, quick, fire-and-forget solution for providing a simple product page that is always up-to-date.

## Using this template for your own GitHub repository

1. **Download the GitHub Workflow File**
Download the [productpage workflow file ](https://github.com/ConductionNL/product-website-template/blob/main/.github/workflows/product-page-deploy.yml) on GitHub. Download the file to your local machine. You can refer to the [GitHub Actions documentation](https://docs.github.com/en/actions) for more information on GitHub workflows.
Download the [product page workflow file ](https://github.com/ConductionNL/product-website-template/blob/main/.github/workflows/product-page-deploy.yml) on GitHub. Download the file to your local machine. You can refer to the [GitHub Actions documentation](https://docs.github.com/en/actions) for more information on GitHub workflows.

2. **Place the Workflow File in Your Repository**

- _In your browser_, navigate to your repository. Inside the repository, look for a folder named `.github/workflows`. If it doesn't exist, create it. When in the folder, press `Add file` (top right corner ) copy, paste the content of the `product-page-deploy.yml` into the edit screen, name the file `product-page-deploy.yml` and hit commit, and push
- _In your browser_, navigate to your repository. Inside the repository, look for a folder named `.github/workflows`. If it doesn't exist, create it. When in the folder, press `Add file` (top-right corner ) copy, paste the content of the `product-page-deploy.yml` into the edit screen, name the file `product-page-deploy.yml` and hit commit, and push
- OR _On your local machine_, navigate to your repository. Inside the repository, look for a folder named `.github/workflows`. If it doesn't exist, create it. Place the downloaded workflow file into this folder. For more information on the structure of a GitHub repository, you can refer to the [GitHub Docs](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/about-repositories).

3. **Configure the Workflow File**
Open the workflow file in a text editor. Modify the configuration settings according to your needs. Be sure to save your changes. Refer to the GitHub Actions documentation for more information on configuring a workflow file.
Open the workflow file in a text editor. Modify the configuration settings according to your needs. Be sure to save your changes. Refer to the GitHub Actions documentation for more information on configuring a workflow file.

4. **Commit and Push the Workflow File to Your Repository**
Open a terminal and navigate to your repository. Use the following commands to add the workflow file to your repository, commit the changes, and push them to GitHub:
Open a terminal and navigate to your repository. Use the following commands to add the workflow file to your repository, commit the changes, and push them to GitHub:

```CLI
git add .github/workflows/product-page-deploy.yml
Expand All @@ -42,19 +42,19 @@ All in all its a simple, quick, fire and forget solution for providing a simple

For more information on using Git, refer to the [Git documentation](https://git-scm.com/doc).

If you don't have GitHub pages setup yet, also follow the following steps
If you don't have GitHub pages set up yet, follow the following steps:

1. **Open your web browser and navigate to GitHub.**
Go to [https://github.com](https://github.com).
Go to [https://github.com](https://github.com).

2. **Log in to your GitHub account.**
Click on the "Sign in" button at the top right corner of the page. Enter your username, email address, and password, then click "Sign in".
Click on the "Sign in" button in the top right corner of the page. Enter your username, email address, and password, then click "Sign in".

3. **Navigate to the repository where you want to activate GitHub Pages.**
You can do this by clicking on the repository's name under "Your repositories" if it's a recent repository, or by clicking on "Repositories", then clicking on the repository's name.
You can do this by clicking on the repository's name under "Your repositories" if it's a recent repository, or by clicking on "Repositories", then clicking on the repository's name.

4. **Switch to the `gh-pages` branch.**
By default, GitHub shows the `main` or `master` branch of your repository. To switch to the `gh-pages` branch, click on the "Branch" dropdown menu (it's usually a button with the name of the current branch, like `main` or `master`), then select or type `gh-pages` and hit Enter.
By default, GitHub shows the `main` or `master` branch of your repository. To switch to the `gh-pages` branch, click on the "Branch" dropdown menu (it's usually a button with the name of the current branch, like `main` or `master`), then select or type `gh-pages` and hit Enter.

If the `gh-pages` branch doesn't exist, you'll need to create it. Click on the "Branch" dropdown menu, type `gh-pages` into the text box, and hit Enter. Confirm that you want to create a new branch named `gh-pages`.

Expand All @@ -65,11 +65,11 @@ If you don't have GitHub pages setup yet, also follow the following steps
Click on the "Save" button to activate GitHub Pages.

7. **Confirm that GitHub Pages is activated.**
After saving, scroll down to the "GitHub Pages" section again. You should see a message saying "Your site is published at [link]", and your Github Page can be accessed at that link.
After saving, scroll down to the "GitHub Pages" section again. You should see a message saying, "Your site is published at [link]", and your GitHub Page can be accessed at that link.

## Configuration

You can configure the Product Website template through the workflow yaml file, specifically via the environment (env) variables found within this yaml file. When you open this file, you'll notice the environment variables located at the top, which can be altered to suit your preferences. Any image URL you include here can also be a base-encoded image. The variables should appear in this format:
You can configure the Product Website template through the workflow YAML file, specifically via the environment (env) variables found within this YAML file. When you open this file, you'll notice the environment variables located at the top, which can be altered to suit your preferences. Any image URL you include here can also be a base-encoded image. The variables should appear in this format:

```yaml
env: # Change these to your preferences any image url can also be a base encoded image
Expand Down Expand Up @@ -124,16 +124,16 @@ We currently support the following configurations option's
| `NAVBAR_LOGO_URL` | `"https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png"` | The URL for the logo in your navbar. |
| `FOOTER_LOGO_URL` | `"data:image/svg+xml;base64,..."` | The URL for the logo in your footer. |
| `FOOTER_LOGO_HREF` | `"https://conduction.nl"` | The URL that the footer logo links to. |
| `JUMBOTRON_TITLE` | `"Product Website Template"` | The title in your jumbotron. If you do not alter this it wil display the repository name |
| `JUMBOTRON_SUBTITLE` | `${{ github.event.repository.url }}` | The subtitle in your jumbotron. If you do not alter this it wil display the repository url |
| `JUMBOTRON_DESCRIPTION` | `${{ github.event.repository.description }}` | The description in your jumbotron. If you do not alter this it wil display the repository description |
| `JUMBOTRON_TITLE` | `"Product Website Template"` | The title on your jumbotron. If you do not alter this, it will display the repository name |
| `JUMBOTRON_SUBTITLE` | `${{ github.event.repository.url }}` | The subtitle on your jumbotron. If you do not alter this, it will display the repository URL |
| `JUMBOTRON_DESCRIPTION` | `${{ github.event.repository.description }}` | The description on your jumbotron. If you do not alter this, it will display the repository description |
| `JUMBOTRON_SVG` | `"https://www.conduction.nl/wp-content/uploads/2021/07/cropped-Conduction_HOME_0000_afb1-1.png"` | The SVG in your jumbotron. |
| `NL_DESIGN_THEME_CLASSNAME` | `"conduction-theme"` | The classname for your NL Design theme. |
| `NL_DESIGN_THEME_CLASSNAME` | `"conduction-theme"` | The class name for your NL Design theme. |
| `FAVICON_URL` | `"data:image/svg+xml;base64,..."` | The URL for your favicon. |
| `PAGE_TITLE` | `"Product Page"` | The title of your page. The title of the page wil allways look like `"PAGE_TITLE(Product Page)" \| "{page_location}(Home)"` |
| `PAGE_TITLE` | `"Product Page"` | The title of your page. The title of the page will always look like `"PAGE_TITLE(Product Page)" \| "{page_location}(Home)"` |

## Conclusion

By following the steps mentioned in this guide, anyone can leverage the power of GitHub to deploy an engaging and informative product page with just a few clicks. So, whether you want to display the features of your newest software or give an overview of your portfolio, our Product Website Template will equip you with the right tool for the job.

We are delighted to offer this template to the community and we look forward to seeing the creative and innovative ways you will use it to present your projects.
We are delighted to offer this template to the community, and we look forward to seeing the creative and innovative ways you will use it to present your projects.
Loading