Revise article and add table of contents

mobeicanyue · Dec 28, 2023 · 38917a7 · 38917a7
1 parent ae0878d
commit 38917a7
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 24 deletions.
diff --git a/source/_posts/1panel-Configuration-Tutorial.md b/source/_posts/1panel-Configuration-Tutorial.md
@@ -18,7 +18,7 @@ tags:
 
 宝塔面板是比较知名的服务器管理面板，但是它`不开源`，`UI 也不好看`，登录时甚至还`要求绑定宝塔官网账号`，否则就无法继续使用面板！
 
-如此种种便促使我们寻找替代品。我的服务器在 11 月份左右过期了，新的服务器不想使用宝塔面板，但是不使用面板操作服务器还是不太方便（比如设置反向代理、申请域名 SSL 证书和管理 docker 应用，面板可视化点击几下就好了，命令行操作起来很折磨人），于是便寻找它的替代品，也就是我们今天的主角 —— `1panel`。
+如此种种便促使我寻找替代品。我的服务器在 11 月份左右过期了，新的服务器不想使用宝塔面板，但是不使用面板操作服务器还是不太方便（比如设置反向代理、申请域名 SSL 证书和管理 docker 应用，面板可视化点击几下就好了，命令行操作起来很折磨人），于是便寻找它的替代品，也就是我们今天的主角 —— `1panel`。
 
 ![1panel 首页](../images/1panel-Configuration-Tutorial/panel.webp)
 
@@ -27,7 +27,7 @@ tags:
 
 你可以访问这个连接来体验一下 1panel 的功能：[https://demo.1panel.cn](https://demo.1panel.cn)
 
-经过一两个月的使用，我觉得现在体验相当稳定，写这篇教程，希望能帮助到大家。
+经过一两个月的使用，我觉得现在体验相当稳定，写这篇教程希望能帮助到大家。
 
 ### 2. 1panel 安装
 
@@ -51,7 +51,8 @@ curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_
 后面命令行会输出一大串安装日志，等待即可。
 
 3) 命令行提示输入端口号，你可以自定义，也可以用它给你默认的端口号。
-注意 如果你使用的是云服务器，请至安全组开放 `输入的端口`
+注意 如果你使用的是云服务器，请至云服务器提供商的安全组开放 `输入的端口`。
+账号密码自己设置，但最好不要太简单，不然被人爆破就不好了。
 ![输入信息](../images/1panel-Configuration-Tutorial/enter-info.webp)
 
 如果没有什么报错的话，那么恭喜你，1panel 已经安装成功了。
@@ -77,14 +78,14 @@ curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_
 ![应用商店](../images/1panel-Configuration-Tutorial/app-store.webp)
 
 
-我们安装 `openresty` 应用。这是一个 nginx 的衍生版本，支持 lua 脚本，我们可以用它来做反向代理。
-（不知道为啥没有 `nginx`，但是这个也挺好用的，没差）
+我们选择安装 `openresty`。这是一个 nginx 的开源衍生版本，支持 lua 脚本，我们可以用它来做反向代理。
+（不知道为啥没有 `nginx`，但是这个 `openresty` 也挺好用的，没差）
 安装了它才能编辑网页、配置反代。
 ![openresty](../images/1panel-Configuration-Tutorial/install-openresty.webp)
 不要改配置！直接点确定即可。
 
 ### 4. 设置域名解析
-域名服务商设置域名解析，将域名解析到服务器的 IP 上。这里应该不用我多教。
+域名服务商设置域名解析，将 `域名` 解析到服务器的 `IP` 上。这里应该不用我多教。
 ![域名解析](../images/1panel-Configuration-Tutorial/dns-record.webp)
 
 ### 5. 配置反向代理

