使用hexo在github和gitee上搭建个人博客

博客 gitee github
网站开发
发布日期:   2023-09-22
更新日期:   2023-09-28
文章字数:   2.1k
阅读时长:   8 分
阅读次数:  

1 hexo框架搭建

1.1 了解hexo

首先，介绍一下hexo,这是一个专门用于博客类网站的开源项目，类似于之前的wordpress。
hexo中文官网：hexo.io GitHub 地址 https://github.com/hexojs/hexo

1.2 hexo依赖环境Node.js的安装

Hexo 是使用 Node.js 开发的，所以我们安装 Hexo 之前需要先安装 Node.js 环境。
下载Node.js
Node.js 中文官网：nodejs.org
安装
默认安装即可。
测试是否安装成功：
命令行输入，或git bash终端输入

npm -v

正常会输出版本号，我装的是10.1.0

1.3 hexo依赖环境Git

已安装，不再赘述，可参考网络文章自行安装，包括用户名及邮箱的配置，ssh公钥私钥的生成，及将公钥配置到github或者gittee.

1.4 安装Hexo

  1. 本地磁盘新建一个文件夹，例如hexo.
  2. 进入hexo目录，gitbash进入此目录，输入以下命令：
    #安装hexo框架
npm install -g hexo-cli
#初始化文件夹
hexo init
#安装 hexo 依赖包
npm install
  3. 查看本地博客效果
    #生成静态网站
hexo g
#启动服务器
hexo s
    打开浏览器，输入http://localhost:4000 显示博客主页。

1.5 更换Hexo博客主题

  1. 在github官网搜索hexo-theme
  2. 将喜欢的主题仓库clone到hexo/themes下
  3. 修改hexo目录下_config.yml文件
    # Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
#theme: landscape
#theme: butterfly
theme: matery

2 在github上搭建

2.1 注册github

官网 github.com，速度比较慢。

2.2 创建github pages仓库

pages仓库也是一个普通的仓库，但是有个特别的地方需要注意
仓库：<用户名>.github.io
属性必须是public。
其他创建过程与创建普通仓库一样。

2.3 测试github pages页面

  1. 在仓库目录下创建一个index.html文件，内容如下
    <h1>hello my blog !</h1>
  2. 浏览器打开https://<你的用户名>.github.io,可以查看到hello my blog !字样，即说明github pages 仓库搭建成功。

2.4 github pages发布

2.4.1 手动发布

如果你是前端的开发人员，就可以直接将github远程仓库的代码跟本地关联

2.4.2 hexo自动发布

利用hexo的发布插件，我们只需要修改markdown格式的文档，hexo将自动装换位静态网页。

  1. 安装插件
    npm install hexo-deployer-git
  2. 配置 hexo目录下_config.yml文件
    # 其中 xxxxxx 是前面多次用到的你的GitHub用户名
deploy:
  type: git
  repo: git@github.com:xxxxxx/xxxxxx.github.io.git
  branch: main
  3. 编写一篇文章
    hexo new "[文章名称]"
    会在hexo/source/_post/目录下生成[文章名称].md。如果使用hexo的发布机制，需要学习markdown的几个简单语法，比如标题，代码块等等，还有很多高级功能需要自己去发现，学习，使用。
  4. 发布
    # 注意最后变成d了，原来的s表示服务起在本地，现在的d表示部署在远端
hexo g && hexo d

3 在gitee上搭建

3.1 注册gitee账号

官网，https://gitee.com/，自行注册账号， 此处不赘述。

3.2 创建gitee pages 仓库

  1. 首先创建一个普通的仓库，创建一个空白仓库后，记得在创建页面添加readMe文件（这一点很重要，否则【服务】中没有gitee pages选项），然后选择服务中的gitee pages选项。这时你会发现需要你进行账号实名。
  2. 根据gitee要求上传实名验证的照片。
  3. 后续….等我实名认证了再更新…

4 修改主题

4.1 markdown的完美支持

到这里，会发现使用markdown编写的文章，与注释相关的显示会不正常，此时就需要参考主题文件下的_config.yml文件提到的

