Skip to content

Commit 4e742a4

Browse files
JS-AKJS-AK
authored
Merge pull request #42 from JS-AK/JS-AK-patch-pages-gha
Create jekyll-gh-pages.yml
2 parents 2a8aee1 + 97d641e commit 4e742a4

File tree

8 files changed

+296
-4
lines changed

8 files changed

+296
-4
lines changed

Diff for: ‎.github/workflows/jekyll-gh-pages.yml

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
name: Deploy documentation to GitHub Pages
2+
3+
on:
4+
workflow_run:
5+
workflows: ['make-release']
6+
types:
7+
- completed
8+
9+
workflow_dispatch:
10+
11+
permissions:
12+
contents: read
13+
pages: write
14+
id-token: write
15+
16+
concurrency:
17+
group: "pages"
18+
cancel-in-progress: true
19+
20+
jobs:
21+
build:
22+
if: ${{ github.event.workflow_run.conclusion == 'success' }}
23+
runs-on: ubuntu-latest
24+
steps:
25+
- name: Checkout
26+
uses: actions/checkout@v4
27+
28+
- name: Setup Pages
29+
uses: actions/configure-pages@v3
30+
31+
- name: Build with Jekyll
32+
uses: actions/jekyll-build-pages@v1
33+
with:
34+
source: ./docs
35+
destination: ./_site
36+
37+
- name: Upload artifact
38+
uses: actions/upload-pages-artifact@v1
39+
40+
deploy:
41+
environment:
42+
name: github-pages
43+
url: ${{ steps.deployment.outputs.page_url }}
44+
runs-on: ubuntu-latest
45+
needs: build
46+
steps:
47+
- name: Deploy to GitHub Pages
48+
id: deployment
49+
uses: actions/deploy-pages@v1

Diff for: ‎README.md

+82-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,84 @@
1-
# example-automatic-deploy-ts-app-to-npm-with-scope
1+
# Example: Automatic Deployment of TypeScript App to npm with Scope
22

3-
Pass next secrets to github actions
3+
## Overview
4+
This guide outlines the steps to automatically deploy a TypeScript application to npm with a specific scope using GitHub Actions. By setting up this workflow, you can streamline the process of updating and publishing your package to npm, ensuring seamless integration with your development pipeline.
45

5-
- GH_TOKEN
6-
- NPM_TOKEN
6+
## Prerequisites
7+
Before proceeding, make sure you have the following:
8+
9+
- Access to the GitHub repository containing your TypeScript project.
10+
- An npm account with permissions to publish packages to the desired scope.
11+
- GitHub Personal Access Token (GH_TOKEN) with the necessary permissions to push changes and trigger GitHub Actions.
12+
- npm token (NPM_TOKEN) with permissions to publish packages.
13+
14+
## Workflow Setup
15+
To automate the deployment process, follow these steps:
16+
17+
1. **Create Secrets**: In your GitHub repository, navigate to "Settings" > "Secrets" and add the following secrets:
18+
- `GH_TOKEN`: GitHub Personal Access Token.
19+
- `NPM_TOKEN`: npm token.
20+
21+
2. **Configure GitHub Actions Workflow**: Create or modify your GitHub Actions workflow file (e.g., `.github/workflows/deploy.yml`) to define the deployment steps. Below is a sample workflow file:
22+
23+
```yaml
24+
name: make-release
25+
26+
on:
27+
push:
28+
branches:
29+
- master
30+
31+
jobs:
32+
33+
runner-job:
34+
runs-on: ubuntu-latest
35+
36+
steps:
37+
- name: Check out repository code
38+
uses: actions/checkout@v4
39+
40+
- name: Install dependencies
41+
run: npm ci
42+
43+
- name: Run Tests
44+
run: npm test
45+
46+
release:
47+
name: Release
48+
runs-on: ubuntu-latest
49+
steps:
50+
51+
- name: Checkout
52+
uses: actions/checkout@v4
53+
with:
54+
fetch-depth: 0
55+
persist-credentials: false
56+
57+
- name: Setup Node.js
58+
uses: actions/setup-node@v4
59+
with:
60+
node-version: '20'
61+
registry-url: 'https://registry.npmjs.org'
62+
63+
- name: Install dependencies and build 🔧
64+
run: npm ci && npm run build
65+
66+
- name: Make Release
67+
run: npx semantic-release
68+
env:
69+
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
70+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
71+
```
72+
73+
This workflow triggers on pushes to the `main` branch. It installs dependencies, builds the project, and then publishes it to npm.
74+
75+
3. **Commit and Push Changes**: Commit the workflow file changes to your repository and push them to GitHub. This action triggers the workflow defined in the YAML file.
76+
77+
4. **Monitor Deployment**: Once the workflow is triggered, monitor its progress in the "Actions" tab of your GitHub repository. You should see the workflow executing the defined steps.
78+
79+
5. **Verify Deployment**: After successful execution, verify that your TypeScript application has been deployed to npm with the specified scope.
80+
81+
## Conclusion
82+
By implementing this GitHub Actions workflow, you've automated the process of deploying your TypeScript application to npm, saving time and ensuring consistency in your development workflow. With secrets management and continuous integration in place, you can confidently publish updates to your npm package with ease.
83+
84+
Happy coding!

