Vuepress生成文档部署到gitee.io的注意事项及说明

目录
  • Vuepress生成文档部署到gitee.io注意事项
  • 在gitee中部署VuePress博客问题

Vuepress生成文档部署到gitee.io注意事项

1.静态资源要放在.vuepress/public目录下，比如创建一个assets/img/目录。把图片文件放在目录下面。

2.本地开发的时候，每次更新文件后，需要运行 vuepress dev .命令重新发布。

3.运行vuepress build .命令会编译出来一个静态文件的dist目录。只要把这个目录的东西push到gitee。

4.在gitee里创建一个新的仓库。比如https://gitee.com/xxxxxx/repo.git仓库的话，通过gitee pages服务会生成一个http://xxxxxx.gitee.io/repo的静态文件网站。注意vuepress工程的config.js配置里必须配置base:'/repo/'设定基础目录。

追述：

1.#vuepress eject把默认theme下载到项目的目录里。

这样project\.vuepress\目录下会多一个theme的目录，里面是模板文件。

关键一：要创建一个package.json，

{
  "name": "vuepress-theme-xxx",
  "version": "1.4.3",
  "description": "a theme for vuepress",
  "main": "index.js"
}

里面定义这个模板的名称，vuepress-theme-xxx

然后编辑index.js模板的入口文件，这里只要设定继承默认模板就行了。其他开发模板参考vuepress官网

const path = require('path')

// Theme API.
module.exports =  {
  extend: '@vuepress/theme-default'
}

这样，模板就搭建好了，修改模板就去改layouts目录下的layout.vue和components目录下的组件就可以。

3.使用

修改.vuepress目录下的config.js，vuepress的入口文件。

module.exports = {
    theme:"xxx"  //这里因为前面模板配置里，package.json里定义的theme名为"vuepress-theme-xxx"，前面的vuepress-theme可以省略。
}

在gitee中部署VuePress博客问题

首先下载VuePress和博客主题

cnpm i vuepress @vuepress-reco/theme-cli –g

进入文件夹“G:\GiteeRepositories”，并打开dos窗口

theme-cli init lijiang_blog #项目名
cd lijiang_blog
cnpm i #安装依赖
cnpm run dev #项目运行

（注意：这里有三种可以选，分别是blog，doc,和afternoon xxx，这里选择blog就行。afternoon xxx这个是一个成熟的示例，需要的话可以单独下载参考其代码。doc和blog区别不大）

然后打包，注意，在打包之前，一定要在G:\GiteeRepositories\lijiang_blog\docs\.vuepress中的config.js中添加一行代码，用来设置站点根路径：

base: '/lijiang_blog/' #这里的“Lijiang_blog”为等会在gitee上创建的仓库名

然后打包：npm run build

接着去码云新建仓库：https://gitee.com/projects/new

切记：仓库名要小写！！

gitee上创建仓库后，再去本地磁盘初始化一个文件夹，再将此文件夹连接到gitee仓库。

依次执行以下的命令

git init
git remote add origin “刚刚创建的项目的http://gitee.com/xxx”
git add .
git commit –m ‘asdf'
git push origin master –u

点击启动按钮后，不到半分钟就能部署好项目

这样就可以访问了。这是我部署的：http://lidajiang.gitee.io/lijiang_blog/

