大家好!今天给大家带来的是由著名框架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
),安装好后把命令行版本设为你安装的版本:
安装好,可以在SSH输入以下命令检查:
如果出现Unknown global config "--init.module"
,就需要在“环境变量”中修改:
安装VuePress
回到SSH,我们在根目录(/
)创建一个目录(例如docs
):
mkdir /docs
cd /docs
初始化VuePress:
npm init vuepress vuepress-starter
出现Ok to proceed (y)
,直接回车就行。
输入你自己的应用,这里我命名为
example-docs
输入你自己的描述,这里我输入
Example Docs
然后等待安装所需模块:
最后,输入:
cd docs
npm audit fix
即可。
生成Dist文件夹
我们需要将MarkDown格式的文件转换为静态的.html
文件。我们需要执行:
npm run docs:build
开启网站
执行命令后,我们输入以下内容:
cd docs/.vuepress/dist
pwd
记下pwd的内容。
我们回到宝塔面板,找到网站 → HTML项目 → 添加项目:
如果没有域名,也可以在雨云注册一个,详细步骤就不再多讲了;
这里的“根目录”就是刚才pwd
的结果。
点击确定,此时你的网站就搭建好了。不过宝塔会在根目录下创建一个.user.ini
文件,会妨碍后续npm run docs:build
的工作。我们可以这样,先确保你现在在dist目录下,然后执行:
chattr -i .user.ini
rm -rf .user.ini
好,此时你打开你的网站域名,就可以看到你的网站!接下去,你就可以通过SSH编写你的Markdown文件了(在/docs/docs
目录下)!
—本期教程结束—