使用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 相关文章推荐
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 Javascript
微信小程序 form组件详解
Oct 25 Javascript
jQuery 全选 全不选 事件绑定的实现代码
Jan 23 Javascript
js图片轮播插件的封装
Jul 21 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
基于PHP pthreads实现多线程代码实例
Jun 24 Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 Javascript
Vue2.0搭建脚手架
Mar 13 Vue.js
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/10/09 PHP
pw的一个放后门的方法分析
2007/10/08 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
PHP将整个网站生成HTML纯静态网页的方法总结
2012/02/05 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
基于JavaScript实现移动端TAB触屏切换效果
2015/10/20 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
详解JavaScript中精度失准问题及解决方法
2020/02/04 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
对python判断是否回文数的实例详解
2019/02/08 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
利用matplotlib为图片上添加触发事件进行交互
2020/04/23 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
迪拜领先运动补剂零售品牌中文站:Sporter商城
2019/08/20 全球购物
外贸业务员求职自荐信分享
2013/09/21 职场文书
公司部门司机岗位职责
2014/01/03 职场文书
诚信承诺书模板
2014/05/26 职场文书
质量月活动总结
2014/08/26 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
工伤事故证明
2014/10/20 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
民事辩护词范文
2015/05/21 职场文书
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python