在CentOS 8上搭建VuePress博客

发表于 更新于 分类于 ， ， ， ， ， 阅读次数： 评论： 本文字数： 5k 阅读时长 ≈ 14 分钟

在CentOS 8上搭建VuePress博客

什么是VuePress

VuePress 是尤雨溪（vue.js 框架作者）4月12日发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。详见 VuePress中文网 VuePress 由两部分组成：第一部分是一个极简静态网站生成器，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

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

开始搭建

安装Node.js

  1. 打开终端，输入
1
2
3
wget https://npm.taobao.org/mirrors/node/latest-v12.x/node-v12.18.3-linux-x64.tar.xz
或
wget https://nodejs.org/dist/v12.18.3/node-v12.18.3-linux-x64.tar.xz

或者前往Node.js官网寻找最新版的.tar.xz文件的链接，下载。

这里如果提示缺失 wget命令，请输入

sudo yum install -y wget

下载wget依赖包

  1. 创建并解压至Node.js安装⽬录
1
2
3
sudo mkdir -p /usr/local/lib/nodejs

sudo tar -xJvf node-v12.18.3-linux-x64.tar.xz -C /usr/local/lib/nodejs
  1. 验证node.js是否解压成功
1
2
3
cd /usr/local/lib/nodejs/node-v12.18.3-linux-x64/bin

./node -v

如果显示了版本号，即安装成功。

注意：由于版本更新和下载的问题，未来最新版的肯定跟我这个版本号不相同，所以不要盲目复制粘贴以上的命令，注意命令中的node版本号是否不同。

配置环境变量

  1. 修改环境变量，使得能在任意⽬录下执⾏node命令

    1
    vim ~/.bash_profile

    找到 PATH=$PATH:$HOME/bin，再按I键进行编辑，在PATH=$PATH:$HOME/bin 后⾯添加路径 :/usr/local/lib/node-v12.18.3-linux-x64/bin，结果为： PATH=\$PATH:\$HOME/bin:/usr/local/lib/nodejs/node-v12.18.3-linux-x64/bin

    按esc键退出编辑模式，再输入:wq进行保存修改，然后输入命令重载一下：source ~/.bash_profile

  2. 到其他⽬录下验证

    1
    2
    3
    4
    cd /home
    node -v
    npm version
    npx -v

    如果有相应的显示，即Node.js安装完毕。

切换npm源

一、通过命令配置

  1. 命令

    1
    npm config set registry https://registry.npm.taobao.org

  2. 验证命令

    1
    npm config get registry

    如果返回https://registry.npm.taobao.org，说明镜像配置成功。

二、通过npm安装

  1. 安装 cnpm

    1
    npm install -g cnpm --registry=https://registry.npm.taobao.org

  2. 验证 cnpm

    cnpm -v

  3. 使用 cnpm

    之后使用cnpm命令替换npm命令。

    cnpm install xxx 代替 npm install xxx

安装VuePress

  1. 全局安装
1
2
3
npm install -g vuepress
或
cnpm install -g vuepress
  1. 创建项目文件夹
1
2
mkdir vuepress_blogs
cd vuepress_blogs
  1. 项目初始化
1
npm init -y
  1. 配置项目 VuePress中有两个命令：

vuepress dev docs命令运行本地服务，通过访问http://localhost:8080即可预览网站；

vuepress build docs命令用来生成静态文件。

默认情况下，放置在docs/.vuepress/dist目录中，当然你也可以在docs/.vuepress/config.js中的dest字段来修改默认存放目录。在这里将两个命令封装成脚本的方式，直接使用npm run docs:dev和npm run docs:build即可。 

1
2
3
4
5
6
7
vim package.json
修改scripts中的内容如下：

 "scripts": {
   "docs:dev": "vuepress dev docs",
   "docs:build": "vuepress build docs"
 },
按esc键退出编辑模式，再输入:wq进行保存修改 
1
2
3
4
5
6
7
mkdir docs
cd docs
echo '# Hello VuePress - first blog!' >README.md
mkdir .vuepress
cd .vuepress
mkdir public
vim config.js

