1 【简介】 Vuepress是由Vue支持的静态网站生成工具,不太需要编写代码,就可轻松搭建个人blog。VuePress 由两部分组成:第一部分是一个极简静态网站生成器(opens new window),它包含由 Vue 驱动的主题系统和插件…
本文详细说了自己如何快速使用VuePress快速搭建个人博客,看完不会打我(开玩笑的,大家不用看也是会的,但是可以帮我指出不足)。 技术选用VuePress ,进入VuePress官网,快速上手。 上手VuePress 1.创建并进入一个新目录 2.使用你喜欢的包管理器进行初始化 3.将 VuePress 安装为本地依赖 yarn add -D vuepress 4.创建...
修改package.json文件,该文件用于我们项目的打包和运行,修改后的代码如下: {"name":"blog","version":"1.0.0","description":"","main":"index.js","scripts":{"dev":"vuepress dev docs","build":"vuepress build docs"},"keywords":[],"author":"","license":"ISC","devDependencies":{"vuepress"...
配置docs/.vuepress/config.js文件中的base, 如果打算发布到https://<USERNAME>.github.io/<REPO>/(也就是说你的仓库在:https://github.com/<USERNAME>/<REPO>), 此处我的仓库为: blog, 则将base按照如下配置即可: module.exports ={ base:"/blog/"} 第四步: 在项目根目录中,创建一个如下的脚本文件de...
直接在Gitee 创建一个名为vuepress-blog的仓库,手动触发Gitee Pages Github创建一个名为vuepress-blog的仓库,Gitee也相同创建一个名为vuepress-blog仓库,通过Github Action 每次一次仓库更新时将Github仓库自动同步到Gitee并自动触发Gitee Pages,详情操作请阅读Github Actions实现仓库自动同步Gitee并更新文档 (完) ❝ 关注...
blog: socialLinks: - { icon: LogoGithub , link: 'https://github.com/lighting5' } - { icon: LogoWechat , link: '/docs/wechat' } isShowTitleInHome: true actionText: About actionLink: /views/other/about --- 首页效果如下: config.ts配置修改 ...
1. Node.js VuePress 与 Slidev 一样，也是通过npm去安装部署的，所以我们需要提前安装好相关的环境。...
进入vuepressBlogDemo 文件夹,初始化项目 使用npm init或npm init -y(默认yes) npminit-y 创建文件夹和文件 在vuepressBlogDemo 文件夹中创建 docs 文件夹,在 docs 中创建 .vuepress 文件夹,在.vuepress中创建 public 文件夹和 config.js 文件,最终项目结构如下所示: ...
在电脑任意位置创建文件夹,用于存放我们的博客系统,我这里新建了一个blog文件夹,如下图: 第二步: 在blog文件夹下打开命令行工具,如果安装了git,鼠标右键菜单里面会有git菜单,点击git bash here: 第三步: 先检查下node是否安装好,执行命令: node -v
],sidebar: {"/blog/css/": [ {title:"CSS",collapsable:false,sidebarDepth:2,children: ["","animation"... ], }, ], ... }, }, }; base部署时的基本地址。比如我们部署到一个服务器上,这个服务器的域名是 zhang.beer,并通过 nginx 转发到指定路径 vuepress,这时就需要同时将此处的 base 也设置...