大道至简：快速搭建博客与文档站点的终极指南2.0

本文最后更新于：2 个月前

每一次告别都是为了更好的重逢，让我们学会珍惜，也学会放手。

破冰

对 Gitee 进行简介，介绍其作为开源托管平台的优势和受欢迎程度

提出使用 Gitee 来托管静态网站的需求和好处

2024 年 7 月 15 日

🥣 推荐阅读：

安装指南 | Halo 文档

yadong.zhang/OneBlog - 码云 - 开源中国 (gitee.com)

思维碰撞

云服务器部署 Hexo 博客

尝试，经验

以下是我从五月初到六月初这一个月以来，尝试云服务器部署 Hexo 博客的实操经历，仅供参考。

如果需要学习详细的博客部署全流程，可以跳过这部分内容，直接看最全最细的部署流程

2024 年 5 月 7 日

上上周六下午突然发现 Gitee Pages 失效了，等了快半个月官方仍没有发任何公告或通知。今天看到消息，估计官方计划关闭个人账户下的 Gitee Pages 服务，只保留企业版的。

我是不能坐以待毙了，赶紧学一学如何部署 Hexo 博客网站到云服务器上，正好去年十一月份买的阿里云服务器闲置着没地方用呢。

Hexo 博客搭建并发布到云服务器 - 我如云影君如梦 - 博客园 (cnblogs.com)

在云服务器上搭建 hexo 博客（亲测可用） - 菲尼克斯交警 - 博客园 (cnblogs.com)

Hexo 部署到云服务器 - 简书 (jianshu.com)

image-20240507175017346

Nginx 启动报错，卸载重新安装还是一样。

Linux 上启动 Nginx 失败：Job for nginx.service failed because the control process exited with error code-CSDN 博客

image-20240507180743235

Linux 启动 nginx 失败_linux nginx 无法启动-CSDN 博客

1
nginx -t	# 查看Nginx 配置文件

image-20240507181321362

1
kill pid	# 杀死一个进程

image-20240507181910116

重启 nginx 报错：Job for nginx.service failed because the control process exited with error code. - 知乎 (zhihu.com)

奇了怪了，端口未被占用，配置文件也无误，为什么还是启动不了呢，我越发觉得有意思起来了。

诶？

突然显示服务器连接失败，我又重新远程登录进来：依次执行五步操作：

1
systemctl status nginx	# 查看 nginx 状态
1
ps -ef | grep nginx	# 查看nginx相关进程
1
kill 400147	# 杀死进程
1
nginx -t	# 配置文件检验
1
systemctl start nginx	# 启动nginx

执行完这五步，在此查看 Nginx 状态，发现竟然启动成功了。

image-20240507182535296

有点奇怪，难道是这个服务器太久没用了，需要时间磨合嘛。不管怎么说，Nginx 起来了，今天晚上回去研究下怎么用云服务器部署个人博客网站。

2024 年 6 月 1 日

【一篇学会】Nginx 静态资源部署保姆级教程_nginx 部署静态资源-CSDN 博客

Nginx 静态资源服务的配置-腾讯云开发者社区-腾讯云 (tencent.com)

1
2
MIME 类型
MIME（多用途互联网邮件扩展类型）是一种标准化的方式，用于表示文档、文件或字节流的性质和格式。它在IETF RFC 6838中进行了定义和标准化，由互联网号码分配机构（IANA）负责跟踪所有官方MIME类型。MIME类型由两部分组成：类型（type）和子类型（subtype），它们之间用斜杠（/）分隔，不允许空格存在。MIME类型对大小写不敏感，但传统写法都是小写

Nginx 配置文件详解-CSDN 博客

8 分钟用 Nginx 搭建一个自己的网站_哔哩哔哩_bilibili

Linux 使用 nginx 部署静态网页 - WindSnowLi - 博客园 (cnblogs.com)

手把手教你搭建静态/博客网站 | 起凡 Code 闲聊 (jarcheng.top)

跟着网上的教程搞了一下午，就是部署不了静态页面，甚至连访问 Nginx 本身都好像有问题，搞不明白，实在是搞不明白。

不管怎么说，今晚我就死磕这个 Nginx 了，多少个晚上都像现在这样把它放过，所以到现在都没有学习完成过 Nginx。

2024 年 6 月 2 日

[root@iZ2ze4yceifsrmdejokfymZ ~]# nginx
nginx: [emerg] bind() to 0.0.0.0:7010 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:888 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7071 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7001 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7020 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7010 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:888 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7071 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7001 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7020 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7010 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:888 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7071 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7001 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7020 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7010 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:888 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7071 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7001 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7020 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7010 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:888 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7071 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7001 failed (98: Unknown error)
nginx: [emerg] bind() to 0.0.0.0:7020 failed (98: Unknown error)
nginx: [emerg] still could not bind()

image-20240602182928144

[Nginx 重启时提示”nginx: emerg] bind() to 0.0.0.0”解决方法 - 八艾云 (8a.hk)