在 config.js 文件中配置网站标题、描述、主题等信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
module.exports = {
  title: 'my blog',
  description: '我的个人网站',
  head: [ 
    ['link', { rel: 'icon', href: '/logo.jpg' }], 
    ['link', { rel: 'manifest', href: '/manifest.json' }],// 增加一个自定义的 favicon(网页标签的图标)
  ],
  base: '/', // 这是部署到github相关的配置
  markdown: {
    lineNumbers: ture // 代码块显示行号
  },
  themeConfig: {
    nav:[ 
       { text: '主页', link: '/' },
            { text: '博文',
              items: [
                { text: 'Android', link: '/android/' },
                { text: 'ios', link: '/ios/' },
                { text: 'Web', link: '/web/' },
              ], 
            },
            { text: '关于', link: '/about/' },
            { text: 'Github', link: 'https://github.com/yunying61' },
        ],
    sidebar: 'auto', // 侧边栏配置
    sidebarDepth: 2, // 侧边栏显示2级
    lastUpdated: 'Last Updated',
  },
};
  • title：网站标题
  • description：网站描述
  • head：额外的需要被注入到当前页面的HTML”head”中的标签，其中路径的”/”就是public资源目录。
  • nav：导航栏配置，此配置主要用于配置导航栏的链接，例如以上主页的link为”/”，默认是根目录下的README.md。”/android/”链接到根目录docs下的android文件夹下的README.md文件。
  • sidebar：侧边栏配置，你可以省略.md拓展名，同时以/结尾的路径将会被视为 */README.md。
  • sidebarDepth：嵌套的标题链接深度，默认的深度为1。
  • lastUpdated：最后更新时间。

到此，项目的结构差不多就出来了。

1
2
3
4
5
6
7
vuepress_blogs
├─── docs
│    ├── README.md
│    └── .vuepress
│           ├── public
│           └── config.js
└── package.json

docs ：以后要在这⾥⾯写⽂章，直接在此⽂件夹下新建⽂件夹，然后再建 md⽂档就⾏，链接会⾃动⽣成。

README.md ：这个 md文件 是以后的首页

.vuepress ：这个⾥⾯会存放⼀些配置和组件

public ： 静态⽂件存放地

config.js ：配置⽂件，以后的所有配置基本都在这⾥写

package.json ：运行脚本

  1. 运行vuepress博客
1
2
3
4
cd ..
这个命令输入两次，回到vuepress_blogs⽬录，执⾏命令
vuepress build docs
vuepress dev docs

vuepress build docs 命 令 ⽤ 来 ⽣ 成 静 态 ⽂ 件 ， 默 认 情 况 下 ， 放 置 在 docs/.vuepress/dist⽬录中，当然你也可以在docs/.vuepress/config.js中的dest字段 来修改默认存放⽬录。 vuepress dev docs 命令运⾏本地服务，通过访问(http://localhost:8080)即可预览⽹站。

在这⾥已经将两个命令封装成了脚本的⽅式，可以直接使⽤npm run docs:dev和npm run docs:build即可运行上述命令。

部署、推送到网站上

由于构建的时候生成静态页面，所以将dist文件夹中的内容可以部署在gitHub的pages或者coding的pages都可以。这里使用脚本的方式自动部署到github上。

安装Git

1
2
3
yum -y install git
查看Git是否安装完成
git --version

顺便说一下，yum安装git被安装在/usr/libexec/git-core目录下

创建一个deploy.sh

在 vuepress_blogs 下创建 deploy.sh 。

1
touch deploy.sh

编写脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

再次编辑package.json

1
2
3
4
5
{
    "scripts": {
        "deploy": "bash deploy.sh"
      },
}

运行 npm run deploy 即可自动构建部署到github上。

编者的话

目前对于刚上手的我来说，VuePress还是比较简单的，只不过在Linux上安装会使用很多命令而已。对比起hexo，vuepress的配置过于繁杂，不过能看出vuepress还是拥有极高的自我定制性。