LITREILY

安装部署-VBlog

2024-04-10web

选择Hexo的理由

Hexo 是一款基于 Node.js 的静态网站生成器，拥有丰富的插件生态和主题，可以用于快速创建博客和文档网站，并且通过简单的命令就能将生成的网页上传到 GitHub Pages 上。Hexo具有以下特点：

  • 静态网站生成： Hexo 生成纯静态 HTML 文件，无需服务器端渲染，从而提高性能。
  • Markdown 支持： 支持 Markdown 语法，允许用户轻松撰写内容。
  • 主题系统： 提供广泛的主题选择，用户可以自定义网站的外观和布局。
  • 插件生态系统： 拥有丰富的插件，可扩展 Hexo 的功能，添加各种特性，如社交分享、搜索功能等。
  • 命令行界面： 通过命令行界面管理网站，提供简洁高效的工作流程。

页面展示 - 首页

image-20240410135730844

页面展示-归档

image-20240410144016108

页面展示-分类/标签

image-20240410144052030

image-20240410144103768

页面展示-关于

image-20240410144222930

页面展示-详情

image-20240410144932245

页面展示-RSS

该链接可以直接由Fluent Reader等软件进行订阅

image-20240410144303194

页面展示-搜索

image-20240410144434134

Hexo安装

安装基础框架

安装 Hexo

（前提是安装过Nodejs和Git，此处省略）

$ npm install hexo-cli -g

非Windows用户安装

$ brew install hexo

初始化一个项目

$ hexo init blog
$ cd blog

此时项目结构如下：

├── _config.yml  
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
  • _config.yml: 网站配置信息
  • package.json：应用程序版本信息
  • scaffolds：Hexo 会根据 scaffold 来创建文件
  • source：资源文件夹是存放用户资源的地方。除 _posts 文件夹之外，开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹，而其他文件会被拷贝过去。
  • themes：主题文件夹。Hexo 会根据主题来生成静态页面。

启动服务

默认端口4000

$ hexo server

安装主题

主题可以在Themes | Hexo网站找，找到心仪的主题后可以将其代码拉下来并放在themes文件夹下

然后根据主题教程进行配置。本博客的主题：snark

同时记得将主目录下的 _config.yml 文件中的 theme修改为主题名称

安装搜索插件

需要在主目录下安装 hexo-generator-search 这款插件。（指令在主目录输入，不是主题所在目录）

npm install hexo-generator-search --save

然后修改博客根目录下的 _config.yml
其中中search.xml会在生成代码时候自动创建

search:
  path: search.xml

安装RSS插件

需要安装 hexo-generator-feed 插件来生成。

npm install hexo-generator-feed --save

同样也需要修改主目录下的 _config.yml

feed:
    type: atom
    path: atom.xml
    limit: 20
    hub:
    content: true
    content_limit: 140
    content_limit_delim: ' '
    order_by: -date

自定义代码高亮

要使用自定义代码高亮，可以先访问该网站 并选择自己需要高亮的语言以获取最佳的体验。下载下来的压缩包中找到 highlight.pack.js 文件，将其重命名为 highlight.min.js 后替换放入 /source/js/ 文件夹下，然后关闭自带的 highlight。

highlight:
    enable: false

如果需要其他主题高亮，需要修改 _config.yml 中的配置。

syntax:
  enable: true
  global: true
  theme: xcode

部署

  1. blog 仓库与远端仓库绑定

    git remote remove origin
git remote add origin 你的仓库地址

  2. 安装部署插件

    npm install hexo-deployer-git --save

  3. 生成代码

    hexo g

  4. 部署到远程(可能需要输入GitHub账号密码)

    修改部署配置文件

    url: http://marigweizhi.github.io
root: /
deploy:
  type: 'git'
  repo: https://github.com/MarigWeizhi/marigweizhi.github.io.git
  branch: master

    开始部署

    hexo d

  5. GitHub配置

    仓库名称必须为：用户名.github.io
1. 进入仓库设置 -> 仓库名称设置为 用户名.github.io
2. Pages -> Branch 选择 提交的代码分支，点保存，等待1分钟自动部署静态页面到 用户名.github.io

遇到的问题

图片显示异常

安装相关插件

npm install https://github.com/CodeFalling/hexo-asset-image --save
# 最好不要用下面的指令，最后生成的路径会有问题
npm install hexo-asset-image --save

修改配置

post_asset_folder: true

将图片存放在.md文件同级的同名文件夹下，并引用

引用方式如下图所示

image-20240410160419016

修改完成，重新启动即可

hexo clean
hexo g
hexo s

ps: 尽量不要有中文路径，本地没问题，远程也有可能出问题

前端报错，资源文件路径错误

<script type="text/javascript" src="/marigweizhi.github.io/plugins/highlight/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

检查发现是配置文件的root配置错了，修改成/后，重新生成代码hexo g 重新部署hexo d 修复

<script type="text/javascript" src="/plugins/highlight/highlight.min.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

文章多标签

使用数组表示即可

tags: ['bug','406']

语法警告

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($mobile-head-height, 2) or calc($mobile-head-height / 2)

找到代码所在位置 将$mobile-head-height / 2 改为 calc($mobile-head-height / 2)即可

博客更新流程

  1. 创建新文章，设置分类标签，并编辑内容

    hexo new "My New Post"

  2. 生成代码

    hexo g

  3. 启动服务，本地检查内容格式

    hexo server

  4. 部署到Github

    hexo d

参考链接

官方文档 | Hexo

本文作者：Marig_Weizhi
本文链接：http://marigweizhi.github.io/2024/04/10/init-VBlob/
版权声明：本博客所有文章除特殊声明外，均采用 CC BY-NC 4.0 许可协议。转载请注明出处 Marig_Weizhi的博客！
blogappconfig