image-20240602185109255

极简 Nginx 学习 + 使用，点到为止 - 编程导航文章 (code-nav.cn)

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
要查看当前用户是否是管理员（在Unix和Linux系统中通常指的是root用户，或在Windows系统中指的是具有管理员权限的用户），你可以使用不同的方法，具体取决于你使用的操作系统。

在Unix/Linux系统中：

查看当前用户名：
在终端中输入 whoami 命令。如果输出是 root，那么你就是管理员。
查看用户ID：
输入 id 命令。如果UID（用户ID）是0，那么你就是root用户。
查看/etc/passwd文件（需要root权限）：
你可以查看/etc/passwd文件，但通常需要root权限来查看完整的文件内容。使用cat /etc/passwd命令，并查找以root:开头的行。
在Windows系统中：

打开命令提示符：
按下Win + R，输入cmd，然后按下Enter键。
检查用户账户控制（UAC）提示：
当你尝试执行需要管理员权限的任务时，Windows通常会显示一个UAC提示。如果你没有看到这些提示，那么你可能不是以管理员身份登录的。
检查用户账户：
在“控制面板”中，你可以查看用户账户并检查你的账户是否有管理员权限。
使用net user命令（在命令提示符中）：
输入net user命令并查看输出。找到你的用户名，并检查它是否列出了管理员组（例如，“Administrators”组）。
运行whoami /groups（在命令提示符中）：
这个命令将列出你当前用户所属的所有组。如果你看到“S-1-5-32-544”（管理员组的SID），那么你就是管理员。
使用PowerShell：
在PowerShell中，你可以使用[System.Security.Principal.WindowsIdentity]::GetCurrent().Groups命令来查看当前用户所属的组。然后，你可以检查输出中是否包含管理员组。
请注意，成为管理员用户（特别是在Unix/Linux中的root用户）具有极大的权限，可以执行系统范围内的更改。因此，请务必谨慎行事，并在需要时始终考虑使用具有较低权限的用户账户。

netstat -tulnp | grep 7010

我已经尝试了所有方法，查看冲突端口号、关闭防火墙，修改执行用户，更改文件目录权限，根本部署不了静态页面

3 分钟搞懂阿里云服务器安装 Nginx 并配置静态访问页面_阿里云服务器如何安装 nginx-CSDN 博客

image-20240602213424584

[nginx: error] invalid PID number “” in “/usr/local/webserver/nginx/logs/nginx.pid”-CSDN 博客

1
nginx -c /www/server/nginx/conf/nginx.conf

搞不定，一夜回到解放前。

Nginx 部署与静态 html_nginx 部署 html-CSDN 博客

【Linux 报错】登陆 mysql 用户报错 This account is currently not available._mysql:x:1001:-CSDN 博客

2024 年 6 月 3 日

Linux 实现 Nginx 的安装与部署并实现 html 静态资源访问_linux nginx html-CSDN 博客

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/7/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

[nginx-mainline]
name=nginx mainline repo
baseurl=http://nginx.org/packages/mainline/centos/7/$basearch/
gpgcheck=1
enabled=0
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true
1
2
sudo yum clean all
sudo yum makecache

image-20240603080013103

1
grep -r exclude /etc/yum.conf /etc/yum.repos.d/

image-20240603075634506

1
sudo yum install nginx

image-20240603080124927

1
2
systemctl start nginx  #启动nginx服务器
ps -aux | grep nginx  #查看nginx进程
1
2
systemctl restart nginx
systemctl status nginx

image-20240603080537255

1
2
3
4
find / -name nginx.conf

cd ..
find -name nginx.conf

image-20240603081030466

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
server {
    listen       80;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;

    autoindex on;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}

nginx 服务器搭建好但是浏览器却无法访问原因排查_nginx 配置好了 网站还是访问不了-CSDN 博客

image-20240603084009334

这几天里报错最恶心的还是这条：

1
nginx: [emerg] bind() to 0.0.0.0:7010 failed (98: Unknown error)

最后是在宝塔面板卸载重装以后才解决的，现在也不知道什么原因。

还是很有收获的，学到了许多其他新知识。

2024 年 6 月 4 日

linux 怎么快速卸载并安装 node 环境 - Jun_ct - 博客园 (cnblogs.com)

yum、apt-get、wget 的区别_yum wget-CSDN 博客

wget、yum、rpm、apt-get 区别「建议收藏」-腾讯云开发者社区-腾讯云 (tencent.com)

Linux curl 命令最全详解-CSDN 博客

云服务器部署静态博客站点，搞了一上午，代码推送不上去，Nginx 也起不来了。

运维排查篇 | 访问 nginx 出现 403 错误 - 知乎 (zhihu.com)

image-20240604110147986

image-20240604110649330

过了一个小时再尝试，静态代码文件就能推送上去了。杀死已经启动的 Nginx 进程，也能成功启动 Nginx 了。

部署成功：Memory’s blog