# 图表绘制插件
# 建议更换更换hexo-renderer-markdown-it引擎。参考下面链接
# https://github.com/hexojs/hexo-renderer-markdown-it
# https://github.com/hexojs/hexo-renderer-markdown-it/wiki/Advanced-Configuration
# 使用教程： https://blog.17lai.site/posts/cf0f47fd/#Mermaid
# 安装配置方法
# yarn remove hexo-renderer-marked
# yarn add hexo-renderer-markdown-it hexo-tag-mermaid
# 注意：hexo-renderer-markdown-it 比默认引擎更快，可选择插件较多，请认真看上面两个链接教程。
# mermaid语法教程 https://mermaid-js.github.io/mermaid/#/
# 使用方法：
# 在post文章中填写mermaid语句，需要使用{% mermaid %} 包裹
# {% mermaid %}
# [mermaid 语句正文]
# {% endmermaid %}
# 样例如下所示：
# {% mermaid %}
# graph TD
#     A[Christmas] -->|Get money| B(Go shopping)
#     B --> C{Let me think}
#     C -->|One| D[Laptop]
#     C -->|Two| E[iPhone]
#     C -->|Three| F[Car]
# {% endmermaid %}
# mermaid chart。 依赖hexo-tag-mermaid

其实我们有看懂上面的说明，那个使用教程说的很多，并没有解决所遇到的问题，但是找到了其他的办法：
修改hexo目录（非主题目录）下的_config.yml文件,将highlight enable设置为false，prismjs enable设置为true

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''

效果就是当前网页显示的效果,highlight.js 默认开启，用作 Hexo 的服务端高亮组件。如果你需要在浏览器端运行 highlight.js，请把它关闭。
PrismJS 默认禁用。启用 PrismJS 前应设置 highlight.enable 为 false。
Hexo 内建的 PrismJS 支持浏览器端高亮（preprocess 设置为 false）和服务器端高亮（preprocess 设置为 true）两种方式。
使用服务器端高亮时（preprocess 设置为 true），只需要在站点引入 Prismjs 的主题（CSS 样式表）即可；而使用浏览器端高亮时（preprocess 设置为 false），需要将 JavaScript 文件也引入。

valine使用方法

4.2 文章的属性设置

配置选项 默认值 描述
title Markdown 的文件标题 文章标题，强烈建议填写此选项
date 文件创建时的日期时间 发布时间，强烈建议填写此选项，且最好保证全局唯一
author 根 _config.yml 中的 author 文章作者
img featureImages 中的某个值 文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top true 推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
hide false 隐藏文章，如果hide值为true，则文章不会在首页显示
cover false v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg 无 v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password 无 文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc true 是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax false 是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary 无 文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories 无 文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags 无 文章标签，一篇文章可以多个标签
keywords 文章标题 文章关键字，SEO 时需要
reprintPolicy cc_by 文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

下面是例子
在线加密网站 选择SHA256 https://tool.oschina.net/encrypt?type=2

---
title: 文件属性
date: 2023-09-25 16:53:56
author: liming
#img: /source/images/test.jpg
top: false
hide: true
cover: true 
coverImg: /source/images/03.jpg
# password: 1b0f671a4a0674a84c1177bcc590fc6641708DFS7791a6dc25bedc60eddc3b416(乱码不可用)
toc: false
mathjax: false
summary: 这篇文章需要输入密码，请联系作者
categories: Markdown
tags:
  - Typora
  - Markdown
---

5 个人总结体会

主题的配置主要参考主题的readMe文档，而博客网站的配置主要是hexo目录下的_config.yml文件的修改。

6 参考(友情链接)

因为文章主要是为了做一个记录，所以不是很详尽，如果有不明白处，可以联系本人，也可以访问
半亩方塘-博客搭建

加速访问

cloudflare

文章作者: liming
文章链接: https://liming10cm.github.io/2023/09/22/shi-yong-hexo-zai-github-he-gitee-shang-da-jian-ge-ren-bo-ke/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 liming !
博客 gitee github
赏
  目录