在Github上搭建自己的个人博客

搭博客~~

前期准备

Github账号

需要有一个GitHub账号，没有的话到 官网 申请一个。

Git

在自己电脑上安装好Git，hexo部署到GitHub时要用

Node.js

官网下载地址：https://nodejs.org/zh-cn/download/

打开cmd窗口，执行命令 node -v 查看node版本

如果出现了系统找不到node，可以在系统环境变量中添加

在安装node的同时也安装了npm，执行 npm -v 查看npm版本

创建仓库

在GitHub上创建一个新的代码仓库用于保存我们的网页

填写仓库名，格式必须为<用户名>.github.io，然后点击Create repository

点击creating a new file创建一个新文件，作为我们网站的主页

首先确定分支，然后重新打开设置GitHub Pages中找到我们主页的地址为 https://remixxyh.github.io/3xsh0re.github.io/

安装Hexo

我们采用Hexo来创建我们的博客网站，Hexo 是一个基于NodeJS的静态博客网站生成器，使用Hexo不需开发，只要进行一些必要的配置即可生成一个个性化的博客网站，非常方便。点击进入 官网。

安装 Hexo

npm install -g hexo-cli

查看版本

hexo -v

解决报错

hexo : 无法加载文件 C:\Users\DELL\AppData\Roaming\npm\hexo.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:
/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1

打开开发者选项

成功解决

创建一个项目 hexo-blog 并初始化，踩雷，不能在盘根目录下创建，要建立二级目录才行

hexo init hexo-blog
cd hexo-blog
npm install
hexo g
hexo server

浏览器访问，默认路径http://localhost:4000，页面默认主图风格如下

更换使用Fluid主题

下载 最新 release 版本 解压到 themes 目录，并将解压出的文件夹重命名为 fluid

如下修改 Hexo 博客目录中的 _config.yml：

theme: fluid  # 指定主题
language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改

首次使用主题的「关于页」需要手动创建：

hexo new page about

创建成功后，编辑博客目录下 /source/about/index.md，添加 layout 属性。

修改后的文件示例如下：

---

title: about
date: 2023-08-09 19:20:33
layout: about
---

博客部署到Github

安装hexo-deployer-git

npm install hexo-deployer-git --save

修改根目录下的 _config.yml，配置 GitHub 相关信息

deploy:
  type: git
  repo: https://token@github.com/remixxyh/remixxyh.github.io.git #免密push
  branch: main
  token: 你的token

执行命令完成部署，可能出现一些git的报错，自寻搜索即可解决

hexo g -d

图片插件

插件hexo-renderer-marked解决了这个问题。可以只用npm install hexo-renderer-marked命令直接安装，之后在根目录下的config.yml中更改配置如下：

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

之后就可以在使用![](image.jpg)的方式愉快的插入图片了

个性化fluid

个性化页面

修改themes/fluid下的_config.yml，这是主题相关的配置文件

修改浏览器标签

修改导航栏title

搜索：navbar

修改欢迎字样

搜索：slogan

修改关于页面

在配置文件里搜索：about，即可修改关于页面；图片资源在hexo-blog\themes\fluid\source\img文件夹里添加修改

效果：

添加live2d桌宠

安装插件

首先我们需要安装一个插件，用于在hexo里使用live2d

npm install --save hexo-helper-live2d

下载安装live2d模型

通过npm install npm install --save live2d-widget-model-xxx来安装你喜欢的模型

比方说我喜欢的是小猫猫，那就使用npm install npm install --save live2d-widget-model-tororo进行安装

模型预览

模型Github地址

安装后我们在根目录下的node_modules目录下面找到live2d-widget-model-tororo这个文件夹，把这个文件夹复制下来，找到我们的hexo博客的根目录（也可以在根目录新建一个文件夹专门存放模型），把刚刚我们复制的文件粘贴过来

添加配置文件

在根目录下的_config.yml配置，这样以后换了主题就不用重新配置了，注意在model那里填写自己的模型文件名称

live2d:
  enable: true  # 是否启动
  scriptFrom: local # 默认
  pluginRootPath: live2dw/  # 插件在站点上的根目录(相对路径)
  pluginJsPath: lib/  # 脚本文件相对与插件根目录路径
  pluginModelPath: assets/  # 模型文件相对与插件根目录路径
  tagMode: false  # 标签模式, 是否仅替换 live2d tag标签而非插入到所有页面中
  debug: false  # 调试, 是否在控制台输出日志
  model:
    use: live2d-widget-model-tororo ## 模型文件
  display:
    position: right # 定位方向 left right top bottom
    width: 150  # 小人宽度
    height: 300 #  小人高度
    hOffset: -15  # 向 偏移
    vOffset: -15  # 像 偏移
  mobile:
    show: true  # 手机端是否显示
  react:
    opacity: 0.7  # 模型透明度

添加到文件末尾即可：

然后你就成功拥有一只小猫啦！

数学公式

步骤1:卸载hexo-math

  在你的Hexo框架的blog根目录下打开终端，输入以下指令:

npm uninstall hexo-math --save

步骤2:安装hexo-filter-mathjax

  同样在你的blog根目录下，安装插件:

npm install hexo-filter-mathjax  --save

步骤3:在全局配置中配置公式渲染

   在你的Hexo框架的blog根目录下打开_config.yml文件，在文件中加入如下内容:

mathjax:
  tags: none # or 'ams' or 'all'
  single_dollars: true # enable single dollar signs as in-line math delimiters
  cjk_width: 0.9 # relative CJK char width
  normal_width: 0.6 # relative normal (monospace) width
  append_css: true # add CSS to pages rendered by MathJax
  every_page: false # if true, every page will be rendered by MathJax regardless the `mathjax` setting in Front-matter

各个参数的用处可以看代码注释。没有特别需求基本不需要更改。

步骤4:需要公式的博客文章启用公式渲染器

在你写的，需要使用公式的markdown文档的front-matter中添加一个参数：

mathjax: true

以本博客的front-matter为例:

---
title: 在Github上搭建自己的个人博客
date: 2022-12-09 10:01:49
categories: 杂项
tags: [Github博客搭建]
mathjax: true
---

如果你认为给单独一篇文章加参数太麻烦，你也可以在_config.yml文件中刚刚添加的mathjax设定下，把every_page的参数改为ture。