Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
34 changes: 34 additions & 0 deletions .github/workflows/deploy.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
name: Deploy
on:
push:
branches:
- main
permissions:
contents: write
jobs:
deploy:
runs-on: ubuntu-latest

steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node
uses: actions/setup-node@v4
with:
node-version: '16'
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Configure Git
run: |
git config --global user.email "github-actions[bot]@users.noreply.github.com"
git config --global user.name "github-actions[bot]"
- name: Deploy to GitHub Pages
env:
CI: true
GIT_USER: github-actions[bot] # Add user for gh-pages package
GITHUB_TOKEN: ${{ github.token }} # Authenticate with the token
run: npx gh-pages -d build --repo https://x-access-token:${{ github.token }}@github.com/${{ github.repository }}.git


13 changes: 11 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,16 @@ It's all relatively uncomplicated. All you need to do is fork this repository in

You can have as many links as you want and each one can be accompanied by an icon (provided by [FontAwesome](https://fontawesome.com/)). There are two built-in themes based on Ethan Schoonover's popular [Solarized](https://ethanschoonover.com/solarized/) color schemes, but folks who are fancy with CSS can build their own color schemes or themes. (And please do! [Contributions are welcome!](https://github.com/jazzsequence/jazzsequence.github.io/pulls))

## Automated Deployment

See below if you want to use manual deployments and want to opt out of automatic GitHub Pages deployments.

By default, since 1.2.0, your projects will auto-deploy to GitHub pages whenever you push or merge a commit to the `main` branch. No configuration is required. The GitHub Actions bot uses its own token and runs the build and deploy workflows autonomously so you don't have to. 🎉

### Requirements
* [NodeJS](https://nodejs.org/en) (this project is foundationally based on Node 16. Other versions may not work. You might want to use [nvm](https://github.com/nvm-sh/nvm) to manage multiple Node versions)
* Some kind of command-line tool. I like [Warp](https://www.warp.dev/) (for MacOS).
* [FontAwesome v5](https://fontawesome.com/v5/search) - While this isn't a _requirement_ in the sense that you need to install anything, the v5 / v6 syntax is different, so you'll want to make sure you're looking at _v5_ documentation when referencing icon names.
* [FontAwesome v6](https://fontawesome.com/v6/search) - While this isn't a _requirement_ in the sense that you need to install anything, the v5 / v6 syntax is different, so you'll want to make sure you're looking at _v5_ documentation when referencing icon names. The FontAwesome script has been updated to use v6 icons and the syntax is backwards-compatible, meaning `fa-brands` (referenced in v6 documentation/examples) still supports the `fab` prefix.

### Getting started
The repository comes with a `details-example.js` file to get you started. Copy this into a `details.js` file where you will make your changes. You will probably want to commit this file to your repository, otherwise this file will only exist on your local machine and will not exist if you ever move machines, delete the local copy, etc.
Expand Down Expand Up @@ -54,7 +60,10 @@ Color schemes are attached to a class that is added to the main `div` that wraps
You can build and test your profile locally by running an `npm install` and then using the `npm run dev` script. That will open a new browser window that live-updates when you make changes to the source code. Use `Command + X`/`Control + X` to stop the script from running when you're done developing.

### Deploying your new profile!
First things first, you'll need to run `npm install` to install the various Node dependencies. Some of these are for local development which, if you don't plan on making changes to the code, you won't be using, but you might if you do decide to make any custom tweaks.

First things first, if you want to manually deploy, you need to remove the `deploy.yml` in `.github/workflows`. The GitHub workflow is designed to be hands-off and just deploys on pushes to `main`.

Assuming you've done that, you'll need to run `npm install` to install the various Node dependencies. Some of these are for local development which, if you don't plan on making changes to the code, you won't be using, but you might if you do decide to make any custom tweaks.

Before you deploy, you'll need to add a line to the `package.json` file. This is simply going to tell GitHub that it should look at your compiled app rather than your readme (which is what it does by default). Find the `"homepage"` line in the `package.json` and in the empty string (`""`), enter in the full URL to where your profile page will live (`https://{yourusername}.github.io`, for example, the full line in my compiled `package.json` file would be: `"homepage": "https://jazzsequence.github.io"`).

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "sapling-chain",
"version": "1.1.1",
"version": "1.2.0",
"description": "Create a tree of hyperlinks that can be used in social media profiles. 🔗🌲😂",
"author": "Chris Reynolds <me@chrisreynolds.io>",
"license": "GPL-3.0-or-later",
Expand Down