这篇文章主要讲解了“如何使用vuepress搭建博客并发布到云服务器 ”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用vuepress搭建博客并发布到云服务器 ”吧!
安装node.js
安装node.js,版本要求在>= 8
配置环境变量
安装vuePress
创建文件 Blog
进入文件夹打开终端,输入
npm install -D vuepress
根据以下结构创建,具体配置参考官方
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
设置package.json的脚本配置
VuePress中有两个命令:
1.vuepress dev docs命令运行本地服务,通过访问(http://localhost:8080)即可预览网站
2.vuepress build docs命令用来生成静态文件,默认情况下,放置在docs/.vuepress/dist目录中,当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放目录。
在这里将两个命令封装成脚本的方式,直接使用npm run dev和npm run build即可。
{
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
在docs的md文件就是我们要显示的页面,vuepress会为每个 markdown 文件都使用 markdown-it 编译为 HTML,然后作为 Vue 组件的模板进行处理。这允许你直接在 markdown 文件中使用 Vue。
首页配置
默认主题提供了一个主页布局。
home: true // 是否使用Vuepress默认主题
heroImage: /hero.png // 首页的图片
actionText: Get Started → // 按钮的文字
actionLink: /guide/ // 按钮跳转的目录
features: // 首页三个特性
-title: 简明优先
details: 对以 markdown 为中心的项目结构,做最简化的配置,帮助你专注于创作。
-title: Vue 驱动
details: 享用 Vue + webpack 开发环境,在 markdown 中使用 Vue 组件,并通过 Vue 开发自定义主题。
-title: 性能高效
details: VuePress 将每个页面生成为预渲染的静态 HTML,每个页面加载之后,然后作为单页面应用程序(SPA)运行。
footer: MIT Licensed | Copyright © 2018-present Evan You
--- // 页尾
导航配置
导航配置文件在.vuepress/config.js中
在导航配置文件中nav是控制导航栏链接的,你可以把它改成自己的博客目录。
module.exports={
title: 'hello vuepress',
description: 'Just playing around',
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: 'External', link: 'https://google.com' },
]
}
}
配置完可以部署,执行npm run build 将项目打包,在文件config.js中 base至关重要,要将base设置成根目录。可以将发布在云盘中如百度X盘,github上可直接通过链接访问,也可将其发布在云服务器,由于我有个域名,所以打算就其发布在云主机,这里可以选择亿速云。选择广东的节点,大概每天0.88元,算起来比阿里云便宜点。
服务器上安装Apache或者nginx
这里拿nginx举例,文档
安装(在安装前要安装依赖包gcc zlib zlib-devel pcre-devel openssl openssl-devel)
//创建一个文件夹
cd /usr/local
mkdir nginx
cd nginx
//下载tar包
wget http://nginx.org/download/nginx-1.17.2.tar.gz
tar -xvf nginx-1.17.2.tar.g
将打包好的项目放在/var/www/下(配置前要将域名解析到我们的主机地址)
配置
main # 全局配置
events { # nginx工作模式配置
....
}
http { # http设置
....
server { # 服务器主机配置
listen 80;#监听端口
server_name xxxx.com;#域名
root /var/www/dist;#站点目录
index index.php index.html index.html;
...
location { # 路由配置
....
}
upstream name { # 负载均衡配置
....
}
}
检查nginx.conf文件
cd /usr/local/nginx/sbin
./nginx -t #查看nginx.conf文件是否有语法错误
启动nginx
cd /usr/local/nginx/sbin
./nginx -s reload
感谢各位的阅读,以上就是“如何使用vuepress搭建博客并发布到云服务器 ”的内容了,经过本文的学习后,相信大家对如何使用vuepress搭建博客并发布到云服务器 这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是亿速云,小编将为大家推送更多相关知识点的文章,欢迎关注!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:https://my.oschina.net/u/4582735/blog/4383546