摘要

主要记录一下搭建网站的步骤，以及搭建好之后该怎么修改yml文件，使自己的网站看起来好看些，后期发布文章等等。。。此搭建全程免费，非常的不错（除了更改域名之外)
有什么附加功能大家可以一块在留言区讨论。
🔑 注释：我的内容从许多博客，帖子中汲取

接下来咱们开始进入正题

搭建网站的前置工具

部分内容参考搭建网站

WebStorm

使用WebStorm进行编写代码
在这里插入图片描述
用_VSCODE_也可以。

Hexo

下载完之后，我们用Hexo框架来搭建网站，这个网站中有许多已经搭建好的网站模板主题。

在本文中我们使用_butterfly_主题。
在这里插入图片描述
在搭建此框架之前，咱们需要下载好Nodejs和Git
可以参考Nodejs和Git这两个博客进行下载。

好的，这些东西配置好之后开始搭建网站。

Hexo配置

桌面右击，打开git bash here输入命令安装（默认位置即可，方面后续配置，不建议修改）

1
npm install -g hexo-cli

接下来我们在电脑里自己想要放置博客配置和内容的地方新建一个文件夹：
比如说我在E盘建立了一个penny_blog文件夹，以后所有关于博客网站的内容都放在这个文件夹中。

初始化

接下来在新建立的文件夹下打开 git bash here 输入命令：

1
hexo init

初始化之后，该文件下面会出现以下内容：

这里借用了其他博主的图片。
简单介绍下hexo的文件结构：
public 最终所见网页的所有内容
node_modules 插件以及hexo所需node.js模块
_config.yml 站点配置文件，设定一些公开信息等
package.json 应用程序信息，配置hexo运行所需js包
scaffolds 模板文件夹，新建文章，会默认包含对应模板内容
themes 存放主题文件，hexo根据主题生成静态网页（速度贼快）
source 用于存放用户资源（除 posts 文件夹，其余命名方式为 “ + 文件名”的文件被忽略）
我们日常写文的操作都在 source/_post下。

本地运行

接下来我们用WebStorm打开根目录文件夹（比如说:penny_blog这个根目录文件夹）
然后在终端输入：

1
hexo s

这个s指的是server（本地服务器）

运行之后，会显示
在这里插入图片描述
点击链接 http://localhost:4000（图中黄色下划线位置）进行本地预览，默认是hexo内置的landscape 主题
在这里插入图片描述
在终端按Ctrl+C退出运行。

这个主题挺丑的，接下来我们更换主题，在Hexo themes可以找到许多主题，可以选择你自己喜欢的就行。我觉得butterfly这个主题特别好看，很可爱哈哈，而且功能很多。

好的接下来我们来讲一下更改主题

主题更改

以下内容参考博文butterfly主题配置

安装butterfly主题

  1. 在hexo项目根目录下(penny_blog)下载主题。
    在这里插入图片描述
    在命令端输入：
1
git clone -b master https://github.com/jerryc127/hexo-theme-butterfly.git themes/butterfly
  1. 安装pug 和 stylus 渲染器。
1
npm install hexo-renderer-pug hexo-renderer-stylus --save
  1. 修改项目根目录下的_config.yml文件（称为站点配置文件）

在这里插入图片描述
输入以下命令开启主题

1
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: butterfly

在这里插入图片描述
4. 升级建议
为了減少升级主题带来的不便，我们可以把主题文件夹中的 _config.yml 重命名为 _config.butterfly.yml，复制到 Hexo 根目录下与_config.yml同级。（本人觉得非常好，要不容易报错）
Hexo会自动合并主题中的_config.yml和 _config.butterfly.yml ，如果存在同名配置，会使用_config.butterfly.yml的配置，其优先度较高。所以像和博客网址相关联的固定资料可以设置在_config.yml中，比在这里插入图片描述
如博客的标题、作者信息和邮箱等等资料，而和主题样式相关的配置放在 _config.butterfly.yml 中，那么在将来你想换一个主题是很方便的。
更改好主题之后，
在终端依次输入:

1
hexo clean hexo g hexo s

可以在本地看看更改好的的主题样式，长这个样子
在这里插入图片描述
这张图是本人已经修改了一下yml的配置内容，详细修改内容还是可以看看
butterfly主题配置这个博主写的内容，很详细。