一条龙服务

2024 年 6 月 4 日

  1. 本地环境准备（安装 Node、Git 和 Hexo）：使用 Hexo 搭建个人博客并部署到云服务器 - Cheyaoyao - 博客园 (cnblogs.com)
  2. 服务端环境准备（购买云服务器、Nginx 环境配置、Node 环境配置、Git 环境配置）：
  3. 部署（部署 Hexo 博客到服务端 Git 仓库）：使用 Hexo 搭建个人博客并部署到云服务器 - Cheyaoyao - 博客园 (cnblogs.com)

Node 环境的安装直接放在这里，没有找到合适的博客：

linux 安装 nodejs yum

在 Linux 系统中，您可以使用 Yum 包管理器来安装 Node.js。以下是一个基本的步骤和示例代码，用于通过 Yum 安装 Node.js：

  1. 首先，您需要确保您的系统中已经安装了 Node.js 的官方 Yum 仓库。如果尚未安装，您可以通过运行以下命令来添加 Node.js 的仓库：
1
curl -sL https://rpm.nodesource.com/setup_14.x | sudo bash -

image-20240604085311073

这个命令会将 Node.js 14.x 的仓库添加到您的系统中。如果您想安装其他版本的 Node.js，只需将setup_14.x中的数字更改为所需的 Node.js 版本即可。

  1. 接下来，您可以使用 Yum 安装 Node.js：
1
sudo yum install -y nodejs

image-20240604085407699

这个命令会从刚才添加的 Node.js 仓库中安装 Node.js。

  1. 安装完成后，您可以检查 Node.js 的版本确保安装成功：
1
node --version

请注意，上述命令中的 URL 和版本号可能会随着 Node.js 版本更新而变化，请参照 Node.js 官方文档或者 NodeSource 提供的最新安装脚本。

Github 部署 Hexo 博客

2024 年 5 月 10 日

以下一整块都算是踩坑记录，这里就不单拎出来做标题了，下面是 Github 部署博客的详细过程（包括踩坑）：

推荐阅读：可能是最好的部署教程：安装 Hexo 博客并部署到 GitHub 或云服务器（细节教程，越过各种坑）-CSDN 博客

在 config.yml 文件下，配置好远程 Github 仓库：

1
2
3
4
deploy:
  type: git
  repo: git@github.com:deng-2022/deng-2022.github.io.git
  branch: main

一直显示推送错误：

image-20240509133447437

跟着好多博客教程，我正常完成了远程仓库的搭建、 ssh 密钥对的配置，但仍一直出现上面的报错：

测试 Github 是否能正常网络连接：

1
ssh -v git@github.com

ssh -T git@github kex_exchange_identification: Connection closed by remote host-CSDN 博客

Github：通过 sshkey 的方式拉取代码报错 kex_exchange_identification: Connection closed by remote-腾讯云开发者社区-腾讯云 (tencent.com)

Github 备份代码出现 kex_exchange_identification: Connection closed by remote host - 知乎 (zhihu.com)

[git push 报错 ! remote rejected] master -＞ master (push declined due to email privacy restrictions)_51CTO 博客_git push 报错 remote rejected

我尝试测试下直接推送 .deploy_git 目录下的文件到 Github，结果这样也不行：

image-20240510090106558

image-20240509133008505

image-20240509133029958

看来不是 Hexo 和 Github 仓库配置问题，而是要推送的代码和文件有问题。这个信息显示这些文件中包含了阿里云 AccessKey，可能会有泄露风险，所以阻止了这次代码推送。

已经过去三天，昨天有阿里云客服打来电话，今天登录后又看到阿里云给我发来了告警信息：

image-20240510090503496

我想起来这是为什么了，那是因为我两天前根据这个博客教程，尝试在云服务器上部署个人博客。

那具体采用什么解决方法呢？早知道先搞 Github 部署了，现在直接推送代码还受到阿里云限制了。

没什么特殊操作，我选了第三项。

不过我忘了多会儿推上去的代码，是昨天下午嘛？刚刚突然发现代码昨天提交成功，现在博客也能正常访问了。

image-20240510174603918

Github 托管博客地址：Memory’s blog (deng-2022.github.io)

AtomGit 托管

2024 年 5 月 9 日

给大伙推个提供静态托管的平台 AtomGit · Issue #I9NGES · 开源中国/Gitee Feedback - Gitee.com

今天逛 Gitee 开源中国社区，看到了最新有效的 Hexo 静态博客站点托管解决方案，感觉可以尝试一下。

平台网址：开放原子开发者用户中心 (atomgit.com)，一个开放开源原子基金会相关平台。

image-20240509173810801

image-20240509173837912

还是很好用的，可以同步 Gitee 账号下的仓库，不过要求输入 Gitee 私人令牌。

Gitee 创建私人令牌

那么怎么拿到私人令牌呢？

官方提供：仓库镜像管理 （ Gitee <-> Github 双向同步） - Gitee.com

