# 制作静态网站发布

利用VuePress: Vue 驱动的静态网站生成器制作betterlife书籍 (opens new window)的静态网站发布静态网站,对外公开介绍betterlife框架

# 制作静态网站

# 使用VuePress制作静态网站

  • VuePress
    yarn install
    yarn dev
    

# 编译发布静态网站

  • 生成网站
    yarn build
    
    • 发布目录地址: docs/.vuepress/dist

# 部署到Github Page

# 部署到Netlify

# 部署到Vercel

# 部署到Surge

# 部署到Heroku

  • 学习手册: 在Heroku (opens new window)
  • 发布到Heroku (opens new window)
  • 安装Heroku (opens new window)
    brew tap heroku/brew && brew install heroku
    
  • 登录Heroku: heroku login
  • 创建一个文件: static.json
    {
      "root": "./docs/.vuepress/dist"
    }
    
  • 在Heroku创建App: heroku apps:create skygreen2001
  • 设置buildpack: heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
  • 修改.gitignore文件: 注释掉dist, 即允许提交 docs/.vuepress/dist
  • 提交: git add . && git commit -m "commit for heroku"
  • 在Heroku发布App: git push heroku master
  • 发布完成后,需恢复提交还原,还原.gitignore文件: dist, 即在master分支上不提交dist文件夹

# 部署到Google Firebase

  • 由于Google Firebase登录安全认证问题,暂未完成该部署
  • 学习手册: 在Firebase (opens new window)
  • 发布到Firebase (opens new window)
  • 安装firebase-tools: npm i --global firebase-tools
  • 添加了配置文件: firebase.json 和 .firebaserc
  • 生成网站: yarn build
  • 登录到Firebase: firebase login --no-localhost
  • 部署到Firebase: firebase deploy .
  • 部署到Firebase: firebase deploy --only hosting:skygreen2001

# 参考