正式上线

接下来我们需要发布自己做的网站，这里要借助github平台

GitHub Pages配置

可以通过github创建网页，而且免费，更新速度极快，刷新github仓库页面，网站也就自动更新了

新建仓库

填写内容如下，特别注意红框位置
在这里插入图片描述
一定要是自己的github的用户名，要不然就用不了哈！！！！
保证仓库public，名称填写正确用户名.github.io，系统自动变更为Pages

在仓库设置中找到Pages

在这里插入图片描述
记住仓库地址，我们会将本地的文件上传到仓库
在这里插入图片描述

SSH密钥配置

如果你是在电脑上第一次使用git，请先配置SSH公钥（一种安全协议，你可以理解为登陆某网站需要的验证码）
可以参考：GitHub SSH配置
配置好ssh之后我们就可以把本地的hexo和github仓库联系起来了

将hexo部署到GitHub

打开站点配置文件 _config.yml，翻到最后有个Deployment，修改内容如下，type和branch按照图片的内容修改就好，然后repository修改成你自己的仓库链接就行，一定要注意每个名称和值之间都有个空格
在这里插入图片描述
如果害怕出错，直接复制我的，然后把repository链接修改成你就行：

1
# Deployment ## Docs: https://hexo.io/docs/one-command-deployment deploy: type: git repository: https://github.com/pennyzhao1507288/pennyzhao1507288.github.io.git branch: master

这个时候需要先安装deploy-git ，也就是部署的命令,这样你才能用命令部署到GitHub。

1
npm install hexo-deployer-git --save

然后在本地根目录下(penny_blog)打开 git bash here 依次执行以下命令:

1
hexo clean //执行此命令后继续下一条 hexo g //生成博客目录 hexo s //本地预览 hexo d //部署项目

注意deploy时可能要你输入username和password。
执行完毕后，所有人就能通过你的用户名+github.io这个域名访问你的网站了。到这儿，我们就成功上线了自己的网站。

个性化设置

想要更改自己网站的一些配置 ，可以看刚刚上文的那个butterfly博文，也可以看butterfly官网的教程：

butterfly教程官网

后续网站更新内容

分类和标签设置

分类（categories）

1、创建“分类”选项

1
hexo new page categories

成功后会提示：

1
INFO Created: ~/Documents/blog/source/categories/index.md
  1. 根据上面的路径，找到index.md这个文件，打开后默认内容是这样的：
1
--- title: categories date: 2024-11-09 08:18:17 ---

这个时间date是系统自动生成的，是你输入命令生成index.md的时间

  1. 添加type: "categories"到内容中，添加后是这样的：
1
--- title: categories date: 2024-11-09 08:18:17 type: "categories" ---
标签（tags）

然后tag标签的创建方法也是如此：

  1. 创建tags选项
1
hexo new page tags
  1. 找到tags一下的index.md
    在这里插入图片描述
    初始内容为：
1
--- title: categories date: 2024-11-09 08:18:17 ---
  1. 添加type
1
--- title: categories date: 2024-11-09 08:18:17 type: "categories" ---
发布文章

接下来为你要发表的博客添加分类和标签
比如说我要发表AI的文章
那么输入命令：

1
hexo n "introduction to AI(1)"

这样子在根目录的source下的_posts下面会生成introduction to AI(1).md
在这里插入图片描述
然后你就可以按照typora的格式进行写文档。
对了，在这个文档中插入图片视频这些的，得用相对路径，你要把这些资源图片视频放在hexo（比如说：penny_blog）根目录的source下的新建文件夹中（我这边是创建了一个AI新文件夹）
在这里插入图片描述
我是现在是在本地其他地方保存了这些图片和视频，然后再复制到hexo根目录的source中，然后生成相对路径内容。
这个转换的脚本可以用以下python代码：