image-20240509162647683

可以看到我去年使用 Gitee 作为图床存储图片时，是进行过这步操作的，只不过连我自己都忘了。

教程很好看懂，步骤写的很明确操作也没难度。拿到唯一的 Gitee 私人令牌（当然可以同时有多个令牌），要妥善保存好。

安装 Pages 服务

在 AutoGit 仓库下安装 Pages 托管服务：

image-20240509162339945

image-20240509164434312

因为 Gitee 仓库下的博客站点代码是完整的，这里直接启动 Pages 服务就能开启访问。第一次访问应该是需要缓冲时间，等了有十分钟博客才能正常加载图文。（大部分图片都上传到了 Gitee 图床，这个托管网站下无法展示，只能展示本地配置的静态图片。）

image-20240509180920771

推送最新内容成功，最新个人博客站点：[Memory’s Blog]

image-20240509172503261

根据配置文件，默认推送到 main 分支，注意同步更改一下 Paegs 托管分支才能看到最新博客。

image-20240509172739987

blog 下的 _config.yml 文件内容编辑：

1
2
3
4
deploy:
  type: git
  repo: git@atomgit.com:deng-2022/blog.git
  branch: main

问题

2024 年 5 月 9 日

待解决的问题：

  • 图片都不能正常显示，都在 Gitee 图床上，短时间内不好解决。
  • AutoGit 仓库下多

解决

2024 年 7 月 8 日

前两个月一直不能成功部署，原来是这个原因：

pages 帮助文档 | AtomGit 帮助文档

image-20240708090915651

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# URL

## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'

url: https://test.atomgit.net/memory_blog
root: /memory_blog

# url: https://deng-2022.gitee.io/blog

# url: https://github.com/deng-2022/blog

permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

还是决定用 AutoGit Pages 服务部署个人博客。

image-20240708085506102

出现这样的问题，那就是推送代码至远程仓库的过程中，没有推送权限而导致出错：

git 报错—The authenticity of host can’t be established._git the authenticity of host can’t-CSDN 博客

image-20240708090406546

在代码托管仓库中设置就好了，公钥在本地 C 盘下的用户目录中：

image-20240708090609941

生成密钥可以参考这个文档，网上基本上一找就有：配置 SSH 密钥 | AtomGit 帮助文档

部署成功，可以访问了：

Memory’s blog (atomgit.net)

Vuepress 文档站点 部署

🔥 推荐阅读：（2023/11/28 晚）

快速搭建

  • 哎，全局安装 Vuepress 不支持了，本来挺好用的：
1
2
yarn init / npm init
yarn global add vuepress / npm install -g vuepress
  • 直接在 Github 下载了官方文档源码，呃，还是局部安装吧

下载地址：vuejs/vuepress at v1.9.10 (github.com)

  • 拉取代码后执行依次以下命令，即可成功在本地部署文档站点：
1
2
yarn install
yarn dev
  • 效果如下：

image-20231127233627342

  • 这两天在研究这个 Vuepress，感觉比 VitePress 更成熟、更好用
  • 等我把局部安装的配置搞清楚之后，再来此处作详细记录（2023/11/27 晚）

配置详解

侧边栏配置

  • 这里着重详解下 Vuepress 文档站点的侧边栏配置，官方文档在这方面的编写实在是有点含糊不清 （2023/12/06 晚）

官方文档：默认主题配置 | VuePress (vuejs.org)

  • 不同页面显示不同的侧边栏
  • 侧边栏分组
  • 分组可折叠？？？
  • 侧边栏展示标题深度
  • 两个全局配置：活动标题链接（默认开启）和展开所有标题链接（默认关闭）
  • 自动生成侧边栏：.js 配置方式 + .md 配置方式，后者更灵活，能配置标题
  • 禁用侧边栏

其他

  • 这里先回答之前的两个傻逼的问题：（2023/12/06 晚）

    🤡 选中导航栏后，默认为第一个子文件，也就是说，导航栏下没有默认 README.md 页面

    • 这是什么意思呢？就是这个意思：

    image-20231206222316398

    • 这不就很简单？配置好导航栏菜单的跳转就可以了：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    nav: [
        { text: "首页", link: "/" },
        {
          text: "指南",
          link: "/pages/52d5c3/",
          items: [
            { text: "简介", link: "/pages/52d5c3/" },
            { text: "安装", link: "/pages/a2f161/" },
            { text: "快速开始", link: "/pages/793dcb/" },
            { text: "返回响应码", link: "/pages/2f674a/" },
            {
              text: "API接口",
              items: [
                { text: "随机壁纸", link: "/pages/8dfab5/" },
                { text: "随机名言", link: "/pages/dd027d/" },
                { text: "天气查询", link: "/pages/2b8e22/" },
                { text: "获取IP信息归属地", link: "/pages/0fc1d2/" },
              ],
            },
          ],
        },
       .......................
      ],

    🤡 显示文章的右侧目录

