使用vuepress搭建静态博客的示例代码


Posted in Javascript onFebruary 14, 2019

什么是vuePress

vuePress是以vue驱动的主题系统的简约静态网站生成工具(拥有自己的默认主题)。

veuPress由vue,vue-router,webpack驱动的单页面应用,每个markdonw文件都使用markdonw-it编译为html文件,然后作为vue组件的模板来处理。

中文官网
VuePress仓库
项目地址

VuePress 有很多优点:

  • 界面简洁优雅(个人感觉比 HEXO 好看)
  • 容易上手(半小时能搭好整个项目)
  • 更好的兼容、扩展 Markdown 语法
  • 响应式布局,PC端、手机端
  • Google Analytics 集成
  • 支持 PWA

安装vuePress

全局安装

在此方式中,只是要项目根目录创建了一个README.md文件,直接执行访问的就是此文件

npm install -g vuepress

# 创建一个 markdown 文件
echo '# Hello VuePress' > README.md

# 开始编写文档
vuepress dev

# 构建
vuepress build

在已有项目中安装

# 安装为本地依赖项
npm install -D vuepress

# 创建一个 docs 目录
mkdir docs
# 创建一个 markdown 文件
echo '# Hello VuePress' > docs/README.md

# 开始编写文档
npx vuepress dev docs

还可以在package.json中添加js脚本,官网方式不好写,我们直接用常用的方式

{
 "scripts": {
  "start": "vuepress dev docs",//运行
  "build": "vuepress build docs"//打包
 }
}

使用vuePress搭建静态博客

接下来就是配置了,我会直接把我的配置文件贴上来,我们先看结构

博客结构

博客结构分为主页,导航栏,侧边栏

在.docs目录下新建一个.vuePress文件,在此注意,搭建博客过程中所有的配置文件以及内容文件、主题等都放在此目录中
在.vuePress文件夹下新建三个文件,public用来放图片等静态文件,theme中放到博客用到的主题,config.js中存放所有的配置

.vuePress
 ---public
 ---theme
 ---config.js

在.docs文件夹下新建几个模块文件夹,比如我的就分为学习笔记、问题记录、关于我等,每个文件夹下再新建md文件

vuePress会自动把README.md设置为导航的主页,所以如果我们需要主页就先建README.md,再新建first.md,seconde.md等文件作为侧边栏要显示的文件

.docs
 ---.vuePress
 ---about
  ---README.md
  ---first.md
  ---seconde.md
 ---study
 ---problem

具体配置

最重要的config.js配置

在此值得注意的是,主题配置不只是简单的样式配置等,其中包括导航与侧边栏部分的配置,此处配置参见官网导航栏”默认主题配置“

module.exports = {
 //网站标题
 title: '霍梦林的个人博客',
 // 主页描述
 description: 'Just playing around',
 // 要部署的仓库名字
 base: '/',
 dest: './docs/.vuepress/dist',
 // 主题配置
 themeConfig: {
  // 导航配置
  nav: [
   // text为导航栏显示文字,link为路径,即文件夹名字,注意不要丢了名字前后的'/'
   {text: 'Home', link: '/'},
   {text: 'About', link: '/about/'},
   {text: 'Problem', link: '/problem/'},
   {text: 'Study', link: '/study/'},
   {text: 'CSDN', link: 'http://blog.csdn.net/weixin_38318244/'},
   {text: 'Github', link: 'https://github.com/momo-0902'}
  ],
  // 侧边栏配置,侧边栏组,不同(导航)页面对应不同的侧边栏
  // 以对象形式配置,前边的key为nav处的路径,后边提供一个数组作为此侧边栏中的子标题
  sidebar: {
   '/problem/': [
    // ''空字符串代表主页,显示README.md中的内容
    '',
    ['201709', '201709'],//使用数组为侧边栏起别名,前边是md名称,后边是链接显示的文字
    ['201710', '201710'],
    ],
   '/study/': [
    '',
    ['axios', '1.axios'],
    ['document', '2.document'],
    ]
  },
  // 这是嵌套标题链接,自动显示当前激活(导航)页面标题的链接,即显示深度(h1-h6的深度)
  sidebarDepth: 1
 }
}