Diff for: ‎docs/.nojekyll

Whitespace-only changes.

Diff for: ‎docs/assets/img/github.svg

+1
Loading

Diff for: ‎docs/assets/img/npm.svg

+1
Loading

Diff for: ‎docs/index.html

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>Document</title>
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
8+
<meta name="description" content="Description">
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css">
11+
</head>
12+
13+
<body>
14+
<div id="app"></div>
15+
<script>
16+
window.$docsify = {
17+
// GENERAL
18+
// -----------------------------------------------------------------
19+
name: 'example-automatic-deploy-ts-app-to-npm-with-scope',
20+
repo: 'https://github.com/JS-AK/example-automatic-deploy-ts-app-to-npm-with-scope',
21+
homepage: 'index.md',
22+
loadSidebar: 'sidebar.md',
23+
24+
// NAVIGATION
25+
// -----------------------------------------------------------------
26+
alias: {
27+
'.*?/changelog': 'https://raw.githubusercontent.com/JS-AK/example-automatic-deploy-ts-app-to-npm-with-scope/master/CHANGELOG.md',
28+
},
29+
auto2top: true,
30+
maxLevel: 3,
31+
subMaxLevel: 3,
32+
33+
34+
// PLUGINS
35+
// -----------------------------------------------------------------
36+
executeScript: true,
37+
search: {
38+
depth: 3,
39+
noData: 'No results!',
40+
placeholder: 'Search...'
41+
},
42+
plugins: [
43+
// Restores initial <title>
44+
function persistTitle(hook, vm) {
45+
var titleElm = document.querySelector('title');
46+
var rootTitle = titleElm && titleElm.textContent;
47+
var pageTitlePrefix = window.$docsify.name ? window.$docsify.name + ' - ' : '';
48+
49+
if (rootTitle) {
50+
hook.doneEach(function () {
51+
var currentTitle = titleElm.textContent;
52+
var isRoot = !/\/[a-z]/.test(location.hash);
53+
var newTitle = isRoot ? rootTitle : pageTitlePrefix + currentTitle;
54+
55+
titleElm.textContent = newTitle;
56+
});
57+
}
58+
}
59+
]
60+
}
61+
</script>
62+
<!-- Docsify v4 -->
63+
<script src="https://cdn.jsdelivr.net/npm/docsify@4"></script>
64+
<script src="https://cdn.jsdelivr.net/npm/docsify-themeable@0"></script>
65+
<script src="https://cdn.jsdelivr.net/npm/docsify-plugin-ethicalads@1"></script>
66+
<script src="https://cdn.jsdelivr.net/npm/docsify-copy-code@2"></script>
67+
<script src="https://cdn.jsdelivr.net/npm/docsify-pagination@2/dist/docsify-pagination.min.js"></script>
68+
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/external-script.min.js"></script>
69+
<script src="https://cdn.jsdelivr.net/npm/docsify@4/lib/plugins/search.js"></script>
70+
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-bash.min.js"></script>
71+
</body>
72+
73+
</html>