Gitee 部署

  • 部署之前肯定要有 Gitee 远程仓库吧，创建一个新仓库，这里新仓库名就叫 VuepressDocs3了（2023/11/28 晚）

image-20231128173007530

  • 在 .vuepress/config.js下，作如下配置：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  title: "Mem-API 开发者文档",
  description: "🚀为简化开发而生",
  base: "/vuepress-docs3/",
  head: [["link", { rel: "icon", href: `favicon.png` }]],
  themeConfig: {
    // 主题设置
    logo: "/favicon.png",
    nav: [ ...
    ],
    sidebar: { ...
    },
  },
};

  • 这里注意，base 的值对应的是将要部署的 Gitee 仓库地址，看清楚上面新仓库的地址：vuepress-docs3

  • 执行以下命令，打包：

1
yarn docs:build
  • 然后你就会神奇的发现，.vuepress 目录下多了一个 dist 文件夹，这就是打包好的静态网站文件了

image-20231128173335872

  • 把 dist 下的文件远程推送到指定 Gitee 远程仓库中，开启 GiteePages 服务：

image-20231128173500061

image-20231128173533059

踩坑记录

  • 踩过的坑算很多了，这里一并提一下：（2023/11/28 晚）

2023/11/26 晚

了解到了 Vuepress 的 全局安装（不支持了）、局部安装 和 直接通过第三方主题安装，并了解了相关配置

总结来讲，这晚尝试了下 Vuepress 站点的简单配置，还没开始部署

  • 妈的，搞了一晚上 Vuepress ，好像没啥成果，但我总得记录一些东西吧：

    • 部署 Vuepress 文档站点：原生（全局安装、局部安装） / 第三方主题

    • 局部安装，好多东西还得自己配置，我哪来的闲心

    • 全局安装的话，他奶奶的，执行命令还不起作用

    • 第三方主题，感觉很不亲切

    • 尝试部署 Github，大体上成功了，但是打包完成后执有问题，现在本地部署也出现问题了

2023/11/27 晚

  • 也就睡前半个多小时，简单地搞了搞，发现在 Github 上可以直接拉官方代码，实现全局安装
🚀 下载地址：vuejs/vuepress at v1.9.10 (github.com)

image-20231127233627342

  • 还想着在这个基础上修修改改，做个文档站点，不过真的复杂，看看了解即可，在这个基础上做改动太不实际了，直接劝退
  • 那就用前天晚上的成果，直接着手部署了：Github / Gitee

🍻 推荐阅读：vuepress 打包部署到 Gitee Pages 访问页面出现样式丢失_De Ja Vu 幻觉记忆的博客-CSDN 博客

  • Github 不想多说，太他妈吃网速了，访问慢不说，好不容易推送成功，还老是显示部署失败，发了十几条邮箱信息都没咋注意：

image-20231128175139846

image-20231128175234867

  • 呐，上面就是 Github Pages 服务了，太卡了，部署不了，不过网速好的话是没有问题的（2023/11/28 晚）

Vdoing 文档站点 部署

快速搭建

  • 拉取官方 demo（2023/12/06 晚）

官网地址：快速上手 | vuepress-theme-vdoing (xugaoyi.com)

  • 如下，直接按照官方文档的步骤，拉取官方文档站点预设 demo（这一步不用作过多详细解释了，看官方文档就行）：

image-20231206214916590

  • 拉取成功，简单看一下目录结构（官网提供），最重要的配置文件就是 docs/.vuepress/config.js 配置文件了：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.
