手牵手,我们一起搭建VuePress博客
平时Google搜问题的时候,很多方案都是链接到博客上的,有简书、博客园、思否等等,当然,还有很多个人搭建的博客,风格各异。慢慢的,自己又有了自搭博客的想法,一是作为自己工作踩坑的学习记录,二者万一哪天也能帮到别人解决了什么问题,岂不美哉
选定VuePress
前后利用工作之余想了几种方案,也考虑过Hexo,也是很火的博客搭建工具,但又想借此机会,学习一下新技术,VuePress是我所在一个技术交流群里一位大佬推荐的,我了解之后,确实很喜欢, 它有以下几个特点:
- 轻易上手,配置简单
- Vue驱动,享用Vue+webpack开发环境,可以自定义Vue组件
- 性能高效
其实上面的优点官网都有介绍,我比较认可,再赘述一遍
详情请浏览VuePress中文网
开始安装
# 全局安装 VuePress
yarn global add vuepress # 或者用 npm install -g vuepress
复制代码
为了方便省事,免去重新构建整个项目的时间,可以从官网demo那里clone下来整个项目,到后面根据自己的情况再去修改
# cd 到你要保存blog的文件夹, 然后clone
git clone git@github.com:docschina/vuepress.git
复制代码
启动调试
cd vuepress //进入项目根目录
yarn //安装依赖
yarn dev //启动调试服务
复制代码
当终端中出现 VuePress dev server listening at http://localhost:8080/
就说明项目已经正常启动调试了,你可以在浏览器输入http://localhost:8080/
预览整个博客项目
修改项目结构
你看到的项目结构应该是下面这样的
.
├── .vuepress
│ ├── components
│ ├── config.js // 网站基础配置文件,主要修改的文件
│ └── public // 存放网站静态资源,例如图片
├── config
│ └── README.md
├── default-theme-config
│ └── README.md
├── guide
│ ├── README.md
│ ├── assets.md
│ ├── basic-config.md
│ ├── custom-themes.md
│ ├── deploy.md
│ ├── getting-started.md
│ ├── i18n.md
│ ├── markdown.md
│ └── using-vue.md
├── zh // 我们需要的中文配置
| ├── README.md // 首页配置文件
│ ├── config
│ ├── default-theme-config
│ └── guide
└── README.md // 首页配置文件
复制代码
因为我们主要是中文界面,不考虑英文,所以,可以直接把zh
文件夹里的所有文件移动到上层目录,覆盖原有的guide
、 default-theme-config
、config
,以及首页配置文件README.md
完成之后应该是这样的目录结构
.
├── .vuepress
│ ├── components
│ ├── config.js
│ └── public
├── config
│ └── README.md // 可删除
├── default-theme-config // 这个也可以删,或者改成自己需要的
│ └── README.md
├── guide // 也可删除,建议根据这个修改成自己的blog内容
│ ├── README.md
│ ├── assets.md
│ ├── basic-config.md
│ ├── custom-themes.md
│ ├── deploy.md
│ ├── getting-started.md
│ ├── i18n.md
│ ├── markdown.md
│ └── using-vue.md
├── README.md
复制代码
网站基本配置
在.vuepress
下的config.js
里,包括了网站需要设置的标题、描述等基本信息
简单列举一些,因为没有留原来的,附上的是我修改后的
module.exports = {dest: 'vuepress', // yarn 打包生成的文件地址,在根目录下会有一个vuepress文件夹locales: { // 语言配置'/': {lang: 'zh-CN',title: 'devZhang', // 网站标题description: 'Something Good Will Be Happen!' // 网站描述,显示在标题下面}},head: [ // 额外添加到当前页面 <head>标签里的标签['link', { rel: 'icon', href: `/logo.png` }],['link', { rel: 'manifest', href: '/manifest.json' }],['meta', { name: 'theme-color', content: '#3eaf7c' }],['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],['meta', { name: 'msapplication-TileColor', content: '#000000' }]],serviceWorker: true, // VuePress支持PWA配置theme: 'vue', // 主题文件
复制代码
通过上面的serviceWorker
配置,配合public
里的manifest.json
配置icons
图标使用。
配置网站首页
在.docs
下的README.md
就是网站首页配置文件,以下是我修改保留的东西,把没用的都删了
---
home: true // 是否启用首页默认布局
heroImage: /alone.png // 首页显示的图片地址
actionText: Go Blog → // 首页按钮的文字
actionLink: /js/ // 点击首页按钮后链接的路径
---
复制代码
我的首页效果展示:
配置网站结构
下面是我在官方Demo基础上修改后的网站结构,可供参考
themeConfig: {repo: 'dvxiaofan', // github名称,可以加参数(/项目名),直接到项目。 只写用户名就会直接到你github首页editLinks: false, // 每篇文章底部是否显示查看原文和编辑, 不需要,就设置为falsedocsDir: 'docs', locales: { // 网站顶部的导航栏配置'/': {nav: [{text: 'Web前端', // 显示名字items: [ // 下面有二级目录,就这样设置{text: 'JS',link: '/js/'},{text: 'CSS',link: '/css/'},{text: 'HTML',link: '/html/'},]},{text: '轮子',items: [{text: 'Echarts',link: '/echarts/'},{text: 'Vue',link: '/vue/'}, ]},{text: '生活随笔',link: '/lifes/'},{text: '关于',link: '/about/'}],sidebar: { // 侧边栏配置'/js/': jsSidebarConfig('JS相关'),}}}}
}
// 侧边栏具体配置
function jsSidebarConfig (title) {return [{title,collapsable: false, // 是否可折叠children: [ // 对应每一篇文章,省略了`.md`扩展名'', // 默认对应`README.md`'js01','js02','js03','js04','js05',]}]
}复制代码
网站顶部目录效果展示
部署上线
在运行yarn build
之后生成的是静态页面,我们需要把打包生成的vuepress
文件夹中的内容托管到服务器,这样才能真能的通过网络浏览我们的博客。 暂时可以用GitHub来托管,省去了自己花钱买服务器和域名的繁琐。
我们需要在GitHub上建立两个仓库, 一个是平时新增维护整个博客用的, 一个用来托管博客打包后的文件
比如,我建立了一个MyBlog
和 dvxiaofan.github.io
注意 这个
dvxiaofan.github.io
里 前面的名字是你的GitHub用户名, 必须一模一样!我GitHub名是dvxiaofan
,所以项目名就是前面的样子
第一个仓库就放整个项目,具体git操作不再赘述。
编写发布脚本
为了方便以后发布使用,打开项目跟目录下的 scripts
文件夹里的 deploy-gh.sh
文件, 修改成下面这样
cd vuepress // 进入到打包好的输出文件夹
git init
git add -A
git commit -m 'deploy'
git push -f git@github.com:dvxiaofan/dvxiaofan.github.io.git master // 代码上传到前面建立的第二个仓库的master分支, 你需要替换成自己的
复制代码
查看成果
把上面的文章保存,在终端里cd到整个项目目录下,然后执行yarn deploy-gh
, 脚本就会开始执行,知道最后结束,代码提交部署成功, 你就可以输入托管博客的查看地址https://dvxiaofan.github.io
, 没问题的话,你应该会看到自己的博客了。
小结
这次就先写到这里,后期有时间会把博客部署到自己的域名上去,到时候再来更新文章
转载于:https://juejin.im/post/5c51853df265da610f641add
手牵手,我们一起搭建VuePress博客相关推荐
- 一文搭建Vuepress博客/文档系统:搭建,导出,SEO,自动编译和部署,域名,HTTPS,备案等
本文纯原创,搭建后的博客/文档网站可以参考: Java 全栈知识体系.如需转载请说明原处. 文章内容目录 文章内容目录 第一部分 - 博客/文档系统的搭建 博客/文档搭建前言 有哪些选择 我做了哪些尝 ...
- 手把手教你使用 VuePress 搭建个人博客
手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...
- 从零开始搭建一个博客 部署上线 自定义域名 vuepress+github+vercel
全局安装VuePress npm install -g vuepress 创建项目文件夹 mkdir vuepreeeBlogDemo cd vuepreeeBlogDemo npm init -y ...
- vuepress侧边栏配置_VuePress搭建静态博客网站
VuePress是什么 仅从单词上来看就是vue和press,press除了按压的意思外,还有报刊杂志和出版社等意思,所以可以理解为由vue驱动的出版工具.换个说法就是静态博客编写工具.后六字应该都不 ...
- 使用vuepress搭建静态博客
什么是vuePress vuePress是以vue驱动的主题系统的简约静态网站生成工具(拥有自己的默认主题). veuPress由vue,vue-router,webpack驱动的单页面应用,每个ma ...
- VuePress博客搭建
VuePress博客搭建 本人博客地址,欢迎访问并关注公众号 https://xiaoping027.github.io/ 查看该博客的配置,欢迎star Github config.js 目录 do ...
- VuePress +Gitee 快速搭建个人博客
一.快速搭建博客 1.怎么才能实现快速搭建博客的呢? 其实很简单就是拿来主义.首先你要知道有哪些工具可以搭建博客:然后你可通过搜索引擎搜索官方文档,动动手指就可以本地运行起来.但是运行起来的只是个 d ...
- vuepress搭建个人博客并部署
想要快速搭建自己的个人博客,记录自己的工作学习心得,争取当一条有梦想的咸鱼 相信大家都了解过vue这个框架.而今天,我们的主角vuepress 就是vue的作者尤大大的一个作品.开源于大概2年前,其本 ...
- vuepress博客搭建(一)导航栏与侧边栏
vuepress博客搭建(一)导航栏与侧边栏 文章目录 vuepress博客搭建(一)导航栏与侧边栏 前言 系列文章 一.项目目录 二.导航栏配置 三.侧边栏 样式一:一个导航栏下对应多篇文章 样式二 ...
最新文章
- node.js第一步
- 论文 计算机动态网页的制作,毕业论文 动态网页制作学习网站的设计与实现
- 检测到JSON.NET错误类型的自引用循环
- Vue生命周期钩子函数
- android实体键盘输入法,推荐一个实体键盘专用输入法,是对 autotext的改进
- 冬雷快递单打印软件anyPrint
- wps如何只让他显示3级标题_wps怎么设置标题等级怎么设置多级标题及标题行重复...
- windows10安装双系统后,删除linux,开机进入grub怎么办
- 控制WINDOWS,使电脑说话的小玩意
- 携程景区爬取 + 保存Excel
- 手机端微信发朋友圈功能测试点总结
- 有密码的PDF文件如何编辑?
- 云图说丨华为云区块链引擎服务:高安全的区块链技术服务平台,轻松部署,快速上链
- windows系统安装配置mysql8,并设置远程访问
- 傅里叶变换 ~ 四种可能形式
- ChinaSoft 论坛巡礼 | NASAC 青年软件创新奖论坛
- 微创机器人上市收涨背后:新股热情或回暖,下一个是谁?
- vue零基础——vue2基础知识
- pycharm 出现 Try to run this command from the system terminal. Make sure that you use the correct vers
- C++-------对handle的理解