使用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 相关文章推荐
js 可拖动列表实现代码
Dec 13 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
浅析vue数据绑定
Jan 17 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
Js逆向实现滑动验证码图片还原的示例代码
Mar 10 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
PHP数字格式化
2006/12/06 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
PHP实现登录验证码校验功能
2018/05/17 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
简单的js分页脚本
2009/05/21 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
bootstrap table 服务器端分页例子分享
2015/02/10 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
详解浏览器渲染页面过程
2017/02/09 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
React中常见的动画实现的几种方式
2018/01/10 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
[05:20]2018DOTA2亚洲邀请赛主赛事第三日战况回顾 LGD率先挺进胜者组决赛
2018/04/06 DOTA
Python字符串处理函数简明总结
2015/04/13 Python
python生成圆形图片的方法
2020/03/25 Python
Django错误:TypeError at / 'bool' object is not callable解决
2019/08/16 Python
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
《搭石》教学反思
2014/04/07 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
小学生运动会报道稿
2014/09/12 职场文书
高中体育课教学反思
2016/02/16 职场文书
靠谱的活动总结
2019/04/16 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技