├── .github   (可选，GitHub 相关文件)
│   ├── workflows
│   │   ├── baiduPush.yml (可选，百度定时自动推送)
│   │   └── ci.yml (可选，自动部署)
├── docs (必须，不要修改文件夹名称)
│   ├── .vuepress （同官方，查看：https://vuepress.vuejs.org/zh/guide/directory-structure.html#目录结构）
│   ├── @pages (可选，自动生成的文件夹，存放分类页、标签页、归档页)
│   ├── _posts (可选，专门存放碎片化博客文章的文件夹)
│   ├── <结构化目录>
│   └── index.md (首页)
├── vdoing (可选，本地的vdoing主题)
├── utils  (可选，vdoing主题使用的node工具)
│   ├── modules
│   ├── config.yml (可选，批量操作front matter配置)
│   ├── editFrontmatter.js (可选，批量操作front matter工具)
├── baiduPush.sh (可选，百度推送命令脚本)
├── deploy.sh (可选，部署命令脚本)
│
└── package.json
  • 简单修改配置：

  • 基本上所有配置官方都已经替我们做好了，我们要做的仅仅是改改 网站标题、导航栏、侧边栏，然后把博文替换成自己的就行

  • 简单甩出我的配置，仅供参考，详细的配置这里不作过多介绍，需要靠自己慢慢摸索（2023/12/06 晚）

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
const baiduCode = require("./config/baiduCode.js"); // 百度统计hm码
module.exports = {
  theme: "vdoing", // 使用依赖包主题
  // theme: require.resolve('../../vdoing'), // 使用本地主题 (先将vdoing主题文件下载到本地：https://github.com/xugaoyi/vuepress-theme-vdoing)
  title: "Memory-API-接口开放平台",
  description: "🚀为简化开发而生",
  base: "/vdoing-doc/", // 默认'/'。如果你想将你的网站部署到如 https://foo.github.io/bar/，那么 base 应该被设置成 "/bar/",（否则页面将失去样式等文件）
  // 主题配置
  themeConfig: {
    nav: [
      { text: "首页", link: "/" },
      {
        text: "指南",
        link: "/pages/52d5c3/",
        items: [
          { text: "简介", link: "/pages/52d5c3/" },
          { text: "安装", link: "/pages/a2f161/" },
          { text: "快速开始", link: "/pages/793dcb/" },
          { text: "返回响应码", link: "/pages/2f674a/" },
          {
            text: "API接口",
            items: [
              { text: "随机壁纸", link: "/pages/8dfab5/" },
              { text: "随机名言", link: "/pages/dd027d/" },
              { text: "天气查询", link: "/pages/2b8e22/" },
              { text: "获取IP信息归属地", link: "/pages/0fc1d2/" },
            ],
          },
        ],
      },
      {
        text: "配置",
        link: "/pages/ce175c/",
        items: [{ text: "使用配置", link: "/pages/ce175c/" }],
      },
      { text: "案例", link: "/pages/5d571c/" },
      { text: "问答", link: "/pages/9cc27d/" },
      { text: "赞助", link: "/pages/1b12ed/" },
    ],
    sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
    logo: "/img/logo.png", // 导航栏logo
    repo: "xugaoyi/vuepress-theme-vdoing", // 导航栏右侧生成Github链接
    searchMaxSuggestions: 10, // 搜索结果显示最大数
    lastUpdated: "上次更新", // 更新的时间，及前缀文字   string | boolean (取值为git提交时间)

    // 以下配置是Vdoing主题改动的和新增的配置
    sidebar: { mode: "structuring", collapsable: false }, // 侧边栏  'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义    温馨提示：目录页数据依赖于结构化的侧边栏数据，如果你不设置为'structuring',将无法使用目录页

    // sidebarOpen: false, // 初始状态是否打开侧边栏，默认true
    updateBar: {
      // 最近更新栏
      showToArticle: false, // 显示到文章页底部，默认true
      // moreArticle: '/archives' // “更多文章”跳转的页面，默认'/archives'
    },
    // titleBadge: false, // 文章标题前的图标是否显示，默认true
    // titleBadgeIcons: [ // 文章标题前图标的地址，默认主题内置图标
    //   '图标地址1',
    //   '图标地址2'
    // ],

    pageStyle: "line", // 页面风格，可选值：'card'卡片 | 'line' 线（未设置bodyBgImg时才生效）， 默认'card'。 说明：card时背景显示灰色衬托出卡片样式，line时背景显示纯色，并且部分模块带线条边框

    // contentBgStyle: 1,

    category: false, // 是否打开分类功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含分类字段 2.页面中显示与分类相关的信息和模块 3.自动生成分类页面（在@pages文件夹）。如关闭，则反之。
    tag: false, // 是否打开标签功能，默认true。 如打开，会做的事情有：1. 自动生成的frontmatter包含标签字段 2.页面中显示与标签相关的信息和模块 3.自动生成标签页面（在@pages文件夹）。如关闭，则反之。
    // archive: false, // 是否打开归档功能，默认true。 如打开，会做的事情有：1.自动生成归档页面（在@pages文件夹）。如关闭，则反之。

    author: {
      // 文章默认的作者信息，可在md文件中单独配置此信息 String | {name: String, href: String}
      name: "Evan Xu", // 必需
      href: "https://github.com/xugaoyi", // 可选的
    },
    social: {
      // 社交图标，显示于博主信息栏和页脚栏
      // iconfontCssFile: '//at.alicdn.com/t/font_1678482_u4nrnp8xp6g.css', // 可选，阿里图标库在线css文件地址，对于主题没有的图标可自由添加
      icons: [
        {
          iconClass: "icon-youjian",
          title: "发邮件",
          link: "mailto:894072666@qq.com",
        },
        {
          iconClass: "icon-github",
          title: "GitHub",
          link: "https://github.com/xugaoyi",
        },
        {
          iconClass: "icon-erji",
          title: "听音乐",
          link: "https://music.163.com/#/playlist?id=755597173",
        },
      ],
    },
    footer: {
      // 页脚信息
      createYear: 2019, // 博客创建年份
      copyrightInfo: "Evan Xu | MIT License", // 博客版权信息，支持a标签
    },
  },

  // 插件
  plugins: [
    ["fulltext-search"], // 全文搜索

    [
      "vuepress-plugin-baidu-tongji", // 百度统计
      {
        hm: baiduCode || "01293bffa6c3962016c08ba685c79d78",
      },
    ],

    [
      "one-click-copy",
      {
        // 代码块复制按钮
        copySelector: [
          'div[class*="language-"] pre',
          'div[class*="aside-code"] aside',
        ], // String or Array
        copyMessage: "复制成功", // default is 'Copy successfully and then paste it for use.'
        duration: 1000, // prompt message display time.
        showInMobile: false, // whether to display on the mobile side, default: false.
      },
    ],
    [
      "demo-block",
      {
        // demo演示模块 https://github.com/xiguaxigua/vuepress-plugin-demo-block
        settings: {
          // jsLib: ['http://xxx'], // 在线示例(jsfiddle, codepen)中的js依赖
          // cssLib: ['http://xxx'], // 在线示例中的css依赖
          // vue: 'https://jsd.cdn.zzko.cn/npm/vue/dist/vue.min.js', // 在线示例中的vue依赖
          jsfiddle: false, // 是否显示 jsfiddle 链接
          codepen: true, // 是否显示 codepen 链接
          horizontal: false, // 是否展示为横向样式
        },
      },
    ],
    [
      "vuepress-plugin-zooming", // 放大图片
      {
        selector: ".theme-vdoing-content img:not(.no-zoom)",
        options: {
          bgColor: "rgba(0,0,0,0.6)",
        },
      },
    ],
    [
      "@vuepress/last-updated", // "上次更新"时间格式
      {
        transformer: (timestamp, lang) => {
          const dayjs = require("dayjs"); // https://day.js.org/
          return dayjs(timestamp).format("YYYY/MM/DD, HH:mm:ss");
        },
      },
    ],
  ],

  markdown: {
    // lineNumbers: true,
    extractHeaders: ["h2", "h3", "h4", "h5", "h6"], // 提取标题到侧边栏的级别，默认['h2', 'h3']
  },
};

