一、为什么选择VuePress
常用的搭建博客网站的工具有很多，比如WordPress、Jekyll、Hexo、Docsify等，每个工具都有自己的优点，大家可以根据自己的喜好选择，但并不推荐大家耗费精力研究每个工具的使用，毕竟搭建博客只是第一步，写博客、分享博客才是搭建个人博客网站的主要目的。本文主要介绍如何使用VuePress搭建个人静态博客。
VuePress是一款Vue驱动的静态网站生成器，界面简洁优雅，对Markdown语法有较好的兼容性并具有很强的扩展性，支持在Markdown中使用Vue组件，也可以使用Vue来开发自定义主题。支持响应式布局，支持PWA……
VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
二、快速上手VuePress
本地环境搭建
Node.js® 是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境，VuePress的使用依赖Node.js>=8.6的版本。下面以Windows系统为例，介绍如何安装Node.js环境，如果你的电脑已安装Node.js，请忽略本小节内容。
1.在Node.js官网下载安装包并双击进行安装。
2.安装完成后，在控制台中查看Node版本，验证是否安装成功。
说明：Npm是随同Node一起安装的包管理工具，主要用于安装第三方依赖到本地使用，当然可以选择其他包管理工具，比如pnpm/yarn等等
VuePress安装和使用
1.创建并进入一个新目录
mkdir vuepress-test && cd vuepress-test2.使用包管理工具初始化
npm init -y3.将VuePress安装为本地依赖
npm install -D vuepress4.创建你的第一篇文档
mkdir docs && echo '# Hello VuePress' > docs/README.md5.在package.json中添加一些scripts
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}6.在本地启动服务器
npm run devVuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。
现在，已经有了一个简单可用的VuePress文档。接下来，进一步讲解VuePress推荐的目录结构和基本配置。
VuePress基本配置
目录结构
VuePress 遵循 “约定优于配置” 的原则，官网推荐的目录结构如下：
-
docs/.vuepress: 用于存放全局的配置、组件、静态资源等。 -
docs/.vuepress/components: 该目录中的 Vue 组件将会被自动注册为全局组件。 -
docs/.vuepress/theme: 用于存放本地主题。 -
docs/.vuepress/styles: 用于存放样式相关的文件。 -
docs/.vuepress/styles/index.styl: 将会被自动应用的全局样式文件，会生成在最终的 CSS 文件结尾，具有比默认样式更高的优先级。 -
docs/.vuepress/styles/palette.styl: 用于重写默认颜色常量，或者设置新的 stylus 颜色常量。 -
docs/.vuepress/public: 静态资源目录。 -
docs/.vuepress/templates: 存储 HTML 模板文件。 -
docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。 -
docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。 -
docs/.vuepress/config.js: 配置文件的入口文件，也可以是YML或toml。 -
docs/.vuepress/enhanceApp.js: 客户端应用的增强。
看到这么多目录，是不是有点慌呢？不要害怕，如果不想折腾，使用VuePress推荐的默认主题，需要用到的目录只有上面加粗的几个。下面结合VuePress默认主题，给大家分享下VuePress的基本配置。
基本配置
1.在/docs/.vuepress文件夹下，新建config.js配置文件，进行必要的配置和主题配置，本文以VuePress提供的默认主题为例，将基本配置一一标注说明，如下：
module.exports = {
title: '移动云', // 网站标题，被用作所有页面标题的前缀，默认主题下，它将显示在导航栏（navbar）上
description: '移动云 更安全 更智慧', // 网站的描述，它将会以 <meta> 标签渲染到当前页面的 HTML 中
dest: 'blog', // 指定 vuepress build 的输出目录。
base: '/test-blog/', // 部署站点的基础路径，如果你想让你的网站部署到一个子路径下，你将需要设置它。
locales: { // 多语言支持，这里仅以中文为例，不再展开叙述
'/': {
lang: 'zh-CN',
title: '移动云',
description: '移动云 更安全 更智慧'
}
},
head: [
// 注入到当前页面的HTML<head>中的标签
['link', { rel: 'icon', href: '/images/favicon.ico' }],
['link', { rel: 'manifest', href: '/mainfest.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, // 是否开启PWA
themeConfig: { // 主题配置，这里使用默认主题，可切换其他主题
logo: '/images/logo.png',
repo: '', // github仓库
editLinks: true, // 是否在页脚显示编辑此页按钮
docsDir: 'blog', // github编辑路径
smoothScroll: true,
locales: { // 多语言支持，目前仅支持中文
'/': {
label: '简体中文',
selectText: '选择语言',
ariaLabel: '选择语言',
editLinkText: '在GitHub上编辑此页',
lastUpdated: '上次更新',
nav: require('./nav/zh'), //顶部导航单独维护
sidebar: require('./sidebar/zh'),// 侧边栏导航
}
},
displayAllHeaders: true, // 显示所有页面的标题链接
sidebar: 'auto', // 侧边栏配置
sidebarDepth: 2, // 侧边栏显示2级
}
}2.配置顶部导航
在基本配置中，侧边导航和顶部导航比较复杂，在上面config.js中，侧边导航和顶部导航放在单独文件中维护，如下图所示：
因此，需要新建对应文件/docs/.vuepress/nav/zh.js和/docs/.vuepress/sidebar/zh.js，其中顶部导航/docs/.vuepress/nav/zh.js配置示例如下：
module.exports = [
{ text: '最佳实践', link: '/practice/' },
{
text: '前端基础',
link: '/accumulate/'
},
{ text: '算法题库', link: '/algorithm/' },
{
text: '了解更多',
ariaLabel: '更多知识',
items: [
{ text: 'more1', link: '/others/more1.md' },
{ text: 'more2', link: '/others/more2.md' },
{ text: 'more3', link: '/others/more3.md' }
]
},
{ text: '移动云官网', link: 'https://ecloud.10086.cn/home/'}
]其中每个导航对应一个对象，对象中text属性用来配置导航的名称。link用来配置导航的路由，可以是本地docs文件路径下面的一个文件或文件夹，也可以是其他链接。例如：link:'/practice/'配置到/docs/practice/文件夹，那么这个路由默认读取该文件夹下的README.md文件。items可以配置路由导航下面的二级、三级子路由。
3.配置侧边栏/docs/.vuepress/sidebar/zh.js，定义顶部导航一级路由对应的侧边导航，示例如下：
module.exports = {
'/practice/':[
'practice1',
'practice2',
'practice3'
],
'/accumulate/':[
{
title: 'HTML',
collapsable: false,
children: [
'html1'
]
},
{
title: 'CSS',
collapsable: false,
children: [
'css1'
]
},
{
title: 'JAVASCRIPT',
collapsable: false,
children: [
'js1'
]
}
],
'/algorithm/': [
{
title: '队列',
collapsable: false,
children: [
'queue1'
]
},
{
title: '栈',
collapsable: false,
children: [
'stack1'
]
}
]
}其中collapsable配置是否折叠展示侧边导航，children配置具体文章路径。
4.根据配置的路由导航创建对应的文件夹，这里需要注意顶部导航、侧边导航配置中路径和文件的对应关系，上面配置对应的文件路径参考如下：
例如：/accumulate/路由导航下将展示/docs/accumulate/README.md中的文章，左侧侧边栏同步展示/docs/.vuepress/sidebar/zh.js中'/accumulate/'下对应的二级和三级路由，以及不同路由对应的具体md文档。展示界面如下所示：
5.首页配置
默认的主题提供了一个首页（Homepage）的布局 (用于 这个网站的主页)。想要使用它，需要在你的根级 README.md 的 YAML front matter 指定 home: true。
---
home: true
heroImage: /images/logo.png
heroText: 移动云
tagline: 更安全，更智慧
actionText: 最佳实践 →
actionLink: /practice/
features:
- title: 云网一体
details: 移动云建设N个集中节点、31个省级属地化节点、X个边缘节点，打造“一朵云”的全域资源布局。专网专用、网随云动，建设“一张网”，全局智能流量调度、调优。移动云建设门户统一入口，提供一站服务、一跳入云、一点受理的“一体化服务能力”。
- title: 贴身服务
details: 中国移动拥有31家省级公司、290+市级公司，实现移动云省、市、县全域覆盖，打造客户身边的云。移动云拥有5万人的客户经理团队，技术人员团队超11.6万人，客户可享受属地化支撑、贴身化服务的便利。
- title: 随心定制
details: 移动云依托属地化资源、丰富的产品及生态打造行业专享、灵活定制的端到端解决方案。属地开辟隔离资源区，实现行业用户资源独享；满足各行业属性需求，定制端到端解决方案；海量行业生态合作伙伴，支撑解决方案快速构建。
- title: 安全可控
details: 移动云坚定不移地加大研发投入，强化核心技术的自主创新，打造完整的产品体系和健康的应用生态，通过了首批可信云认证，牵头制定5项云计算相关的国家标准。通过自主掌控核心技术，移动云提供多类安全服务，提供通信级安全体系保障，打造最值得信赖的云。
footer: MIT Licensed | Copyright © 2021-present songyulong
---6.发布
执行npm run build在/blog目录下生成待部署的静态文件，如果想指定其他vupress build 的输出目录，或者修改部署站点的基础路径，都可以在config.js中配置实现。本文示例配置打包后生成待部署文件如下图红框所示：
三、移动云部署
使用vuepress build命令打包生成博客网站静态资源后，可以通过多种方式部署，具体可参见vuepress官网部署指导。本文主要给大家分享一下通过移动云云主机和移动云对象存储部署自己的博客网站。
使用云主机部署
云主机订购、绑定公网IP、放开安全组规则、访问linux云主机这些操作移动云官网帮助中心都有详细的使用指导，这里不再赘述。下面从登录云主机后介绍如何使用云主机发布个人博客网站。
本文示例使用云主机系统版本为Centos7.2，使用MobaXterm软件访问云主机并执行以下操作：
安装Nginx
1.添加源
默认情况下Centos7中无Nginx的源，需要先添加源：
sudo rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm2.安装Nginx
可以通过yum search nginx看看是否已经添加源成功。如果成功，执行下列命令安装Nginx。
sudo yum install -y nginx3.启动Nginx并设置开机自动运行
sudo systemctl start nginx.service
sudo systemctl enable nginx.service修改Nginx配置文件
1.在shell中输入nginx -t可查看Nginx配置文件目录，然后找对nginx配置文件目录：
2.如上图所示，nginx配置文件通过include /etc/nginx/conf.d/*.conf引入到/etc/nginx/nginx.conf中，因此在/etc/nginx/conf.d/default.conf文件中增加一个路由，用于部署我们的博客网站，default.conf全量配置如下：
server {
# 监听9000端口，需要在云主机安全组中放开该端口限制
listen 9000;
server_name localhost;
#access_log /var/log/nginx/host.access.log main;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
}
# 新增/blog/路由，用于部署博客网站
location /blog/ {
try_files $uri $uri/ /blog/index.html;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}重启Nginx并部署到对应目录
1.执行nginx -s reload重启Nginx
2.将本地打包目录/blog/文件夹中所有文件部署到/usr/share/nginx/html/目录下/blog/对应文件夹中。
3.访问个人博客网站，本示例Nginx配置的端口为9000，配置9000端口，访问路径为http://ip:port/blog/
使用对象存储部署
使用对象存储的静态网站托管功能同样可以满足该博客网站的部署需求。
修改默认打包路径
因为移动云对象存储对桶和文件夹命名规则有一定要求，这里需要修改config.js配置文件中的部署路径base: '/test-blog/'，同时，修改打包文件中不符合要求的文件夹名称，可以在config.js中使用chainWebpack修改，如下：
chainWebpack: (config, isServer) =>{
if (isServer) {
config
.output
.filename('assets/assets_js/[name].[chunkhash:8].js')
config.module
.rule('images')
.test(/\.(png|jpe?g|gif)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.options({
name: `assets/assets_img/[name].[hash:8].[ext]`
})
config.module
.rule('svg')
.test(/\.(svg)(\?.*)?$/)
.use('file-loader')
.loader('file-loader')
.options({
name: `assets/assets_img/[name].[hash:8].[ext]`
})
config
.plugin('extract-css')
.use(CSSExtractPlugin, [{
filename: 'assets/assets_css/styles.[chunkhash:8].css'
}])
}
}开通对象存储服务
（1） 用户进入移动云首页，点击【产品】—【云存储】—【对象存储】，进入对象存储的产品页面，在对象存储简介下点击【移动云开通】，跳转到对象存储开通页面。
（2）勾选“我已阅读并同意《对象存储服务条款》”，点击“立即开通”按钮，页面会提示开通结果。
创建桶
用户通过【控制台】-【云存储】-【对象存储】-【桶管理】，进入桶管理页面，点击【+创建桶】按钮，进入创建桶页面，输入桶名称，选择数据中心及存储类型，完成桶创建。注意，桶权限设置为公共可读。
创建文件夹
用户在对象存储控制台，【桶管理】列表，点击已创建的【桶名称】，进入桶详情页，点击【文件管理】-【创建目录】，根据上文打包后本地目录，完成对应文件夹创建。
上传文件
用户通过【控制台】-【云存储】-【对象存储】-【桶管理】，点击桶名称，进入桶管理界面，点击【文件管理】，进入文件管理窗口。点击【上传】按钮，打开上传文件窗口，选择文件，完成文件上传。注意：上传文件时，文件ACL选择公共可读
依次将本地/blog目录下生成待部署的静态文件按照对应目录上传到对象存储test-blog桶内，如下图：
设置静态网站
（1）登录EOS控制台。
（2）单击桶管理，单击目标存储桶名称。
（3）点击基础设置 > 静态网站，在静态网站页面单击。
（4）开启静态网站托管，按如下说明配置参数。
| 参数 | 说明 |
|---|---|
| 默认首页 | 默认首页是您通过浏览器访问静态网站域名时，EOS返回的网站首页。仅支持html格式的文件，如果为空则不启用默认首页设置。 |
| 默认404页面 | 访问Bucket内文件出现404错误时，EOS返回的错误页面。仅支持html、jpg、png、bmp、webp格式的文件，如果为空则不启用默认404页设置。 |
（5）点击保存，完成配置。
3964
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
