blog

vuePress-theme-reco blog    2019 - 2020
blog blog

Choose mode

  • dark
  • auto
  • light
Home
Category
  • Linux
  • java
  • java 后端
  • typora
  • vue
  • java 基础
  • 编程方法
  • Mysql
Tag
TimeLine
在线工具
  • PDF 转换器
  • JSON 编辑器
  • MD 表格生成器
  • CRON 表达式
  • 代码格式化
  • 公式编辑器
  • 二维码生成器
  • 在线编码转换
  • YAML <-> Properties
  • 在线 Web 练习
Contact
  • GitHub
  • 简书
  • CSDN
  • 博客圆
  • WeChat
author-avatar

blog

23

文章

16

标签

Home
Category
  • Linux
  • java
  • java 后端
  • typora
  • vue
  • java 基础
  • 编程方法
  • Mysql
Tag
TimeLine
在线工具
  • PDF 转换器
  • JSON 编辑器
  • MD 表格生成器
  • CRON 表达式
  • 代码格式化
  • 公式编辑器
  • 二维码生成器
  • 在线编码转换
  • YAML <-> Properties
  • 在线 Web 练习
Contact
  • GitHub
  • 简书
  • CSDN
  • 博客圆
  • WeChat
  • Vue

    • 安装与配置
      • 部署到github上
        • 登录GitHub账号
        • 创建一个仓库
        • 创建ssh公钥
        • 将ssh公钥绑定到GitHub账号
        • 修改config.js文件
        • 创建deploy.sh文件
        • 修改package.json文件
        • 设置git的用户名和邮箱
        • 上传
        • 查看页面
      • 使用mddir 生成MarkDown目录结构

      Vue

      vuePress-theme-reco blog    2019 - 2020

      Vue


      blog 2019-10-01 vue

      # VuePress 使用教程

      # 安装与配置

      全局安装vuepress

      npm install -g vuepress
      npm install @vuepress-reco/theme-cli -g
      
      1
      2

      打开cmd 进入存放项目的目录,输入

      theme-cli init my-blog
      
      1

      填入相关内容

      E:\Vue workSpace>theme-cli init demo_test
      ? What's the title of your project? demo
      ? What's the description of your project? demo_test
      ? What's the author's name? Ruan.X.T.
      
      1
      2
      3
      4

      选择

      1570698527070

      自动生成以下目录

      1570698749683

      |-- demo_test
          |-- .gitignore
          |-- package-lock.json
          |-- package.json
          |-- README.md
          |-- yarn.lock
          |-- docs
              |-- README.md
              |-- .vuepress
              |   |-- config.js
              |   |-- public
              |   |   |-- favicon.ico
              |   |   |-- head.png
              |   |   |-- hero.png
              |   |-- styles
              |       |-- palette.styl
              |-- timeLine
              |   |-- README.md
              |-- views
                  |-- category1
                  |   |-- 2018
                  |   |   |-- 121501.md
                  |   |-- 2019
                  |       |-- 092101.md
                  |-- category2
                  |   |-- 2016
                  |   |   |-- 121501.md
                  |   |-- 2017
                  |       |-- 092101.md
                  |-- other
                      |-- guide.md
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31

      使用npm install 安装依赖

      # 部署到github上

      # 登录GitHub账号

      没有GitHub账号请先去注册,地址:https://github.com/

      # 创建一个仓库

      # 创建ssh公钥

      首先需要先安装git

      接着在任意位置右键点击Git Bash Here

      然后输入cd ~/.ssh

      接着输入ls,如果有id_rsa id_rsa.pub 这两文件就是有,可以跳到获取ssh继续看

      1570700137562

      输入ssh-keygen -t rsa -C "xxxxx@xxxxx.com"创建ssh密钥,按三次回车

      再然后输入 cat ~/.ssh/id_rsa.pub 获取打印出来的密钥

      # 将ssh公钥绑定到GitHub账号

      1570700245620

      1570700265653

      1570700299653

      在上图输入秘钥

      # 修改config.js文件

      添加base选项,内容为你的仓库的名字,必须以斜杠"/"作为开头和结束

      1570700383323

      # 创建deploy.sh文件

      在项目根目录下创建deploy.sh文件

      #!/usr/bin/env sh
      
      # 确保脚本抛出遇到的错误
      set -e
      
      # 生成静态文件
      npm run docs:build
      
      # 进入生成的文件夹
      cd docs/.vuepress/dist
      
      # 如果是发布到自定义域名
      # echo 'www.example.com' > CNAME
      
      git init
      git add -A
      git commit -m 'deploy'
      
      # 如果发布到 https://<USERNAME>.github.io
      # git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
      
      # 如果发布到 https://<USERNAME>.github.io/<REPO>
      # git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
      
      cd -
      
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25

      这里大部分人仅需要修改git push -f git@github.com:/.git master:gh-pages 中设置你的用户名和仓库名,并取消#注释即可

      # 修改package.json文件

      这里务必修改成这样子,docs:build是官方建议的格式所以上一步deploy.sh文件中使用的也是这个形式的命令,而bash deploy.sh是用于免密码输入上传

      {
      	"scripts": {
      			"docs:dev": "vuepress dev docs",
      			"docs:build": "vuepress build docs",
      			"deploy": "bash deploy.sh"
      	},
      }
      
      1
      2
      3
      4
      5
      6
      7

      # 设置git的用户名和邮箱

      部分人没有设置git的用户名和邮箱而导致失败,所以没有设置的人仅需要输入下面两条命令,修改即可

      git config --global user.name  "username"  
      git config --global user.email  "email"
      
      1
      2

      # 上传

      在项目根目录下点击右键,选择Git Bash Here,输入npm run deploy即可

      # 查看页面

      在你的仓库中选择Settings选项,下拉到GitHub Pages部分,点击绿色部分字体就可以查看页面了

      1570700903315

      1570700934812

      https://rxt520.github.io/Ruan.X.T.blog/

      # 使用mddir 生成MarkDown目录结构

      若没有装过node.js 需要先去装 node.js 8.0版本以上

      使用命令,会在当前目录生成结构目录

      npm install mddir -g or npm install mddir -D
      
      1