小编给大家分享一下如何使用vuepress搭建静态博客,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
什么是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'], ] }, // 这是嵌套标题链接,自动显示当前激活(导航)页面标题的链接,即显示深度(h2-h7的深度) 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
部署
以上是“如何使用vuepress搭建静态博客”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
标题名称:如何使用vuepress搭建静态博客-创新互联
链接分享:https://www.cdcxhl.com/article38/ddggsp.html
成都网站建设公司_创新互联,为您提供用户体验、企业建站、品牌网站建设、企业网站制作、面包屑导航、商城网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联