VuePress安装--Drizzt's Blog

简介: 轻量级文档服务器,可以用做博客和技术文档,可以部署在Github

VuePress
轻量级文档服务器,可以用做博客和技术文档,可以部署在Github

VuePress优点

  • 界面简洁优雅
  • 支持Markdown语法
  • 渲染静态HTML,性能优异
  • 远程安装VuePress

1.设置安全组

  • 登录到阿里云服务器
  • 进入控制台,选择ecs
  • 选择网络与安全
  • 选择安全组,选择实例,进去
  • 在入方向选择手动创建
  • 协议选择自定义TCP,端口范围为22/22和8080/8080,授权对象0.0.0.0/0,保存
  • 退出到实例与镜像里,选择实例,查看公网ip
  • 可以使用XSHELL,远程连接公网ip,输入账号密码测试连接

2.安装node.js(官方那个太麻烦了,顶不住,顶不住)

3.安装VuePress

  • 配置node.js的镜像(国内访问国外太慢了,依旧顶不住)npm config set registry " https://registry.npm.taobao.org "
  • 输入npm config get registry查看是否配置成功
  • 安装yarn包管理器npm install -g yarn(官方有俩种安装VuePress的方法,yarn的方法比npm直接安装的速度快)
  • 通过yarn安装VuePressnpm install yarn -g
  • 这个时候出现错误,可能是node版本太低了,升级一下node版本n stable(升级好慢啊)
  • 重新安装
  • 输入VuePress -v查看是否安装成功

VuePress目录结构
配置VuePress

  1. 创建一个文件夹,名字为VuePressmkdir vuepress,进入到文件夹内部cd vuepress
  2. 然后创建package.json文件夹npm init -y,这个时候会创建出package.json文件,可以ls查看一下
  3. 修改package.json文件vi package.json
  4. 修改成这样
  5. 保存,退出
  6. 接着创建文件夹 docs mkdir docs
  7. 进入到内部cd docs
  8. 创建文件echo '# Hello VuePress - first blog!' >README.md文件夹mkdir .vuepress进入到文件夹里
  9. 创建文件夹和配置文件mkdir public和echo > config.js
  10. 回到最初的目录cd ../../
  11. 然后启动vuepressvuepress dev docs
  12. 打开浏览器输入服务器公网ip及端口号8080,即可看见刚刚写入的hello VuePress
    个性化定制

修改README.md⽂件,将原来的内容删除后,将以下内容拷贝进去

home: true
heroText: Vue技术博客初试
tagline: 项⽬目结构,关注讨论,每⽇日分享
actionText: 每⽇日更更新 →
actionLink: /testlink/
features:
- title: 项⽬目结构
details: 以 Markdown 为中⼼心的项⽬目结构,以最少的配置帮助你专注于写作。
- title: 关注讨论
details: 享受 Vue + webpack 的开发体验,在 Markdown 中使⽤用 Vue 组件,同
时可以使⽤用 Vue 来开发⾃自定义主题。
- title: 每⽇日分享
details: VuePress 为每个⻚页⾯面预渲染⽣生成静态的 HTML,同时在⻚页⾯面被加载的
时候,将作为 SPA 运⾏行行。
footer: LearnVueonECS Licensed | Copyright © 2020-present
---

效果如下
image.png
你也可以自己继续换主题,定制插件让样式更多样,在官网上就有介绍

相关文章
|
6月前
|
JavaScript 前端开发 Go
8 大博客引擎 jekyll/hugo/Hexo/Pelican/Gatsby/VuePress/Nuxt.js/Middleman 对比
探索各类博客引擎:Jekyll、Hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman的对比,包括语言、模板引擎、速度、社区活跃度等。了解每种引擎的优缺点,助你选择合适的博客构建工具。查看详细文章以获取更多实战和安装指南。
|
6月前
|
Go 开发工具 git
blog-engine-04-博客引擎 hugo intro 入门介绍+安装笔记
该文是关于博客引擎的系列文章,对比了jekyll、hugo、Hexo、Pelican、Gatsby、VuePress、Nuxt.js和Middleman。文章包括jekyll的安装和SEO,hugo和Hexo的入门,Pelican和Gatsby的介绍,VuePress和Nuxt.js的特性,以及Middleman的概述。Hugo是一个基于Go语言的快速、简单的静态网站生成器,特点包括速度快、易用、灵活和跨平台。文章还提供了Hugo在Windows上的安装步骤及创建、预览和发布网站的指南。
|
开发工具 git Ruby
|
JavaScript Shell 开发工具
hexo博客时WARN Failed to install dependencies. Please run ‘npm install‘ in “D:\hexo\blog“ folder.
hexo博客时WARN Failed to install dependencies. Please run ‘npm install‘ in “D:\hexo\blog“ folder.
hexo博客时WARN Failed to install dependencies. Please run ‘npm install‘ in “D:\hexo\blog“ folder.
|
开发工具 git
gitbook docs 序言
gitbook docs 序言
|
JavaScript 前端开发 关系型数据库
一个Demo--blog
昨天一天上班摸鱼。。。闲着没事,就写了个小的博客网站。 自己搭框架的时候发现,很多东西自己其实已经忘得差不多了,这里跟大家分享分享一些容易健忘的地方。
130 0
|
JavaScript Linux Go
How to use hexo to create blog?
How to use hexo to create blog?
113 0
|
JavaScript
|
资源调度 JavaScript 前端开发
|
开发工具 git 内存技术
用 GitBook 创建一本书
用 GitBook 创建一本书 Gitbook 首先是一个软件,它使用 Git 和 Markdown 来编排书本,如果你没有听过 Git 和 Markdown,那么 Gitbook 可能不适合你直接入手,你需要先去学习 Git 和 Markdown。
893 0