UPDATE: Add publicPath (_Base.json), deploy docs (github pages)

- Github page deploy documentation with screenshots - Vue router base path changed (webpack publicPath to /): fixed
leegeunhyeok · Nov 21, 2020 · 9c1511e · 9c1511e
1 parent 0ee2a66
commit 9c1511e
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 25 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,5 @@
 .DS_Store
 node_modules
-/dist
 
 
 # local env files

diff --git a/README.md b/README.md
@@ -50,36 +50,43 @@ and also included vuex, vue-router
 - [Activity](#activity-app) (Template: [src/data/activity.json](src/data/activity.json))
 - [Other](#other)
 
+## 🚀 Deploy
+
+- 👉 [Github Page](docs/DEPLOY_GITHUB_PAGE.md)
+- 👍 Manually
+
 ### Base
 
 Base configuration: [src/data/\_base.json](src/data/_base.json)
 
-| Property                 | Description                                          |               Example               |
-| :----------------------- | :--------------------------------------------------- | :---------------------------------: |
-| `app`                    | PWA Configuration                                    |                  -                  |
-| `app.name`               | PWA Name                                             |              `Résume`               |
-| `app.themeColor`         | PWA Theme color (CSS Color)                          |              `#ffffff`              |
-| `title`                  | Web title (in head)                                  |      `Résume | Geunhyeok LEE`       |
-| `ga`                     | Google analytics tracking ID (Optional)              |          `UA-000000000-0`           |
-| `introText[]`            | Intro text (Each line), og description               | `["For better", "Web experience."]` |
-| `profile`                | Your profile informations                            |                  -                  |
-| `profile.name`           | Name                                                 |           `Geunhyeok LEE`           |
-| `profile.email`          | Email                                                |        `dev.ghlee@gmail.com`        |
-| `profile.photo`          | Profile photo filename at `src/assets`               |            `avatar.png`             |
-| `profile.introduce`      | Introduce your self                                  |         `Makes web better`          |
-| `profile.social[]`       | Social informations in Contact app ([more](#social)) |                  -                  |
-| `profile.social[].icon`  | Social Icon (Check SocialIcon)                       |              `github`               |
-| `profile.social[].label` | Social text to be displayed                          |              `Github`               |
-| `profile.social[].url`   | Page URL to go                                       |  `https://github.com/leegeunhyeok`  |
-| `profile.skill[]`        | Your own skills list ([more](#skill))                |                  -                  |
-| `profile.skill[].label`  | Skill text to be displayed                           |            `TypeScript`             |
-| `profile.skill[].color`  | Skill's dot color ([more](#colors))                  |                `ts`                 |
-| `profile.hobby[]`        | Your hobby (Max: 2)                                  |      `["프로그래밍", "운동"]`       |
+| Property                 | Description                                                     |               Example               |
+| :----------------------- | :-------------------------------------------------------------- | :---------------------------------: |
+| `publicPath`             | Webpack [publicPath](https://webpack.js.org/guides/public-path) |                 `/`                 |
+| `app`                    | PWA Configuration                                               |                  -                  |
+| `app.name`               | PWA Name                                                        |              `Résume`               |
+| `app.themeColor`         | PWA Theme color (CSS Color)                                     |              `#ffffff`              |
+| `title`                  | Web title (in head)                                             |      `Résume | Geunhyeok LEE`       |
+| `ga`                     | Google analytics tracking ID (Optional)                         |          `UA-000000000-0`           |
+| `introText[]`            | Intro text (Each line), og description                          | `["For better", "Web experience."]` |
+| `profile`                | Your profile informations                                       |                  -                  |
+| `profile.name`           | Name                                                            |           `Geunhyeok LEE`           |
+| `profile.email`          | Email                                                           |        `dev.ghlee@gmail.com`        |
+| `profile.photo`          | Profile photo filename at `src/assets`                          |            `avatar.png`             |
+| `profile.introduce`      | Introduce your self                                             |         `Makes web better`          |
+| `profile.social[]`       | Social informations in Contact app ([more](#social))            |                  -                  |
+| `profile.social[].icon`  | Social Icon (Check SocialIcon)                                  |              `github`               |
+| `profile.social[].label` | Social text to be displayed                                     |              `Github`               |
+| `profile.social[].url`   | Page URL to go                                                  |  `https://github.com/leegeunhyeok`  |
+| `profile.skill[]`        | Your own skills list ([more](#skill))                           |                  -                  |
+| `profile.skill[].label`  | Skill text to be displayed                                      |            `TypeScript`             |
+| `profile.skill[].color`  | Skill's dot color ([more](#colors))                             |                `ts`                 |
+| `profile.hobby[]`        | Your hobby (Max: 2)                                             |      `["프로그래밍", "운동"]`       |
 
 Example
 
 ```json
 {
+  "publicPath": "/",
   "app": {
     "name": "Résume",
     "themeColor": "#ffffff"

diff --git a/docs/DEPLOY_GITHUB_PAGE.md b/docs/DEPLOY_GITHUB_PAGE.md
@@ -0,0 +1,45 @@
+# Deploy - Github Page
+
+## 1. Create Github repository
+
+<img alt="create repository 1" src="gp_1.jpg" width="700">
+
+<img alt="create repository 2" src="gp_2.jpg" width="700">
+
+## 2. Clone craeted repository
+
+- Configuration your own template data - [Template configuration](https://github.com/leegeunhyeok/resume#-template-configuration)
+
+## 3. Build configuration
+
+- `src/data/_base.json`
+
+```js
+{
+  "publicPath": "/dist", // set publicPath to /dist
+  ...
+}
+```
+
+## 4. Build
+
+```bash
+# Build
+npm run build
+```
+
+and move `dist/index.html` to `./` (Repository root directory)
+
+## 5. Commit and Push
+
+```bash
+# Staging all changes (build result included!)
+git add .
+
+# Your remote/branch
+git push origin master
+```
+
+## 6. Enjoy!
+
+🎉 Go to your Github pages!
diff --git a/docs/gp_1.jpg b/docs/gp_1.jpg
diff --git a/docs/gp_2.jpg b/docs/gp_2.jpg
diff --git a/src/data/_base.json b/src/data/_base.json
@@ -1,6 +1,7 @@
 {
+  "publicPath": "/",
   "app": {
-    "name": "GDev",
+    "name": "Résume",
     "themeColor": "#ffffff"
   },
   "title": "Résume | Geunhyeok LEE",

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -16,7 +16,7 @@ const routes: Array<RouteRecordRaw> = [
 ];
 
 const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory('/'),
   routes,
 });
 

diff --git a/vue.config.js b/vue.config.js
@@ -18,7 +18,7 @@ const generateGAScript = trackingId => `
   </script>
 `;
 
-const publicPath = process.env.NODE_ENV === 'development' ? '/' : '/dist';
+const publicPath = process.env.NODE_ENV === 'development' ? '/' : _Base.publicPath || '/dist';
 
 module.exports = {
   productionSourceMap: false,
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,7 +16,7 @@ const routes: Array<RouteRecordRaw> = [ @@
     ];
     const router = createRouter({
-      history: createWebHistory(process.env.BASE_URL),
+      history: createWebHistory('/'),
       routes,
     });
@@ Expand Down @@