Skip to content

Commit ab66dc1

Browse files
committed
docs: update GitHub pages deployment guide [ci skip]
1 parent e37da59 commit ab66dc1

File tree

1 file changed

+52
-21
lines changed

1 file changed

+52
-21
lines changed

docs/guide/deployment.md

+52-21
Original file line numberDiff line numberDiff line change
@@ -35,23 +35,53 @@ If you are using the PWA plugin, your app must be served over HTTPS so that [Ser
3535

3636
### GitHub Pages
3737

38-
There are a few different ways to deploy as described by [GitHub Pages documentation](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/). One way is to publish using a `/docs` folder on `master` branch.
38+
1. Set correct `baseUrl` in `vue.config.js`.
3939

40-
Create an initial `vue.config.js` file to [update the `outputDir`](https://cli.vuejs.org/config/#outputdir) value to match `docs`. Typically, your static website will be hosted on https://yourUserName.github.io/yourProjectName, so you will also want to [update the `BASE_URL`](https://github.com/vuejs/vue-cli/tree/dev/docs/config#baseurl) value to match:
40+
If you are deploying to `https://<USERNAME>.github.io/`, you can omit `baseUrl` as it defaults to `"/"`.
4141

42-
```javascript
43-
// vue.config.js file to be place in the root of your repository
44-
// make sure you update `yourProjectName` with the name of your GitHub project
42+
If you are deploying to `https://<USERNAME>.github.io/<REPO>/`, (i.e. your repository is at `https://github.com/<USERNAME>/<REPO>`), set `baseUrl` to `"/<REPO>/"`. For example, if your repo name is "my-project", your `vue.config.js` should look like this:
4543

46-
module.exports = {
47-
baseUrl: process.env.NODE_ENV === 'production'
48-
? '/yourProjectName/'
49-
: '/',
50-
outputDir: 'docs'
51-
}
52-
```
44+
``` js
45+
module.exports = {
46+
baseUrl: process.env.NODE_ENV === 'production'
47+
? '/my-project/'
48+
: '/'
49+
}
50+
```
51+
52+
2. Inside your project, create `deploy.sh` with the following content (with highlighted lines uncommented appropriately) and run it to deploy:
53+
54+
``` bash{13,20,23}
55+
#!/usr/bin/env sh
56+
57+
# abort on errors
58+
set -e
59+
60+
# build
61+
npm run docs:build
62+
63+
# navigate into the build output directory
64+
cd docs/.vuepress/dist
65+
66+
# if you are deploying to a custom domain
67+
# echo 'www.example.com' > CNAME
68+
69+
git init
70+
git add -A
71+
git commit -m 'deploy'
72+
73+
# if you are deploying to https://<USERNAME>.github.io
74+
# git push -f [email protected]:<USERNAME>/<USERNAME>.github.io.git master
5375
54-
Generate the production build in `docs` directory with `npm run build`. Commit the `vue.config.js` file and the built files `docs/*`, then push to your repository's `master` branch. On GitHub, configure your repository's setting to [Publish your GitHub Pages site from a `docs` folder on your `master` branch](https://help.github.com/articles/configuring-a-publishing-source-for-github-pages/#publishing-your-github-pages-site-from-a-docs-folder-on-your-master-branch)
76+
# if you are deploying to https://<USERNAME>.github.io/<REPO>
77+
# git push -f [email protected]:<USERNAME>/<REPO>.git master:gh-pages
78+
79+
cd -
80+
```
81+
82+
::: tip
83+
You can also run the above script in your CI setup to enable automatic deployment on each push.
84+
:::
5585

5686
### GitLab Pages
5787

@@ -94,18 +124,19 @@ Commit both the `.gitlab-ci.yml` and `vue.config.js` files before pushing to you
94124
95125
### Netlify
96126
97-
> TODO | Open to contribution.
127+
1. On Netlify, setup up a new project from GitHub with the following settings:
128+
129+
- **Build Command:** `npm run build` or `yarn build`
130+
- **Publish directory:** `dist`
131+
132+
2. Hit the deploy button!
98133
99134
Also checkout [vue-cli-plugin-netlify-lambda](https://github.com/netlify/vue-cli-plugin-netlify-lambda).
100135
101136
### Amazon S3
102137
103138
See [vue-cli-plugin-s3-deploy](https://github.com/multiplegeorges/vue-cli-plugin-s3-deploy).
104139
105-
### Azure
106-
107-
> TODO | Open to contribution.
108-
109140
### Firebase
110141
111142
Create a new Firebase project on your [Firebase console](https://console.firebase.google.com). Please refer to this [documentation](https://firebase.google.com/docs/web/setup) on how to setup your project.
@@ -167,7 +198,7 @@ If you want other Firebase CLI features you use on your project to be deployed,
167198

168199
You can now access your project on `https://<YOUR-PROJECT-ID>.firebaseapp.com`.
169200

170-
Please refer on the [Firebase Documentation](https://firebase.google.com/docs/hosting/deploying) for more details.
201+
Please refer to the [Firebase Documentation](https://firebase.google.com/docs/hosting/deploying) for more details.
171202

172203
### Now
173204

@@ -183,7 +214,7 @@ Please refer on the [Firebase Documentation](https://firebase.google.com/docs/ho
183214

184215
### Surge
185216

186-
To deploy with [Surge](http://surge.sh/) the steps are very straightforward.
217+
To deploy with [Surge](http://surge.sh/) the steps are very straightforward.
187218

188219
First you would need to build your project by running `npm run build`. And if you haven't installed Surge's command line tool, you can simply do so by running the command:
189220

@@ -193,7 +224,7 @@ npm install --global surge
193224

194225
Then cd into the `dist/` folder of your project and then run `surge` and follow the screen prompt. It will ask you to set up email and password if it is the first time you are using Surge. Confirm the project folder and type in your preferred domain and watch your project being deployed such as below.
195226

196-
```
227+
```
197228
project: /Users/user/Documents/myawesomeproject/dist/
198229
domain: myawesomeproject.surge.sh
199230
upload: [====================] 100% eta: 0.0s (31 files, 494256 bytes)

0 commit comments

Comments
 (0)