[暑假特供] [好玩的云计算1] 用最简单的配置,搭建最漂亮的文档站!VuePress使用教程

大家好!今天给大家带来的是由著名框架Node.JS构建的极简文档站:VuePress使用教程!

为什么是VuePress?

相信在选择时一定看到了很多的文档系统吧。下面就来比较一下(参考VuePress官网的为什么不是):

VitePress

VuePress称VuePress和VitePress是孪生兄弟的关系。一点不假,两个都基于Node.JS开发,不过,根据官网所述:

VitePress 是 VuePress 的孪生兄弟,它同样由 Vue.js 团队创建和维护。 VitePress 甚至比 VuePress 要更轻更快,但它在灵活性和可配置性上作出了一些让步,比如它不支持插件系统。当然,如果你没有进阶的定制化需求, VitePress 已经足够支持你将你的内容部署到线上。

VuePress支持更加灵活的配置,可以加入由社区维护的插件系统。

Docsify

Docsify和其他文档不同的是,仅通过一个index.html,就能够支持整个站点。同样支持插件,基于Vue,但对SEO不怎么友好,因为其链接看起来是这样的:

  • https://example.com/
  • https://example.com/#/
  • https://example.com/#/getting-start

GitBook

这也是一个较好的选择,但它的重载时间很长,尤其是文档页面比较多的时候。

开始搭建

VuePress完全可以搭建在Github Pages,Cloudflare Pages这些托管平台上。不过,想要对国内用户友好,有一台服务器是一个更加明智的选择。

这里,我推荐稳定运行了6年的云服务提供商:雨云。通过此链接注册,还可以获得首月5折的优惠券!

推荐配置为:

  • 地域:香港4区
  • CPU:Xeon Gold 2核
  • 内存:4GB
  • 系统:Rocky Linux 9

连接SSH

直接通过VNC的方式与服务器建立连接并不明智。你可以下载著名的SSH连接工具XTerminal,并通过以下信息(可以在雨云服务器控制台找到)进行连接:

安装宝塔面板

有一个好的服务器管理面板是很重要的,这里我推荐使用宝塔Linux面板。11版本的新UI也更加简洁。

在控制台执行以下命令:

if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_latest.sh;else wget -O install_latest.sh https://download.bt.cn/install/install_latest.sh;fi;bash install_latest.sh ed8484bec

按照安装完成的信息登录面板,进来先绑定账号并配置一下环境(按我这样选择并点击LNMP下方的安装):

安装NodeJS环境

安装好后,我们点击左边的网站,找到Node项目,这里有一个Node版本管理器(没有就安装),点击:

默认是没有同步最新的,我们可以点击右上角的更新版本列表,就可以获得最新的版本了:

我们安装最新的(这里为v24.4.1),安装好后把命令行版本设为你安装的版本:

image

安装好,可以在SSH输入以下命令检查:

如果出现Unknown global config "--init.module",就需要在“环境变量”中修改:

安装VuePress

回到SSH,我们在根目录(/)创建一个目录(例如docs):

mkdir /docs
cd /docs

初始化VuePress:

npm init vuepress vuepress-starter

出现Ok to proceed (y),直接回车就行。

image

image

image

image

image

输入你自己的应用,这里我命名为example-docs

image

输入你自己的描述,这里我输入Example Docs

image

image

image

然后等待安装所需模块:

image

最后,输入:

cd docs
npm audit fix

即可。

生成Dist文件夹

我们需要将MarkDown格式的文件转换为静态的.html文件。我们需要执行:

npm run docs:build

开启网站

执行命令后,我们输入以下内容:

cd docs/.vuepress/dist
pwd

image

记下pwd的内容。

我们回到宝塔面板,找到网站HTML项目添加项目

如果没有域名,也可以在雨云注册一个,详细步骤就不再多讲了;

这里的“根目录”就是刚才pwd的结果。

点击确定,此时你的网站就搭建好了。不过宝塔会在根目录下创建一个.user.ini文件,会妨碍后续npm run docs:build的工作。我们可以这样,先确保你现在在dist目录下,然后执行:

chattr -i .user.ini
rm -rf .user.ini

image

好,此时你打开你的网站域名,就可以看到你的网站!接下去,你就可以通过SSH编写你的Markdown文件了(在/docs/docs目录下)!

—本期教程结束—

还可以

不错,可以夸