image-20231206215939559

Gitee 部署

  • 部署流程跟上面 Vuepress 文档站点部署是一样样的：

配置远程仓库地址 -> 打包 -> 推送至远程仓库 -> 开启 Gitee Pages 服务

值得注意的是，不论是执行 yarn dev 还是 yarn build，都会有这样的友好提示（这也是和 Vuepress 不同的地方）：

image-20231206164726405

按提示修改就行

踩坑记录

  • 一晚上遇到好些个坑，在 config.js 配置文件中指定 base 路径并打包完成后，在 dist 目录下执行以下命令：
1
serve
  • 结果是这样（样式丢失）：（2023/12/06 晚）

image-20231206165305532

  • 这样是正常的，在推送 dist 目录下的文件到远程仓库的过程中，由于对 git 命令的不熟悉，一直被之前的提交记录所影响

  • 建议直接把打包后生成的 dist 目录剪切在一个干净的目录下，执行推送

  • 推送成功：

image-20231206221124915

  • 开启 Gitee Pages 服务成功后，直接访问：（2023/12/06 晚）

image-20231206221217820

image-20231206213451379

Vdoing 主题搭建文档站点

Memory Tools

  • 今日，Memory-Tools 开发者文档基本完成！效果如下：（2032/12/19 午）

image-20231219134202831

MemorySearch 忆搜阁

今日，基本完成 MemorySearch 忆搜阁 的文档编写和网站首页制作！

网站首页使用 vuepress-theme-hope 主题：

image-20240219110401147

开发文档使用 vdoing 主题：

image-20240219110100681

