ECS进阶训练营Day1 - VuePressBlog

之前我的技术博客使用 Hexo 搭建，整体还可以，但是总觉得差了点什么。现在借着阿里的训练营又认识到一种博客框架——VuePress。正好，最近正在开发 Vue 的项目，很喜欢 Vue 这个框架，准备把我的技术博客替换成 VuePress 的

Vuepress 介绍

VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。

步骤

1. 检查 Node.js 是否安装

   由于 VuePress 需要 Node.js 环境，因此首先要先检查服务器是否已经配置好了 Node.js

   node -v
   

   若有版本号输出即为配置完成。

   VuePress 需要 Node.js >= 8.6

2. 创建/进入网站根文件夹，进行初始化

   yarn init # npm init
   

   yarn是青出于蓝而胜于蓝的包管理工具，之前早闻盛名，这里就尝试用它了

   先进行yarn的安装：

   curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
   sudo yum install yarn
   

   检查是否安装成功：

   yarn --version
   

3. 安装 VuePress 为本地依赖

   yarn add -D vuepress # npm install -D vuepress
   

4. 创建docs目录并创建一篇测试文章

   mkdir docs && echo '# Hello VuePress' > docs/README.md
   

5. （可选）在package.json中添加如下脚本

     "scripts": {
       "docs:dev": "vuepress dev docs",
       "docs:build": "vuepress build docs"
     }
   

   这里的意思应该是用docs:dev来指代vuepress dev docs命令

6. 由于 vuepress 默认启动在 8080 端口，而我的服务器 8080 端口已被占用，因此在启动前我需要调整启动端口

   1. 在docs文件夹中创建.vuepress文件夹，再在.vuepress文件夹内创建config.js文件，这个文件将是 vuepress 的配置文件。

   2. 按 vue 框架的思路，这个配置文件应该导出一个 JS 对象，先在里面写入

      module.exports = {
        title: "ShadowFish's Vuepress",
        description: "这里有我的技术博客",
      };
      

   3. 然后设置 dev 端口为 8081

      port: 8081;
      

7. 启动！

   yarn docs:dev # npm run docs:dev
   

8. 部署，让外网通过域名访问

   1. 生成静态文件

      yarn docs:build
      

   2. 将相应域名的根目录设置为(vuepress更目录)/docs/.vuepress/dist

9. 完成！

效果