使用vuepress快速搭建个人站点

使用vuepress快速搭建博客教程

安装必要插件node.js

进入Node.js官网下载界面，下载最新TLS版本的安装包。

安装过程中可以自行配置安装路径。

勾选自动安装必要插件的选项，其余界面下一步即可。

安装yarn工具

Windows命令行提示符下，输入

npm install  -g yarn

*提示：这里的npm命令是windows系统自带的。

安装和配置vuepress

下载和解压

到github上寻找vuepress的仓库，从tags里下载一个稳定发行版本（直接clone也是可以的）。

下载成功后解压至硬盘，目录如下。

安装

在vuepress目录下打开命令提示符窗口（管理员身份运行），输入如下命令。

yarn install

等待安装需要的依赖，如果出现连接超时，删除掉目录下的yarn.lock文件。

运行项目

依赖包安装完成以后，执行下行命令，运行项目。

yarn dev

出现报错Error: error:0308010C:digital envelope routines::unsupported，根据这篇博客我们了解到是Node.js版本不匹配的问题。按照博客内的方法可以解决。~~我选择的方法是在运行yarn dev之前，先执行set NODE_OPTIONS=--openssl-legacy-provider。~~我选择的方法是重新安装Node.js，下载的是这个版本。

解决之后可以看到如下界面。

此时打开浏览器访问http://localhost:8080/

至此安装结束。

安装nginx

在linux环境下，到github上下载nginx的一个发行版本，我使用的是nginx-1.24.0。这个安装比较简单，首先解压代码包。

tar -xzvf nginx-1.24.0.tar.gz

进入代码目录，生成makefile文件

./configure

可以通过--prefix指定安装位置，默认安装在/usr/local/nginx。

然后编译安装。

sudo make install

尝试部署网站

上传网站资源文件

先生成整个网站的资源文件，在windows平台的vuepress目录下，执行命令。

yarn build

在该目录下生成一个名为vuepress的文件夹，里面就是网站的资源文件

将这个文件夹打包，上传到linux服务器上。我上传到服务器的路径为~/vuepress

修改nginx配置文件

在未指定安装目录的情况下，nginx默认的安装目录为/usr/local/nginx。其中，nginx的二进制文件在/usr/local/nginx/sbin目录下，因而我们先把二进制所在的目录加入环境变量PATH中，以便启动程序。

将网站的资源文件拷贝到/usr/local/nginx/html下。

sudo cp -r ~/vuepress/*   /usr/local/nginx/html

修改nginx配置文件，配置文件目录为/usr/local/nginx/conf/nginx.conf，在合适的地方加入如下代码。

server{
     listen  8002;
     root    /usr/local/nginx/html;
     location  / {
        index index.html index.htm;
     }

代表让nginx添加一个监听窗口8002，并且网站的根目录为/usr/local/nginx/html，默认访问文件为index.html。

最后启动nginx服务器。

nginx -c /usr/local/nginx/conf/nginx.conf

测试

在windows平台的浏览器输入{服务器ip}:8002，即可访问到网站。

生成一个简单的网站

在vuepress目录下创建一个文件夹，名为Blog，创建文件package.json，写入以下内容

{
  "name": "y",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "vuepress": "^1.8.2"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  },
  "author": "",
  "license": "ISC"
}

这些代码是网站的配置内容，具体什么意思可以先不管。在docs文件夹下创建一个README.md文件，随便写一点内容，我写的是’# Hello VuePress’ 。

上述准备好以后，运行命令。

yarn docs:dev

会运行起简单网站的服务器。

运行生成网站静态文件的命令。

yarn docs:build

这样子会在文件夹下生成这个简单网页的静态文件，方便上传到远程Linux服务器。

目前我们大致知道，vuepress的自由度是非常高的，可以自己写配置文件决定我们的网站长什么样子，进而使用上述命令生成我们的网站，具体如何配置还是需要进一步的学习。

简单网站的服务器。

运行生成网站静态文件的命令。

yarn docs:build

这样子会在文件夹下生成这个简单网页的静态文件，方便上传到远程Linux服务器。

目前我们大致知道，vuepress的自由度是非常高的，可以自己写配置文件决定我们的网站长什么样子，进而使用上述命令生成我们的网站，具体如何配置还是需要进一步的学习。