使用 vdoing 主题搭建的 Vuepress 文档中，在 config.js 和 index.md 文件中，可分别修改文档首页 LOGO 和 导航栏 LOGO：

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
module.exports = {
  theme: "vdoing", // 使用依赖包主题
  // theme: require.resolve('../../vdoing'), // 使用本地主题 (先将vdoing主题文件下载到本地：https://github.com/xugaoyi/vuepress-theme-vdoing)
  title: "MemorySearch 开发者文档",
  description: "🚀为简化开发而生",
  base: "/memory-search-docs/", // 默认'/'。如果你想将你的网站部署到如 https://foo.github.io/bar/，那么 base 应该被设置成 "/bar/",（否则页面将失去样式等文件）
  // 主题配置
  themeConfig: {
    nav: [
      { text: "首页", link: "/" },
      {
        text: "操作指南",
        link: "/pages/52d5c3/",
        items: [
          { text: "概述", link: "/pages/52d5c3/" },
          { text: "系统设计", link: "/pages/a2f161/" },
          { text: "维护升级", link: "/pages/793dcb/" },
          {
            items: [
              { text: "高效多元搜索", link: "/pages/346f3e/" },
              { text: "互动创作平台", link: "/pages/94778b/" },
              { text: "流量统计分析", link: "/pages/c0261e/" },
              { text: "个人中心管理", link: "/pages/8dfa99/" },
              { text: "资源全面管理", link: "/pages/8dfab5/" },
            ],
          },
        ],
      },
      {
        text: "学习收获",
        link: "/pages/8dfad9/",
        items: [
          { text: "概览", link: "/pages/8dfad9/" },
          {
            items: [
              { text: "Ant Design Vue 脚手架", link: "/pages/advjsj/" },
              { text: "Vuepress 静态文档站点", link: "/pages/vpjtwd/" },

              { text: "数据抓取", link: "/pages/sjzq/" },
              { text: "Elastic Stack 技术栈", link: "/pages/esjsz/" },

              { text: "适配器模式", link: "/pages/apqms/" },
              { text: "门面模式", link: "/pages/mmms/" },
              { text: "注册器模式", link: "/pages/zcqms/" },

              { text: "关键词语高亮", link: "/pages/gjcygl/" },
              { text: "搜索词条建议", link: "/pages/ssctjy/" },
              { text: "热门搜索统计", link: "/pages/rmsstj/" },
              { text: "热门话题分析", link: "/pages/rmhtfx/" },

              { text: "Logstash 数据同步管道", link: "/pages/lssjtbgd/" },
              { text: "Canal 监控数据库流水", link: "/pages/cjksjkls/" },
              { text: "Kibana 数据监控面板", link: "/pages/ksjjkmb/" },

              { text: "限流策略", link: "/pages/xlcl/" },
              { text: "Redis 缓存优化", link: "/pages/rhcyh/" },
              { text: "Knife4j & Swagger 接口文档", link: "/pages/ksjkwd/" },

              { text: "定时任务调度", link: "/pages/dsrwdd/" },
              { text: "权限校验机制", link: "/pages/qxjyjz/" },
              { text: "异步编程支持", link: "/pages/ybbczc/" },
            ],
          },
        ],
      },
      // { text: "案例", link: "/pages/5d571c/" },
      {
        text: "问题答疑",
        link: "/pages/9cc27d/",
        items: [
          { text: "简介", link: "/pages/9cc27d/" },
          { text: "常见问题与解答", link: "/pages/9cc288/" },
        ],
      },
      // { text: "赞助", link: "/pages/1b12ed/" },
    ],
    sidebarDepth: 2, // 侧边栏显示深度，默认1，最大2（显示到h3标题）
    logo: "/img/logo.png", // 导航栏logo
    repo: "xugaoyi/vuepress-theme-vdoing", // 导航栏右侧生成Github链接
    searchMaxSuggestions: 10, // 搜索结果显示最大数
    lastUpdated: "上次更新", // 更新的时间，及前缀文字   string | boolean (取值为git提交时间)

1
2
3
4
5
6
7
8
9
---
home: true
heroImage: /img/logo.png
heroText: MemorySearch 开发者文档
tagline: 🚀为简化开发而生
actionText: 开始使用 →
actionLink: /pages/52d5c3/
bannerBg: none # auto => 网格纹背景(有bodyBgImg时无背景)，默认 | none => 无 | '大图地址' | background: 自定义背景样式       提示：如发现文本颜色不适应你的背景时可以到palette.styl修改$bannerTextColor变量

image-20240219105642175

严重问题

2024 年 4 月 29 日

image-20240429084945308

image-20240429085809381

image-20240429085813430

image-20240429090001153

基础知识

Gitee 基础知识和使用

  • 注册和创建 Gitee 账号
  • 创建新的仓库（Repository）
  • 了解仓库的组成和功能，例如分支、提交记录等
  • 熟悉仓库的基础操作，如上传和下载文件、提交和同步代码等

Gitee Page 服务简介

  • 介绍 Gitee 的 Page 服务，它是什么以及它的作用
  • 解释 Page 服务的原理和运行机制
  • 简要介绍 Page 服务的特性，如自动部署、自定义域名等

托管静态网站的步骤和实践

  • 准备网站目录和静态资源
  • 在 Gitee 仓库中创建和组织网站文件的结构
  • 配置 Page 服务并将网站部署到 Gitee 仓库
  • 详细说明自定义域名、HTTPS 等高级配置选项

最佳实践和常见问题解答

  • 分享一些使用 Gitee 托管静态网站的最佳实践和技巧
  • 解答常见问题，如如何自动构建、如何更新网站内容等

Gitee 托管

image-20230702152240718

image-20230702152844439

image-20230702152910555

image-20230702153051903

image-20230702153115901

image-20230702153134983

image-20230702153211860

总结

  • 总结使用 Gitee 的 Page 服务托管静态网站的优势和便利性
  • 强调 Gitee 作为开源社区的重要性，并鼓励读者尝试使用 Gitee 进行项目和网站托管
经验 > 文档站点 > 云服务器 > Blog
#经验 #云服务器 #文档站点 #Blog
大道至简：快速搭建博客与文档站点的终极指南2.0
https://test.atomgit.net/blog/2023/06/24/大道至简：快速搭建博客与文档站点的终极指南2.0/
作者
Memory
发布于
2023年6月24日
更新于
2024年7月8日
许可协议