网站

2025/6/28

Smiaty的网站建成了！！

这个网站是部署hexo到Github，然后从Github到我的网站域名

所以网站就建好了！！

同时网站也设有评论系统和网盘

网盘:http://files.smpwebsite.online

评论系统是通过Waline | Waline部署并应用的

网盘是通过Alisthttps://alistgo.com/ 部署然后用内网穿透OpenFrp 开放映射并建成的

网站

准备工具

首先我们需要到对应网站下载需要的工具

下载nodejs

(这篇文章里有修改nodejs缓存路径的教学:文章链接，c盘战士可以不看)

下载git

一直点确定就行，全部按它默认勾的

(这里有一篇详细安装教程文章链接，可以不看)

接下来我们测试下是否都下载成功

管理员运行cmd，依次输入

1
2
3

node -v
npm -v（这个是node附带的）
git -v

Copy

下载hexo

1	npm install hexo-cli -g

Copy

搭建仓库

成功下载好工具之后，我们开始搭建GitHub存储静态页面的仓库

首先注册/登入Github

点击Create a new repository进入新建仓库页面

仓库名输入：

1	用户名.github.io

Copy

勾选 Public

勾选 Add a README file

拉到下面点击create创建

生成SSH Keys

进入任意文件夹，右键空白处然后点Git bash here,输入

1	ssh-keygen -t rsa -C "邮件地址"

Copy

然后敲4次Enter⌨️

然后进入C:\Users\用户名，在里面进入.ssh文件

用记事本打开里面的id_rsa.pub,全选复制里面的代码

然后打开github

进入用户设置，找到SSH keys

新建SSH keys，名称随意，在下面粘贴代码，

然后创建

测试是否成功

在git bash中输入

1	ssh -T git@github.com

Copy

回车，然后再输入yes

本地生成博客内容

在喜欢位置新建文件Blog，然后进入文件夹

右键空白处然后点Git bash here，输入

hexo init

Copy

如果‘command not find’，就在前面加上npx，如：npx hexo init

然后

1	hexo install

Copy

接下来依次输入

1 2	hexo g hexo s

Copy

（如果不成功的话就重复直到成功，因为国内与github连接不稳定）

现在就可以复制生成的链接进入浏览器看到我们生成的本地服务器了

然后回到命令行，ctrl+c关闭

上线博客

进入之前的Blog文件夹，用记事本打开_config.yml

拉到最下面将deploy后面的全删掉，复制粘贴这段

1
2
3

type: git
repository: 
branch: main

Copy

注意缩进格式：每行前面都有两个空格不要删，每个冒号后面都有个空格也不要删！

去github之前生成的仓库页面，点code，复制https链接

将其粘贴到我们记事本中的repository：后面

然后保存退出

回到博客文件夹，git bash

安装自动部署发布工具

1	npm install hexo-deployer-git --save

Copy

然后在Blog文件夹右键打开git bash，依次输入

1 2	hexo g（生成） hexo d（上传）

Copy

如果是第一次使用git的话会需要配置
1
2
git config --global user.email "你的邮箱"
git config --global user.name "你的名字"
Copy

配置完后再hexo d上传

在跳出来的窗口内进行登录

接下来我们就成功把本地内容上传到github了

上传成功以后，我们就算搭建好了！上自己的网址看看吧

网址是我们之前设的仓库名：用户名.github.io

网站资料

我们的博客标题还是默认的hexo，整个页面是初始默认的，接下来我们对其进行修改

用记事本打开我们blog文件夹中的_config.yml文件

将#Site下面按自己的需求填上

## Site
title: 标题
subtitle: 副标题
description: 描述
keywords: 关键词
author: 站主
language: 语言（可以填写zh-CN）
timezone: 时区（可以填写Asia/Shanghai）

Copy

然后保存

如何上传文章

我们在Blog文件夹中打开git bash,输入下方代码就可以生成新的文章md文件

1	hexo new 文章标题

Copy

文章是.md格式，在我们的Blog文件夹中的source/_posts中

推荐用Typora软件来编辑.md格式的文件

Typora官网：https://www.typoraio.cn/（89元终身使用，推荐正版）

破解版奉上：蓝奏云文件

然后我们用Typora软件打开该.md文件就可以开始写文章了

写好以后，我们还是一样打开git bash生成、上传

1 2	hexo g hexo d

Copy

至此，我们就成功搭建好基本的博客了，剩下的就是对博客的一些优化和美化了。

我目前使用的hexo博客主题是theme-particlex/hexo-theme-particlex: A concise Hexo theme, based on Particle.，推荐主题：Butterfly，anzhiyu, anzhiyu

解析域名

我用的是腾讯云的域名

到解析记录 – 添加记录

信息	内容
主机记录	@
记录类型	CNAME
记录值	用户名.github.io

下面是主机记录意思（来自Web应用（HTTP/HTTPS）配置 | OpenFrp Docs与Openfrp无关）

主机记录	域名前缀	实际网址
@	无	`example.com`
www	www	`www.example.com`
abcd	abcd	`abcd.example.com`

保存之后再到我们的Github Hexo项目

点Settings – Pages – Custom domain输入网站网址

注:如果主机记录有特殊的如abcd，面前也要加的

过一会就可以看见网站了

网盘

