vuepress项目部署到自己的服务器,VuePress + Nginx + Git 实现自动部署

最新推荐文章于 2025-05-12 13:32:34 发布

weixin_39875503

最新推荐文章于 2025-05-12 13:32:34 发布

阅读量3.6k

点赞数 1

文章标签： vuepress项目部署到自己的服务器

vuepress是一个静态网站生产器，是一个开箱即用的开源项目文档web页面生成工具，vue的在线web文档就是用vuepress制作的。

本文主要介绍如何配置vuepress以及利用nginx部署vuepress，分成项目生成和项目的部署两个部分来说明如何进行博客的搭建。

一、项目生成：VuePress

在官方文档中，已经有较为详细的介绍，如何生成一个默认主题的VuePress项目。总体来说，可以使用如下步骤：

1.1 项目初始化

新建一个文件夹，进入文件夹后执行命令：npm init，执行后，系统会提示输入一系列信息，诸如作者、git仓库、项目描述等信息，根据个人信息填写后，会在项目中生成一个package.json的文件。

之后，下载VuePress，可以使用全局配置下载：npm install -g vuepress,这里要注意的是，下载到全局配置中，一定要在环境变量里加入对应的全局仓库的路径，否则在使用的时候，会找不到vuepress相关的文件。

1.2 项目代码

之后，新建文件夹docs，并且在docs文件夹中添加README.md文件，此文件是用于编辑首页内容的。

我们不妨就使用如下的片段:

---

home: true

heroText: Hero 标题

tagline: Hero 副标题

actionText: 快速上手 →

actionLink: /zh/guide/

features:

- title: 简洁至上

details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。

- title: Vue驱动

details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。

- title: 高性能

details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。

---

16---

home:true

heroText:Hero标题

tagline:Hero副标题

actionText:快速上手→

actionLink:/zh/guide/

features:

-title:简洁至上

details:以Markdown为中心的项目结构，以最少的配置帮助你专注于写作。

-title:Vue驱动

details:享受Vue+webpack的开发体验，在Markdown中使用Vue组件，同时可以使用Vue来开发自定义主题。

-title:高性能

details:VuePress为每个页面预渲染生成静态的HTML，同时在页面被加载的时候，将作为SPA运行。

---

之后，在生成的package.json文件里，修改对应的scripts为:

"scripts": {

"dev": "vuepress dev docs",

"build": "vuepress build docs"

}

4"scripts":{

"dev":"vuepress dev docs",

"build":"vuepress build docs"

}

在完成上述配置以后，我们就可以执行命令npm run dev来运行项目，此时访问本地端口8080就可以看到自己的项目如图：

最终的目录树如下:

│ package.json

│

└─docs

README.md

4│package.json

│

└─docs

README.md

PS:在windows里生成目录树的方法：在对应的文件夹中执行 tree /f > xxx.txt即可，其中xxx.txt为所需生成的文本文件。

1.3 项目打包

项目打包只需要执行npm run build即可在docs/.vuepress文件夹下看到dist文件夹，这就是生成的静态网页项目。

当然，如果要修改各种配置的话，可以在.vuepress文件夹下添加config.js来实现配置，详细信息可以参考官方教程

1.4 主题更换

当然，默认的主题可能不符合大家的需求，在社区中有很多开源的主题可以供大家选择，比如我正在使用的

二、项目部署

对于项目的部署，我先介绍如何使用Nginx来实现网站的部署，之后，再使用git来实现自动部署。

当然，项目部署在服务器的话，首先肯定要有个服务器了hhhh

有了服务器，我们就可以开始部署啦。

2.1 Nginx的安装与配置

Nginx的安装和启动可以用一下命令完成，完成后访问服务器的ip地址，如果可以看到nginx界面，就说明成功启动了。

apt-get install nginx

service nginx start

2apt-getinstallnginx

servicenginxstart

