重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章主要讲解了“如何使用vuepress搭建博客并发布到云服务器 ”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用vuepress搭建博客并发布到云服务器 ”吧!
创新互联主营达拉特网站建设的网络公司,主营网站建设方案,app开发定制,达拉特h5成都微信小程序搭建,达拉特网站营销推广欢迎达拉特等地区企业咨询
安装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搭建博客并发布到云服务器 这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!