1
import os import sys import shutil import subprocess def hexoimg(img_path): # 获取文件名和扩展名 fname = os.path.basename(img_path) # 目标目录 dest_dir = r"E:\web\penny_blog\source\AI" # 修改为你实际的目录 # 确保目标目录存在 os.makedirs(dest_dir, exist_ok=True) # 复制文件到目标目录 dest_path = os.path.join(dest_dir, fname) shutil.copy(img_path, dest_path) # 生成 Markdown 格式的链接 markdown_link = f"![Image](/AI/{fname})" # 将链接复制到剪贴板（适用于 Windows） subprocess.run("echo " + markdown_link.strip() + "| clip", shell=True) # 输出提示信息 print(f"{markdown_link} Copied to Clipboard :)") if __name__ == "__main__": if len(sys.argv) < 2: print("Usage: python hexoimg.py path/to/your/image.jpg") else: hexoimg(sys.argv[1])

举个例子，在终端输入：

1
python hexoimg.py E:\学习\uni\year3\ai\img\week7_14.png

输出：

1
![Image](/AI/week7_14.png) Copied to Clipboard :)

然后直接粘贴到typora中就可以了
在这里插入图片描述
写好之后在git命令行中依次输入

1
hexo clean hexo g hexo d

就可以在github中更新，然后刷新网站就可以看到了。

搭建网站还有许多需要的知识，后续我再更新网站的时候，会继续分享心得的。

马上更新哈哈

利用giscus配置评论

我们使用Giscus来配置这个评论。
这是一个基于 GitHub Discussions 的评论
这是配置文件giscus
选择 giscus 连接到的仓库。请确保：

  • 该仓库是公开的，否则访客将无法查看 discussion。
  • giscus app 已安装，否则访客将无法评论和回应。
  • Disscussion 功能已在你的仓库中启用。

在这里插入图片描述
以上三个条件满足之后就可以了，然后网页往下翻有生成好的配置：
在这里插入图片描述
然后在_configure_butterfly.yml 文档中找到Comments,use内容改成Giscus

1
comments: # Up to two comments system, the first will be shown as default # Leave it empty if you don't need comments # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk # Format of two comments system : Disqus,Waline use: Giscus # Display the comment name next to the button text: true # Lazyload: The comment system will be load when comment element enters the browser's viewport. # If you set it to true, the comment count will be invalid lazyload: true # Display comment count in post's top_img count: true # Display comment count in Home Page card_post_count: true

然后在下方giscus的部分添加以下配置，用你自己在giscus生成的参数，这里是我的
在这里插入图片描述

1
giscus: repo: pennyzhao1507288/pennyzhao1507288.github.io repo_id: R_kgDONMjCuQ category_id: DIC_kwDONMjCuc4CkIEb light_theme: light dark_theme: dark js: https://giscus.app/client.js option:

配置好之后，我们在博文md最后添加刚刚giscus网页中生成的配置复制到md中（比如说这个AI markdown文件中添加评论）：
在这里插入图片描述

完成之后
继续用

1
hexo clean hexo g hexo d

更新内容到github，然后刷新网页就行了，效果如下：
在这里插入图片描述

markdown中数学公式以及emoji显示

使用以下插件math plugin
在命令行输入

1
npm un hexo-renderer-marked --save npm i hexo-renderer-markdown-it-plus --save

在根目录的 _config.yml 中添加以下内容

1
markdown_it_plus: highlight: true html: true xhtmlOut: true breaks: true langPrefix: linkify: true typographer: quotes: “”‘’ plugins: - plugin: name: markdown-it-mark enable: false markdown-it-emoji markdown-it-sub markdown-it-sup markdown-it-deflist markdown-it-abbr markdown-it-footnote markdown-it-ins markdown-it-mark @iktakahiro/markdown-it-katex markdown-it-toc-and-anchor

然后在_config_butterfly.yml 中的math处修改一下代码
在这里插入图片描述
use处添加为katex
然后在katex里的copy_tex改成true

1
math: # Choose: mathjax, katex # Leave it empty if you don't need math use: katex per_page: true hide_scrollbar: false mathjax: # Enable the contextual menu enableMenu: false # Choose: all / ams / none, This controls whether equations are numbered and how tags: none katex: # Enable the copy KaTeX formula # enable: true copy_tex: true

更多好看的markdown语法可以参考markdown语法
在hexo中的markdown语法和typora有点不同。

————————————————
原文链接：https://blog.csdn.net/m0_69003698/article/details/143652280