第一步：在github创建项目

在 github 上建立项目如 hellonote，拷贝项目地址 如: git@github.com:Fendi-web/hellonote.git

第二步：设置自动化上传脚本

修改 pacakage.json, 加入如下 script

  "scripts": {
    "upload": "cd dist; git init; git remote remove origin; git remote add origin git@github.com/youname/hellonote.git; git add . ; git commit -am "modify";git push -f origin master && exit 0"

第三步

终端下执行

npm run build
npm run upload

以上是自动执行upload，上传脚本

以下是我手动操作方法

npm run build
cd dist
git init
git remote remove origin
git remote git@github.com/Fendi-web/hellonote.git
git add .
git commit -am\"modify\"
git push -f origin master && exit 0

齐活。

第四步：我们在 github 当前项目的设置里设置 githubpages

之后，我们就能点击上图生成的链接预览网站了， jirengu.github.io/forevernote

但是

出现了报错，检查元素一看，资源全是404。原因是配置打包时静态资源路径的问题。

因为我们让 js 打包在 html 里的路径是/assets 开头，而 githubpages 是有二级路径的，以/assets 开头实际上是加载 jirengu.github.io/assets/xxx 的资源，路径明显不对。 所以，我们需要修改 webpack 打包的配置。

再次 build 并 upload ，可以正常打开了。

但是

出现了接口报错。原来我们的 页面的协议是 https， 而接口中用的是 http，出现协议不一致导致接口无法访问。按如下方式修改即可

image.png

因为我们的接口同时支持 https 和 http，改为//后接口协议会和当前页面保持一致，这样不管是开发还是发布都没问题了。

最后，我们再对产品做最后的优化

由于一开始用户进来，笔记本和笔记都为空，所以点开笔记页面后有如下提示

image.png

体验很不友好，而我们可以当笔记本和笔记都不存在时展示成如下方式

image.png

当创建一个笔记本还未创建笔记时展示如下方式

image.png

以下是修复后 diff 的差异。

diff --git a/build/mock.config.js b/build/mock.config.js
index 2349cd1..5339a61 100644
--- a/build/mock.config.js
+++ b/build/mock.config.js
@@ -1,8 +1,8 @@
 const fs = require('fs')
 const path = require('path')

-const mockBaseURL = 'http://note-server.hunger-valley.com'
-const realBaseURL = 'http://note-server.hunger-valley.com'
+const mockBaseURL = '//note-server.hunger-valley.com'
+const realBaseURL = '//note-server.hunger-valley.com'

 exports.config = function({ isDev = true } = { isDev: true} ) {
   let fileTxt = `
diff --git a/config/index.js b/config/index.js
index c5eded7..1f0f155 100644
--- a/config/index.js
+++ b/config/index.js
@@ -43,7 +43,7 @@ module.exports = {
     // Paths
     assetsRoot: path.resolve(__dirname, '../dist'),
     assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
+    assetsPublicPath: './',

     /**
      * Source Maps
diff --git a/package.json b/package.json
index 5ea0e93..a15a79d 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "start": "npm run dev",
     "build": "node build/build.js",
+    "upload": "cd dist; git init; git remote remove origin; git remote add origin git@github.com:jirengu/forevernote.git; git add . ; git commit -am "modify";git push -f origin master && exit 0",
     "zip": "rm -f *.zip && zip -P jirengu.com -r `git branch | grep '\* ' | cut -d ' ' -f 2`.zip . -x 'node_modules/*'"
   },
   "dependencies": {
diff --git a/src/components/NoteDetail.vue b/src/components/NoteDetail.vue
index a56b34d..4f139c3 100644
--- a/src/components/NoteDetail.vue
+++ b/src/components/NoteDetail.vue
@@ -2,7 +2,8 @@
   <div id="note" class="detail">
     <note-sidebar  @update:notes="val => notes = val"></note-sidebar>
     <div class="note-detail">
-      <div class="note-empty" v-show="!curNote.id">请选择笔记</div>
+      <div class="note-empty" v-show="!curBook.id">请创建笔记本后</div>
+      <div class="note-empty" v-show="!curNote.id">选择或创建笔记</div>
       <div class="note-detail-ct" v-show="curNote.id">
         <div class="note-bar">
           <span> 创建日期: {{curNote.createdAtFriendly}}</span>
@@ -68,7 +69,8 @@ export default {
   computed: {
     ...mapGetters([
       'notes',
-      'curNote'
+      'curNote',
+      'curBook'
       ]),

     previewContent() {
diff --git a/src/components/NoteSidebar.vue b/src/components/NoteSidebar.vue
index 28869da..c61c140 100644
--- a/src/components/NoteSidebar.vue
+++ b/src/components/NoteSidebar.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="note-sidebar">
-    <span class="btn add-note" @click="onAddNote" >添加笔记</span>
-    <el-dropdown class="notebook-title"  @command="handleCommand" placement="bottom">
+    <span v-if="curBook.id" class="btn add-note" @click="onAddNote" >添加笔记</span>
+    <span v-if="!curBook.id" class="notebook-title">无笔记本</span>
+    <el-dropdown v-if="curBook.id" class="notebook-title"  @command="handleCommand" placement="bottom">
       <span class="el-dropdown-link">
         {{curBook.title}} <i class="iconfont icon-down"></i>
       </span>
@@ -10,6 +11,7 @@
         <el-dropdown-item  command="trash">回收站</el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
+    
     <div class="menu">
       <div>更新时间</div>
       <div>标题</div>
@@ -34,7 +36,7 @@
       this.getNotebooks()
         .then(() => {
           this.setCurBook({ curBookId: this.$route.query.notebookId })
-          return this.getNotes({ notebookId: this.curBook.id})
+          if(this.curBook.id) return this.getNotes({ notebookId: this.curBook.id})
         }).then(() => {
           this.setCurNote({ curNoteId: this.$route.query.noteId })
           this.$router.replace({

重新执行

npm run build
npm run upload

githubpages 的生效时间比较慢，上传后等待1分钟左右，享受自己的成果吧