使用vuepress搭建静态博客
什么是vuePress
vuePress是以vue驱动的主题系统的简约静态网站生成工具（拥有自己的默认主题）。
veuPress由vue,vue-router,webpack驱动的单页面应用，每个markdonw文件都使用markdonw-it编译为html文件，然后作为vue组件的模板来处理。
中文官网
VuePress仓库
项目地址
安装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 Firstdetails: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powereddetails: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performantdetails: 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:啦啦啦德玛西亚啦啦啦啦撸啊撸啊<!--  -->这里使用了 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 部署
使用vuepress搭建静态博客相关推荐
- 手把手教你使用 VuePress 搭建个人博客
手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...
- 使用 Hexo + Next 搭建静态博客
欢迎移步我的博客阅读:<使用 Hexo + Next 搭建静态博客> 前言 Github 为广大开发者提供了一个非常好的平台,不仅是代码的开源,同时Github还提供了开发者可以在 Git ...
- 使用github+hexo搭建静态博客
npm install hexo -g #安装Hexo npm update hexo -g #升级 hexo init #初始化博客 命令简写 hexo n "我的博客" == ...
- 使用 Gatsby.js 搭建静态博客 2 实现分页
原文地址:https://ssshooter.com/2018-12... 使用 Gatsby.js 搭建静态博客 1 关键文件 <- 本文将会介绍如何为初始项目添加分页功能. 理解页面创建原理 ...
- pelican搭建静态博客_Pelican入门：基于Python的静态网站生成器
pelican搭建静态博客 如果要创建自定义网站或博客,则有很多选择. 许多提供商将托管您的网站,并为您完成许多工作. (WordPress是一个非常受欢迎的选项.)但是,使用托管解决方案会失去一些灵 ...
- [Pelican] 使用Pelican搭建静态博客
为什么写博客 一方面是对自己平时工作和学习中收获的自我总结和积累,另一方面,借用知乎的一句话说就是"与世界分享你的知识". 为什么选择Plican 写博客有两种选择: 一种是博客社 ...
- Gridea 让你更方便地用 Github Pages 和 Coding Pages 搭建静态博客
当下大多数人可能已经对 Github Pages 不再陌生,它是很多喜欢写文章的人第一次接触的用于免费搭建博客建一个简洁却又不失优雅的个人博客 ,直到现在互联网上还有大量的基于它的个人博客,也有大量的 ...
- vuepress侧边栏配置_VuePress搭建静态博客网站
VuePress是什么 仅从单词上来看就是vue和press,press除了按压的意思外,还有报刊杂志和出版社等意思,所以可以理解为由vue驱动的出版工具.换个说法就是静态博客编写工具.后六字应该都不 ...
- vuepress搭建个人博客并部署
想要快速搭建自己的个人博客,记录自己的工作学习心得,争取当一条有梦想的咸鱼 相信大家都了解过vue这个框架.而今天,我们的主角vuepress 就是vue的作者尤大大的一个作品.开源于大概2年前,其本 ...
最新文章
- 【错误记录】Flutter / Android 报错 ( AAPT: error: attribute android:requestLegacyExternalStorage not found )
- gdi 格式转换 vb_VB 程序设计举例
- ON_NOTIFY消息中的id坑了我一天
- 代码质量随想录（五）注得多不如注得巧
- 【信号】信号集、sigprocmask、sigpending
- 前端学习（2139）：webpack的安装
- mysql怎样循环执行存储_mysql 循环存储过程
- 释放pytorch占用的gpu显存_pytorch程序异常后删除占用的显存操作
- 拜山贴(COM+中的连接复用)
- 实景三维的基石-osgb
- c语言色电阻环编程,c 语言的计算(电阻)请问要如何用C计算电阻的三色环如~~宗 黑 红 ==1K#include #include #in...
- 如何把网站程序文件快速上传到服务器空间经历分享
- c语言中输入数组时用不用加地址符,C语言中，用格式符”%s”输入字符数组时，数组名前不能加。...
- 抗生素对微生物组和人体健康的影响
- CCS6.1最后安装出现报错如下
- 神经网络学说的主要观点,神经网络研究属于下列
- Kotlin的协程与生命周期
- crontab: error renaming解决方法
- 微信发布4条新规！再也不用帮好友拼团砍价了，网友纷纷称赞
- [洛谷]P1535 游荡的奶牛 (#搜索 -2.7)