网站主页配置,即.docs下README.md的配置

---
// 使用默认主题
home: true 
// 主页头像
heroImage: /me.jpg
// '开始学习'快捷按钮
actionText: Get Started →
// 快捷按钮跳转路径
actionLink: /about/
features:
- title: Simplicity First
 details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
 details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
 details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present momo
---

[[toc]]

:tada: :100:

啦啦啦德玛西亚

啦啦啦啦撸啊撸啊

<!-- ![aaa](~@alias/me.jpg) -->

这里使用了 markdown 的拓展 `[[toc]]`

## 这里是momo的博客
### 项目中遇到的问题
### 学习笔记
### csdn
### github

[关于我](/about/)

theme主题配置

项目中只是把vuePress所有的主题配置都拷贝到了本项目中,项目结构如下:

theme
 ---styles
  ---theme.styl
  ---code.styl

 ---Home.vue
 ---Layout.vue

 ---until.js

打包部署

构建

// 此处构建生成路径为./docs/.vuepress/dist,由config.js中配置: dest: ‘./docs/.vuepress/dist', 
vuepress build docs

导航到构建输出目录

// config.js中dest配置的输出目录是哪此处就cd进入哪,所有的git操作(包含初始,添加,提交等)都在此目录下 
cd docs/.vuepress/dist

git init 
git add -A 
git commit -m ‘deploy'

推到你的仓库

如果是部署到<username>.github.io的主页上

git push origin master

这时可能出现问题

fatal: ‘origin' does not appear to be a git repository

以及fatal: Could not read from remote repository.

解决办法: 执行git remote add origin git@github.com:<USERNAME>/<REPO>.git

如果是部署到分支上

git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

(git push -f git@github.com:momo-0902/wiki.git master:gh-pages)

可在package.json中配置脚本运行

npm start 运行项目

npm run build 打包

npm run deploy 部署

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
Javascript attachEvent传递参数的办法
Dec 14 Javascript
基于jQuery实现图片的前进与后退功能
Apr 24 Javascript
Javascript 垃圾收集机制介绍理解
May 14 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
Nov 27 Javascript
jQuery EasyUI datagrid实现本地分页的方法
Feb 13 Javascript
快速掌握jQuery插件开发
Jan 19 Javascript
js中开关变量使用实例
Feb 24 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
vue插件实现v-model功能
Sep 10 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 #Javascript
VuePress 静态网站生成方法步骤
Feb 14 #Javascript
extract-text-webpack-plugin用法详解
Feb 14 #Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 #Javascript
快速了解Node中的Stream流是什么
Feb 13 #Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 #Javascript
vue实现点击隐藏与显示实例分享
Feb 13 #Javascript
You might like
mysql+php分页类(已测)
2008/03/31 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
深入理解PHP中的empty和isset函数
2016/05/26 PHP
PHPCMS2008广告模板SQL注入漏洞修复
2016/10/11 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
JavaScript 加号(+)运算符号
2009/12/06 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
jQuery列表拖动排列具体实现
2013/11/04 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
Vuejs实现带样式的单文件组件新方法
2017/05/02 Javascript
Vue实现textarea固定输入行数与添加下划线样式的思路详解
2018/06/28 Javascript
node.js使用免费的阿里云ip查询获取ip所在地【推荐】
2018/09/03 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
vue props 一次传多个值实例
2020/07/22 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
解析Python中while true的使用
2015/10/13 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
Python 复平面绘图实例
2019/11/21 Python
Python如何实现的二分查找算法
2020/05/27 Python
django使用channels实现通信的示例
2020/10/19 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
环境科学专业个人求职信
2013/12/15 职场文书
淘宝好评语大全
2014/05/05 职场文书
计算机专业自荐信
2014/05/24 职场文书
土建技术员岗位职责
2015/04/11 职场文书
责任书范本大全
2015/05/11 职场文书
盗窃案辩护词
2015/05/21 职场文书
美容院员工规章制度
2015/08/05 职场文书
为什么你写的height:100%不起作用
2021/05/10 HTML / CSS
如何将JavaScript将数组转为树形结构
2021/06/02 Javascript