后面在本地添加文章后，将项目推送到gitee，点服务按钮，在打开的页面中点击更新就行

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决VuePress页面乱码问题

    解决VuePress页面乱码问题

    目录 VuePress页面乱码问题 官方步骤 VuePress 初探 建立文件夹 安装 vuepress 初始化 新建文件夹 配置页面 启动 乱码 VuePress页面乱码问题 公司有一个业务场景,需要用到VuePress,所以我这边就研究了一下.VuePress的官方文档写得很详细,步骤也很清晰. 官方步骤 # 创建文件夹 mkdir vuepress-starter cd vuepress-starter # 初始化 git init npm init # 安装Vue Press npm i

  • vuepress打包部署踩坑及解决

    vuepress打包部署踩坑及解决

    目录 vuepress打包部署踩坑记录 vuepress打包报错:error Error rendering /: 问题 方案1 方案2 vuepress打包部署踩坑记录 官网教程 官网给了多种部署方案,这里我才用的是部署到github上 在你的项目中,创建一个如下的 deploy.sh 文件(请自行判断去掉高亮行的注释): #!/usr/bin/env sh # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run docs:build # 进入生成的文件夹 cd docs/

  • 关于vuepress部署出现样式的问题及解决

    关于vuepress部署出现样式的问题及解决

    目录 vuepress部署出现样式问题 vuepress个人博客部署遇到的一些问题 1.js和css出现404问题 2.每次都要重复操作打包.运行.上传github很麻烦怎么办? 3.github.io无法打开怎么办? vuepress部署出现样式问题 以前在安装hexo的时候出了样式问题,现在用vuepress也出现了相同的问题. 本地测试完全可以 然而打包之后就彻底乱了 即使是自己本地打包成dist之后也会出现相同的问题 有点困扰,应该是打包配置的问题 通过修改index.html里的内容.

  • 解决Vuepress码云部署及自动跳转404的问题

    解决Vuepress码云部署及自动跳转404的问题

    目录 Vuepress码云部署及自动跳转404 介绍 部署 GitHub 页面 推到你仓库的的 gh-page 分支 码云页面-Gitee Pages Vuepress的简单使用 安装 Vuepress码云部署及自动跳转404 介绍 VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题.它是为了支持 Vue 子项目的文档需求而创建的. 由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载

  • VuePress使用Algolia实现全文搜索

    VuePress使用Algolia实现全文搜索

    目录 引言 确认眼神 申请授权 实施部署 调试爬取 总结回顾 引言 Algolia 为构建者提供构建世界级体验所需的搜索和推荐服务.Algolia 是一个数据库实时搜索服务,能够提供毫秒级的数据库搜索服务,并且其服务能以 API 的形式方便地布局到网页.客户端.APP 等多种场景. VuePress 官方文档就有 Algolia 搜索插件,可以直接安装使用,使用 Algolia 搜索最大的好处就是方便,它会自动爬取网站的页面内容并构建索引,你只用申请一个 Algolia 授权服务,在网站上添加一

  • Vuepress使用vue组件实现页面改造

    Vuepress使用vue组件实现页面改造

    目录 引言 前置环境 使用 vue 组件 安装插件 配置插件 创建 vue 组件 使用 vue 组件 引言 只是单纯的用 vuepress 写个 markdown 文档,的确会处处受限,满足不了定制化的样式和功能,有时只是简单的修改下某个页面,或者做些组件演示的内容,而不是开发一整套主题.所以研究下如何在项目中使用 vue 组件还有非常有必要的,毕竟也没那么难. 前置环境 node 环境 node v16.13.0 VuePress 版本 VuePress v2.0.0-beta.48 每个版本

  • vuepress实现自定义首页的样式风格

    vuepress实现自定义首页的样式风格

    目录 vuepress自定义首页的样式风格 正文 vuepress2.x修改默认样式的小技巧 详解 vuepress自定义首页的样式风格 如何自定义vuepress的首页设计风格呢?比如,我希望首页下面的红框内容是可点击的: 请看正文步骤 正文 在docs -> .vuepress下新建theme文件夹,再在theme文件夹下新建components -> Home.vue, 将vuepress -> packages -> @vuepress -> theme-defaul

  • Vuepress生成文档部署到gitee.io的注意事项及说明

    Vuepress生成文档部署到gitee.io的注意事项及说明

    目录 Vuepress生成文档部署到gitee.io注意事项 在gitee中部署VuePress博客问题 Vuepress生成文档部署到gitee.io注意事项 1.静态资源要放在.vuepress/public目录下,比如创建一个assets/img/目录.把图片文件放在目录下面. 2.本地开发的时候,每次更新文件后,需要运行 vuepress dev .命令重新发布. 3.运行vuepress build .命令会编译出来一个静态文件的dist目录.只要把这个目录的东西push到gitee.

  • 探讨:如何使用PhpDocumentor生成文档

    命令行方式: 在phpDocumentor所在目录下,输入phpdoc –h会得到一个详细的参数表,其中几个重要的参数如下:-f 要进行分析的文件名,多个文件用逗号隔开-d 要分析的目录,多个目录用逗号分割-t 生成的文档的存放路径-o 输出的文档格式,结构为输出格式:转换器名:模板目录. 例如:phpdoc -o HTML:frames:earthli -f test.php -t docs Web界面生成 在新的phpdoc中,除了在命令行下生成文档外,还可以在客户端浏览器上操作生成文档,具

  • SpringBoot如何优雅的整合Swagger Api自动生成文档

    SpringBoot如何优雅的整合Swagger Api自动生成文档

    目录 前言 整合swagger api 自定义配置信息 简单使用 Swagger常用注解 Api标记 ApiOperation标记 ApiParam标记 ApiModel标记 ApiModelProperty标记 ApiIgnore标记 ApiImplicitParam标记 ApiImplicitParams标记 总结 前言 一个好的可持续交付的项目,项目说明,和接口文档是必不可少的,swagger api 就可以帮我们很容易自动生成api 文档,不需要单独额外的去写,无侵入式,方便快捷大大减少

  • Python快速从注释生成文档的方法

    Python快速从注释生成文档的方法

    作为一个标准的程序猿,为程序编写说明文档是一步必不可少的工作,如何才能写的又好又快呢,下面我们就来详细探讨下吧. 今天将告诉大家一个简单平时只要注意的小细节,就可以轻松生成注释文档,也可以检查我们写的类方法引用名称是否重复有问题等. 一看别人专业的大牛们写的文档多牛多羡慕,不用担心我们可以让python为我们生成基本满足的说明文档,一来可以提高代码整体阅读性,二来可以将代码的整体结构看着也更清晰,这样在交接的时候可以省很多麻烦,其它同事在接手你工作的时候也不会一行行去问你这是什么那是什么的,因为

  • Pycharm创建文件时自动生成文件头注释(自定义设置作者日期)

    有时候我们传.py文件给别人时,需要添加一些文件头注释.为了不用每次新建文件时都去手动添加作者.创建日期等信息,我们可以设置一套模板,在新建.py文件的时候自动使用这套模板. 一. 模板设置 1.1 操作步骤 打开pycharm后,点击 File --> Settings ,进入设置界面 点击 Editor --> File and Code Templates --> Python Script 在右侧添加上你想注释的内容,如下图所示 代码模板如下(可以根据自己需要进行修改) #!/u

  • SpringBoot项目部署在weblogic中间件的注意事项说明

    SpringBoot项目部署在weblogic中间件的注意事项说明

    SpringBoot项目部署在weblogic中间件的注意事项 1.SpringBoot项目Tomcat部署无需手动配置web.xml 但是使用weblogic部署项目时需配置所有相关的监听器和过滤器等. <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"

  • 详解Swagger接口文档和常用注解的使用

    详解Swagger接口文档和常用注解的使用

    目录 一.Spring整合Swagger 二.swagger常用注解说明 1.@Api的使用说明 2.@ApiOperation的使用说明 3.@ApiParam的使用说明 4.@ApiModel的使用说明 5.@ApiModelProperty的使用说明 6.@ApiIgnore的使用说明 7.@ApiImplicitParam的使用说明 8.@ApiImplicitParams的使用说明 9.@ApiResponses与@ApiResponse使用说明 10.@RequestMapping注

  • 详解如何用spring Restdocs创建API文档

    详解如何用spring Restdocs创建API文档

    这篇文章将带你了解如何用spring官方推荐的restdoc去生成api文档.本文创建一个简单的springboot工程,将http接口通过Api文档暴露出来.只需要通过 JUnit单元测试和Spring的MockMVC就可以生成文档. 准备工作 你需要15min Jdk 1.8 maven 3.0+ idea 创建工程 引入依赖,其pom文件: <dependencies> <dependency> <groupId>org.springframework.boot&

  • 使用apidocJs快速生成在线文档的实例讲解

    使用apidocJs快速生成在线文档的实例讲解

    apidoc是一个轻量级的在线REST接口文档生成系统,支持多种主流语言,包括Java.C.C#.PHP和Javascript等.使用者仅需要按照要求书写相关注释,就可以生成可读性好.界面美观的在线接口文档. 本文主要包含以下内容: 1.介绍apidoc的基本概念 2.安装.使用和简单配置 3.一些特殊参数的含义及其使用 4.介绍一些使用经验 前言 apidoc能做什么? apidoc是一个轻量级的在线REST接口文档生成系统,可以根据其特定的规则的代码注释来生成静态网页.首先看下它生成的文档界

  • SpringBoot集成Swagger2生成接口文档的方法示例

    我们提供Restful接口的时候,API文档是尤为的重要,它承载着对接口的定义,描述等.它还是和API消费方沟通的重要工具.在实际情况中由于接口和文档存放的位置不同,我们很难及时的去维护文档.个人在实际的工作中就遇到过很多接口更新了很久,但是文档却还是老版本的情况,其实在这个时候这份文档就已经失去了它存在的意义.而 Swagger 是目前我见过的最好的API文档生成工具,使用起来也很方便,还可以直接调试我们的API.我们今天就来看下 Swagger2 与 SpringBoot 的结合. 准备工作

随机推荐