Nginx成功启动后，我们对其配置文件进行修改，配置文件一般是/etc/nginx/nginx.conf，为了方便我们以后可能有多个项目需要导入，可以分一层级，即在http中加入include /etc/nginx/conf.d/*.conf;的配置，如此，我们可以在/conf.d文件夹中进行多个项目的配置。

比如，我们进入conf.d文件夹后，新建vuetest.conf文件，在其中进行我们项目的部署:

server {

listen 80;

root /home/project/blog;

index index.html index.htm index.nginx-debian.html;

server_name 121.36.248.3;

location / {

try_files $uri $uri/ =404;

}

9server{

listen80;

root/home/project/blog;

indexindex.htmlindex.htmindex.nginx-debian.html;

server_name121.36.248.3;

location/{

try_files$uri$uri/=404;

}

其中server_name改为自己主机的ip,root为在服务器中，项目根目录存放的地址,listen自己设计的端口号即可。

配置好以后，执行nginx -s reload即可重新加载配置文件。

然后，我们把我们的博客放到root对应的文件夹里就完成了项目的部署了。

但这样部署有这样的问题，就是我们需要自己在本地build好文件，然后放到服务器的对应文件夹里。而就我现在使用的MobaXterm是不支持文件夹的传送的，也就是我们必须压缩项目，然后放到服务器，然后解压，这也太麻烦了吧！我想有一键部署的便捷功能，那么可以利用git来实现。

1.2 自动部署

首先我们搭建一个服务器端的git仓库，我们可以创建一个用户名为git，其专门用来管理项目的传送和部署。

服务器配置:

sudo adduser git

su git

mkdir .ssh && chmod 700 .ssh

touch .ssh/authorized_keys && chmod 600 .ssh/authorized_keys

5sudoaddusergit

sugit

mkdir.ssh&&chmod700.ssh

touch.ssh/authorized_keys&&chmod600.ssh/authorized_keys

配置好以后，我们就相当于使用git用户来进行操作了。

在~/.ssh/authorized_keys里，我们放入本地的公钥。

获取公钥的方法可以是：

1、打开git bash

2、执行生成公钥和私钥的命令: ssh-keygen -t rsa

3、在用户目录下的.ssh文件夹中，会有公钥和私钥，将公钥复制到服务器的authorized_keys文件中。

这样做的目的就是，以后由本地向服务器提交资源，就不需要再进行身份验证了。

创建仓库

找一个地方创建git仓库，比如在/home/git下创建project.git文件夹，作为git仓库:

mkdir project.git

cd project.git

git init --bare

3mkdirproject.git

cdproject.git

gitinit--bare

配置hooks

进入创建的git仓库，然后修改post-update.sample文件，并将其改名为post-update，将其修改为如下脚本：

#!/bin/sh

# An example hook script to prepare a packed repository for use over

# dumb transports.

# To enable this hook, rename this file to "post-update".

#exec git update-server-info

echo "Im update"

GIT_REPO=/home/git/project.git

TMP_GIT_CLONE=/home/tmp/blog

PUBLIC_WWW=/home/project/blog

rm -rf ${TMP_GIT_CLONE}

git clone $GIT_REPO $TMP_GIT_CLONE

rm -rf ${PUBLIC_WWW}

cp -rf ${TMP_GIT_CLONE} ${PUBLIC_WWW}

17#!/bin/sh

# An example hook script to prepare a packed repository for use over

# dumb transports.

# To enable this hook, rename this file to "post-update".

#exec git update-server-info

echo"Im update"

GIT_REPO=/home/git/project.git

TMP_GIT_CLONE=/home/tmp/blog

PUBLIC_WWW=/home/project/blog

rm-rf${TMP_GIT_CLONE}

gitclone$GIT_REPO$TMP_GIT_CLONE

rm-rf${PUBLIC_WWW}

cp-rf${TMP_GIT_CLONE}${PUBLIC_WWW}

其中，GIT_REPO就是我们这个git仓库的地址，TMP_GIT_CLONE就是临时存放上传的资源的路径，PUBLIC_WWW是我们最后项目放的地方,对于这个博客来说，这个PUBLIC_WWW就是之前Nginx配置的root。

这个脚本的含义就是，当我们在本地进行提交的时候，服务器接受后，会将其复制到临时存放目录，然后转移到项目路径下，从而使得我们只需要在本地把我们的生成的项目push到远程服务器，服务器就可以自动帮我们部署到对应的文件夹啦。

遇到的坑

在本地上传的时候，每次都提示权限不足，最后发现是因为我们用到的诸如/home/git/project.git之类的文件，都是在root用户时候创建的，所以其所有者为root，而git用户没有权限进行复制等操作，因此我们可以使用如下命令

sudo chown git:git -R xxx //xxx为对应的文件

1sudochowngit:git-Rxxx//xxx为对应的文件

使用后，将文件的所有权换成git,再次执行操作即可。

要判断该文件的所有权，可以使用命令：

ll xxx //xxx为对应的文件

1llxxx//xxx为对应的文件

来查看文件/文件夹的所有权。

本地上传脚本

在本地要进行项目的打包、上传操作，这些都可以写在一个脚本里执行：

#!/usr/bin/env sh

set -e

npm run build

cd public

git init

git add -A

git commit -m "deploy"

git push -f git@{ip}:~/project.git master

cd -

11#!/usr/bin/env sh

set-e

npmrunbuild

cdpublic

gitinit

gitadd-A

gitcommit-m"deploy"

gitpush-fgit@{ip}:~/project.gitmaster

cd-

脚本放在根目录下即可。

最后的目录结构为

│ deploy.sh

│ package-lock.json

│ package.json

│ README.md

│

├─docs

│ README.md

│

├─.vuepress

│ config.js

11│deploy.sh

│package-lock.json

│package.json

│README.md

│

├─docs

│README.md

│

├─.vuepress

│config.js

这样，我们就实现了博客的自动部署到服务器的功能。

参考：https://www.cnblogs.com/xiaoxineryi/p/13175182.html