我这里的操作系统是Ubuntu 25.04 (GNU/Linux 6.14.0-22-generic x86_64)

先切换到root用户

1
2
3

smpqwq@smpqwq-X555LF:~$ su
密码：
root@smpqwq-X555LF:/home/smpqwq#

输入

curl -fsSL "https://alistgo.com/v3.sh" -o v3.sh && bash v3.sh

就到这样子了

欢迎使用 Alist 管理脚本
1、安装 Alist
2、更新 Alist
3、卸载 Alist
-------------------
4、查看状态
5、重置密码
-------------------
6、启动 Alist
7、停止 Alist
8、重启 Alist
-------------------
0、退出脚本

请输入选项 [0-8]:

点1

这时候让你填代理

如果你碰巧可以上Github或者有魔法环境，直接回车即可

但不行就可以填

1	https://ghproxy.net/

或者上网搜索

运行alist的时候打开浏览器进入alist

最后使用内网穿透，我这里使用Openfrp

Openfrp文档Web应用（HTTP/HTTPS）配置 | OpenFrp Docs

解析域名

我用的是腾讯云的域名

到解析记录 – 添加记录

信息	内容
主机记录	@
记录类型	CNAME
记录值	内网穿透给的DNS

注:如果主机记录有特殊的如abcd，面前也要加的

过一会就可以看见网站了

聊天系统

请到快速上手 | Waline查看，下面是来自那里

欢迎使用 Waline，只需几个步骤，你就可以在你的网站中启用 Waline 提供评论与浏览量服务。

LeanCloud 设置 (数据库)

登录或注册 LeanCloud 国际版 并进入控制台
点击左上角创建应用并起一个你喜欢的名字 (请选择免费的开发版):

创建应用
进入应用，选择左下角的 设置 > 应用 Key。你可以看到你的 APP ID,APP Key 和 Master Key。请记录它们，以便后续使用。

ID 和 Key

国内版需要完成备案接入

如果你正在使用 Leancloud 国内版 (leancloud.cn)，我们推荐你切换到国际版 (leancloud.app)。否则，你需要为应用额外绑定已备案的域名，同时购买独立 IP 并完成备案接入:

登录国内版并进入需要使用的应用
选择 设置 > 域名绑定 > API 访问域名 > 绑定新域名 > 输入域名 > 确定。
按照页面上的提示按要求在 DNS 上完成 CNAME 解析。
购买独立 IP 并提交工单完成备案接入。(独立 IP 目前价格为￥ 50/个/月)

域名设置

Vercel 部署 (服务端)

Vercel

点击上方按钮，跳转至 Vercel 进行 Server 端部署。

注

如果你未登录的话，Vercel 会让你注册或登录，请使用 GitHub 账户进行快捷登录。
输入一个你喜欢的 Vercel 项目名称并点击 Create 继续:

创建项目
此时 Vercel 会基于 Waline 模板帮助你新建并初始化仓库，仓库名为你之前输入的项目名。

deploy

一两分钟后，满屏的烟花会庆祝你部署成功。此时点击 Go to Dashboard 可以跳转到应用的控制台。

deploy
点击顶部的 Settings - Environment Variables 进入环境变量配置页，并配置三个环境变量 LEAN_ID, LEAN_KEY 和 LEAN_MASTER_KEY 。它们的值分别对应上一步在 LeanCloud 中获得的 APP ID, APP KEY, Master Key。

设置环境变量

注

如果你使用 LeanCloud 国内版，请额外配置 LEAN_SERVER 环境变量，值为你绑定好的域名。
环境变量配置完成之后点击顶部的 Deployments 点击顶部最新的一次部署右侧的 Redeploy 按钮进行重新部署。该步骤是为了让刚才设置的环境变量生效。

redeploy
此时会跳转到 Overview 界面开始部署，等待片刻后 STATUS 会变成 Ready。此时请点击 Visit ，即可跳转到部署好的网站地址，此地址即为你的服务端地址。

redeploy success

绑定域名 (可选)

点击顶部的 Settings - Domains 进入域名配置页
输入需要绑定的域名并点击 Add

Add domain
在域名服务器商处添加新的 CNAME 解析记录

Type Name Value

CNAME example cname.vercel-dns.com
等待生效，你可以通过自己的域名来访问了🎉
- 评论系统：example.yourdomain.com
- 评论管理：example.yourdomain.com/ui
success

Type	Name	Value
CNAME	example	cname.vercel-dns.com

HTML 引入 (客户端)

在你的网页中进行如下设置:

导入 Waline 样式 https://unpkg.com/@waline/client@v3/dist/waline.css。

创建 <script> 标签使用来自 https://unpkg.com/@waline/client@v3/dist/waline.js 的 init() 函数初始化，并传入必要的 el 与 serverURL 选项。

el 选项是 Waline 渲染使用的元素，你可以设置一个字符串形式的 CSS 选择器或者一个 HTMLElement 对象。
serverURL 是服务端的地址，即上一步获取到的值。

<head>
  <!-- ... -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@waline/client@v3/dist/waline.css"
  />
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="waline"></div>
  <script type="module">
    import { init } from 'https://unpkg.com/@waline/client@v3/dist/waline.js';

    init({
      el: '#waline',
      serverURL: 'https://your-domain.vercel.app',
    });
  </script>
</body>