Diff for: ‎docs/index.md

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# Example: Automatic Deployment of TypeScript App to npm with Scope
2+
3+
## Overview
4+
This guide outlines the steps to automatically deploy a TypeScript application to npm with a specific scope using GitHub Actions. By setting up this workflow, you can streamline the process of updating and publishing your package to npm, ensuring seamless integration with your development pipeline.
5+
6+
## Prerequisites
7+
Before proceeding, make sure you have the following:
8+
9+
- Access to the GitHub repository containing your TypeScript project.
10+
- An npm account with permissions to publish packages to the desired scope.
11+
- GitHub Personal Access Token (GH_TOKEN) with the necessary permissions to push changes and trigger GitHub Actions.
12+
- npm token (NPM_TOKEN) with permissions to publish packages.
13+
14+
## Workflow Setup
15+
To automate the deployment process, follow these steps:
16+
17+
1. **Create Secrets**: In your GitHub repository, navigate to "Settings" > "Secrets" and add the following secrets:
18+
- `GH_TOKEN`: GitHub Personal Access Token.
19+
- `NPM_TOKEN`: npm token.
20+
21+
2. **Configure GitHub Actions Workflow**: Create or modify your GitHub Actions workflow file (e.g., `.github/workflows/deploy.yml`) to define the deployment steps. Below is a sample workflow file:
22+
23+
```yaml
24+
name: make-release
25+
26+
on:
27+
push:
28+
branches:
29+
- master
30+
31+
jobs:
32+
33+
runner-job:
34+
runs-on: ubuntu-latest
35+
36+
steps:
37+
- name: Check out repository code
38+
uses: actions/checkout@v4
39+
40+
- name: Install dependencies
41+
run: npm ci
42+
43+
- name: Run Tests
44+
run: npm test
45+
46+
release:
47+
name: Release
48+
runs-on: ubuntu-latest
49+
steps:
50+
51+
- name: Checkout
52+
uses: actions/checkout@v4
53+
with:
54+
fetch-depth: 0
55+
persist-credentials: false
56+
57+
- name: Setup Node.js
58+
uses: actions/setup-node@v4
59+
with:
60+
node-version: '20'
61+
registry-url: 'https://registry.npmjs.org'
62+
63+
- name: Install dependencies and build 🔧
64+
run: npm ci && npm run build
65+
66+
- name: Make Release
67+
run: npx semantic-release
68+
env:
69+
GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
70+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
71+
```
72+
73+
This workflow triggers on pushes to the `main` branch. It installs dependencies, builds the project, and then publishes it to npm.
74+
75+
3. **Commit and Push Changes**: Commit the workflow file changes to your repository and push them to GitHub. This action triggers the workflow defined in the YAML file.
76+
77+
4. **Monitor Deployment**: Once the workflow is triggered, monitor its progress in the "Actions" tab of your GitHub repository. You should see the workflow executing the defined steps.
78+
79+
5. **Verify Deployment**: After successful execution, verify that your TypeScript application has been deployed to npm with the specified scope.
80+
81+
## Conclusion
82+
By implementing this GitHub Actions workflow, you've automated the process of deploying your TypeScript application to npm, saving time and ensuring consistency in your development workflow. With secrets management and continuous integration in place, you can confidently publish updates to your npm package with ease.
83+
84+
Happy coding!

Diff for: ‎docs/sidebar.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!-- markdownlint-disable-next-line first-line-heading -->
2+
- [Documentation](/)
3+
- [Changelog](changelog.md)
4+
- **Links**
5+
- [![Github](assets/img/github.svg)Github](https://github.com/JS-AK/example-automatic-deploy-ts-app-to-npm-with-scope)
6+
- [![NPM](assets/img/npm.svg)NPM](https://www.npmjs.com/package/@js-ak/example-automatic-deploy-ts-app-to-npm-with-scope)

0 commit comments

Comments
 (0)