ubuntu搭建vuepress

ubuntu 专栏收录该内容
13 篇文章 1 订阅

准备nodejs环境,VuePress 需要 Node.js (opens new window)>= 8.6

zys@zys-virtual-machine:~$ nodejs -v
v10.24.0
zys@zys-virtual-machine:~$ npm version
{ npm: '6.14.11',
  ares: '1.15.0',
  brotli: '1.0.7',
  cldr: '35.1',
  http_parser: '2.9.4',
  icu: '64.2',
  modules: '64',
  napi: '7',
  nghttp2: '1.41.0',
  node: '10.24.0',
  openssl: '1.1.1j',
  tz: '2019c',
  unicode: '12.1',
  uv: '1.34.2',
  v8: '6.8.275.32-node.59',
  zlib: '1.2.11' }
zys@zys-virtual-machine:~$ npx -v
6.14.11

开始
官方文档

# 使⽤淘宝镜像
npm config set registry https://registry.npm.taobao.org
# 安装 VuePress 记得sudo 不然npm ERR! code EACCES
sudo npm install -g vuepress

# 在 root 目录下创建并进入my_blogs目录
mkdir ~/vuepress
cd ~/vuepress

# 项目初始化 
npm init -y

# 设置 package.json 的脚本配置 (推荐使用 FinalShell等工具直接编辑)
vi package.json
# 修改scripts中的内容如下 注意 只修改scripts
 "scripts": {
 "docs:dev": "vuepress dev docs",
 "docs:build": "vuepress build docs"
 },

# 创建文档目录以及 .vuepress ⽬录
mkdir ~/vuepress/docs ~/vuepress/docs/.vuepress

# 在 docs 目录下新建⼀个md⽂件 
echo '# Hello VuePress - first blog!' > ~/vuepress/docs/README.md 

# 在 .vuepress 目录下创建 config.js 配置⽂件 
cd ~/vuepress/docs/.vuepress 
echo >config.js 

# 在 .vuepress 目录下创建 public ⽬录 
mkdir ~/vuepress/docs/.vuepress/public  

修改首页配置
编辑 /root/my_blogs/docs 目录下的 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
---

启动vuepress

sudo vuepress dev ~/vuepress/docs

wait Extracting site metadata...
tip Apply theme @vuepress/theme-default ...
tip Apply plugin container (i.e. "vuepress-plugin-container") ...
tip Apply plugin @vuepress/register-components (i.e. "@vuepress/plugin-register-components") ...
tip Apply plugin @vuepress/active-header-links (i.e. "@vuepress/plugin-active-header-links") ...
tip Apply plugin @vuepress/search (i.e. "@vuepress/plugin-search") ...
tip Apply plugin @vuepress/nprogress (i.e. "@vuepress/plugin-nprogress") ...

● Client █████████████████████████ additional chunk assets processing (90%)


ℹ 「wds」: Project is running at http://0.0.0.0:8080/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /home/zys/vuepress/docs/.vuepress/public
ℹ 「wds」: 404s will fallback to /index.html

success [21:08:3
9] Build b71ada finished in 10258 ms!
> VuePress dev server listening at http://localhost:8080/

http://192.168.3.16:8080/
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值