diff --git a/source/_posts/Build-the-environment.md b/source/_posts/Build-the-environment.md
@@ -0,0 +1,70 @@
+---
+title: Hexo 环境搭建
+date: 2023-12-28 19:08:02
+tags:
+---
+
+我是 `Linux` 操作系统 `Manjaro` 分支，所以文章着重介绍 `Linux` 下的环境搭建。
+`Windows` 下的环境搭建有不小的差异，但是原理是一样的。
+
+### 1. 检查 Git 环境
+
+-  `Linux` 大多数发行版都默认安装了 Git，所以我们只需要检查一下 Git 版本。
+    ```bash
+    git --version
+    ```
+    输出如下内容。
+    ```bash
+    git version 2.43.0
+    ```
+- `Windows` 下的 安装 Git 可以参考 [Git 官网](https://git-scm.com/downloads)，或者搜索教程。
+
+### 2. 安装 Node.js 和 npm
+
+npm 的依赖项就是 nodejs。所以安装 npm, nodejs 会一起被安装。
+
+-   `Debian` 系安装 npm 和 nodejs
+
+    ```bash
+    sudo apt install npm
+    ```
+    检验版本
+    ```bash
+    node -v
+    npm -v
+    ```
+
+<br>
+
+-   `ArchLinux` 系安装 npm 和 nodejs
+
+    ```bash
+    sudo pacman -S npm
+    ```
+    检验版本
+    ```bash
+    node -v
+    npm -v
+    ```
+
+-   `Windows` 下的 安装 Node.js 和 npm 可以参考 [Node.js 官网](https://nodejs.org/en/download/)，或者搜索教程。
+
+     和上面一样，安装完毕后检验版本。
+
+记住上面的 nodejs 的版本号，后面会用到。
+
+### 3. 安装 Hexo
+
+注：如果是 `Windows` 系统，需要空白处单击鼠标右键，选择“Git Bash Here”输入以下命令。
+
+Linux 系统直接打开终端输入即可。
+```bash
+npm install hexo-cli -g
+```
+安装完毕后，输入以下命令检验是否安装成功。
+```bash
+hexo -v
+```
+如果没有报错而是输出版本号，就说明安装成功了。
+反之则根据报错信息进行排查。
+
diff --git a/source/_posts/Compress-deploy-code-size.md b/source/_posts/Compress-deploy-code-size.md
@@ -10,7 +10,7 @@ tags:
 [`jquery` 的源码](https://lib.baomitu.com/jquery/3.6.4/jquery.min.js)
 可以发现代码密密麻麻没有一点可读性，但是`这样的代码浏览器来说加载起来更快`，因为`浏览器不需要去解析空格和换行符，而是直接读取代码`。
 
-因此，为了优化页面性能，我们需要对页面的静态资源进行压缩，包括 CSS、JS 和 HTML 文件等。为了简化这一过程，可使用 Hexo 插件 `hexo-minify` 进行压缩操作。这样一来，我们可以有效地减少文件大小，提升页面加载速度。
+因此，为了优化页面性能，我们需要对页面的静态资源进行压缩，包括 CSS、JS 和 HTML、图片、字体等。为了简化这一过程，可使用 Hexo 插件 `hexo-minify` 进行压缩操作。这样一来，我们可以有效地减少文件大小，提升页面加载速度。
 
 ### 1. 安装 hexo-minify 插件
 

diff --git a/source/_posts/Configure-blog-domain.md b/source/_posts/Configure-blog-domain.md
@@ -25,6 +25,7 @@ tags:
 访问你的域名，比如 `example.com`，就可以看到你的博客了。
 ![blog.webp](../images/Configure-blog-domain/blog.webp)
 此时可以注意到在 gh-pages 分支中多了一个 CNAME 文件，这个文件内容就是我们刚刚配置的域名。
+
 但是按照之前的配置，每次 github action 部署的时候，都会把这个文件给覆盖掉，所以我们后面需要修改一下配置。
 ![CNAME-file.webp](../images/Configure-blog-domain/CNAME-file.webp)
 

diff --git a/source/_posts/Convert-jpg-to-webp.md b/source/_posts/Convert-jpg-to-webp.md
@@ -8,13 +8,13 @@ tags:
 
 ### 1. 安装 cwebp
 
-archlinux 系列的
+Archlinux 系 Linux 安装 `cwebp`
 ```bash
 sudo pacman -S libwebp
 ```
 ### 2. 转换
-我编写了一个脚本，可以将当前 `images` 目录下的所有 jpg 文件转换为 webp 文件。
-遍历所有文件夹并将图片转换为 WebP 格式。
+我编写了一个脚本，可以将`当前目录`下的所有 jpg 文件转换为 webp 文件。
+代码遍历所有文件夹并将图片转换为 WebP 格式。
 ```bash
 script_dir=$(dirname "$0")
 

diff --git a/source/_posts/Fix-article-updated-time-on-github-pages.md b/source/_posts/Fix-article-updated-time-on-github-pages.md
@@ -8,10 +8,10 @@ tags:
 > github actions 具体配置请参考前面的文章
 
 ### 1. 问题起因
-我开启了 fluid 配置的
+我开启了 fluid 配置 `updated: true`，这样会显示文章的更新时间。
 ![fluid-config.webp](../images/Fix-article-updated-time-on-github-pages/fluid-config.webp)
 
-但是在部署到 github pages 时，`hexo 并不会像我们本地运行那样，显示的是文章的更新时间，而是显示的是部署的时间。` 换句话说，你所有文章的更新时间都全部定格在 github actions 最新的部署的那个时间（难绷）。
+但是在部署到 github pages 时，`hexo 并不会像我们本地运行那样，显示的是文章的更新时间，它获取的是部署的时间。` 换句话说，你所有文章的更新时间都全部定格在 github actions 最新的部署的那个时间（难绷）。
 ![error-time.webp](../images/Fix-article-updated-time-on-github-pages/error-time.webp)
 
 我们可以在 `front-matter` 加入 `updated: 更新时间` 解决
@@ -37,7 +37,7 @@ with:
 `fetch-depth: 0` 指定了拉取代码的深度。在这里，设置为 0 表示完全拉取整个代码历史，而不是仅拉取最新的部分。这样可以获取完整的 Git 历史记录。
 
 2) 修复文件更新时间
-在 build site 之前添加[^1]
+在 build site 之前添加如下代码 [^1]
 ```yaml
       - name: Fix File Updated Date
         run: |

diff --git a/source/_posts/Fluid-theme-installation.md b/source/_posts/Fluid-theme-installation.md
@@ -112,5 +112,5 @@ index:
 /img/default.png
 ```
 将其改为你想要的 api 地址即可。
-我是 [Bing 每日图片](https://api.vvhan.com/api/bing?size=1920x1080)
+我使用的是 [Bing 每日图片](https://api.vvhan.com/api/bing?size=1920x1080)
 感谢接口提供者！！！
diff --git a/source/_posts/Hexo-Fluid-set-footer.md b/source/_posts/Hexo-Fluid-set-footer.md
@@ -33,8 +33,8 @@ footer:
     <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
     '
 ```
-上面分别是版权信息、运行时间、Hexo 和 Fluid 的链接。
-这样子还不行，因为显示的时间是动态的，需要 js 来实现（经过测试好像不能在这写 script 代码，所以外链 js）。
+上面分别是`版权信息`、`运行时间`、`Hexo 和 Fluid 的链接`。
+这样子还没完，因为要求显示的时间是动态的，需要写 js 来实现（经过测试好像不能在这写 script 代码，所以外链 js）。
 <br>
 新建文件夹`source/js`，新建文件`duration.js`，内容如下：
 > 代码来源于网络，由于找的代码都是大同小异的，不知道原作者是谁，版权归原作者所有。
@@ -52,4 +52,6 @@ function createtime() {
     document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
 }
 setInterval("createtime()", 250);
-```
+```
+
+重新运行博客，功能即可实现。
diff --git a/source/_posts/My-first-hexo-blog.md b/source/_posts/My-first-hexo-blog.md
@@ -1,7 +1,6 @@
 ---
 title: 我的第一篇 Hexo 博客
 date: 2023-12-26 23:18:38
-sticky: 100
 tags:
 - hexo
 - github
@@ -19,7 +18,7 @@ tags:
 > 最终实现的效果，一个项目仓库，`main` 分支存放源代码，`gh-pages` 存放生成后的网页代码，github pages 加载 `gh-pages` 的网页代码。
 > 这样，每当我们 push 代码到 `main` 分支的时候，github action 会自动构建并将代码发布到 `gh-pages` 分支，github pages 会自动加载 `gh-pages` 分支的代码，这样就实现了自动部署。
 
-搭建环境：
+环境：
 
 > linux plasma manjaro
 > nodejs 20
@@ -45,7 +44,7 @@ tags:
 
 ![deploy-key1.webp](../images/My-first-hexo-blog/deploy-key1.webp)
 
-填入你的私钥
+填入你的私钥 取名为 `KEY`，后面要用到
 ![deploy-key2.webp](../images/My-first-hexo-blog/deploy-key2.webp)
 
 ### 3. 初始化 hexo 博客目录
@@ -69,7 +68,7 @@ git commit -m "Initial commit"
 执行结果如下
 ![init-git.webp](../images/My-first-hexo-blog/init-git.webp)
 
-把下面 git@xxx 地址换成你仓库的 ssh 地址
+把下面 git@xxx 地址换成你`仓库的ssh地址`
 
 ```bash
 git remote add origin [email protected]:mobeicanyue/mobeicanyue.github.io.git
@@ -102,8 +101,8 @@ git push -u origin master
 
 ![new-file.webp](../images/My-first-hexo-blog/new-file.webp)
 
-下面的代码只需要修改你的用户名和邮箱
-
+下面的代码需要修改你的用户名和邮箱
+还有你对应的 nodejs 版本
 
 ```yml
 name: Deploy Hexo
@@ -149,9 +148,11 @@ jobs:
           hexo deploy
 ```
 
+上面的`${{ secrets.KEY }}` 就是我们前面设置的私钥
+
 <br>
 
-3) 最后提交代码并推送
+1) 最后提交代码并推送
 ![commit-push.webp](../images/My-first-hexo-blog/commit-push.webp)
 
 ### 7. 访问站点，部署成功！

diff --git a/source/_posts/Tutorial-of-Building-a-blog.md b/source/_posts/Tutorial-of-Building-a-blog.md
@@ -0,0 +1,23 @@
+---
+title: 构建博客教程
+date: 2023-12-28 19:03:00
+sticky: 100
+tags:
+---
+## 目录
+
+### Hexo Github-Pages 自动部署 
+- [Hexo 环境搭建](Build-the-environment.md)
+- [部署 Hexo](My-first-hexo-blog.md)
+- [博客域名配置](Configure-blog-domain.md)
+
+### Fluid 主题、美化相关
+- [Fluid 主题安装](Fluid-theme-installation.md)
+- [在 Fluid 主题中使用霞鹜文楷](Use-lxgw-wenkai-in-fluid.md)
+- [修复 Github Pages 上的文章更新时间](Fix-article-updated-time-on-github-pages.md)
+- [Hexo Fluid 设置页脚](Hexo-Fluid-set-footer.md)
+
+### 博客性能优化
+- [将 jpg 转换为 webp](Convert-jpg-to-webp.md)
+- [压缩部署的代码](Compress-deploy-code-size.md)
+