Web01 如何用Hexo创建静态博客网站

本文最后更新于：2024年11月22日晚上

用Hexo创建静态博客网站

简介

本网站是基于github-page，无需自建服务器^[1]。

优点：
- 免费
缺点：
- 无法实现客户端到服务器的数据传输(?没试过)
- 网站代码公开

首次创建网站

直接参照网站1，它详细讲解了创建方法。它是基于hexo创建的，即将md文件转换为html网页。
如果想更换hexo主题，可以参照网站2
Markdown语法参见GitHub官方文档，或者菜鸟教程。Typora用起来是真香，和word一样可见即所得。

需要注意的内容

hexo初始化需要保证是空目录，否则报错
发现" https://olivetien.github.io/ "显示404。原因根目录没有index.html。应该将public文件夹推送上去，而不是将整个项目目录推送上去
我打算直接将源码推送到github.io项目，在外面新建一个重定向的index.html，但是不行，邮件提示报错。因此改回原来的双respectory方式

修改网站内容

基本步骤

用vscode打开本地源码目录，修改内容
- 用hexo new post "(new_post_title)"新建一篇文档
根目录打开终端
- 输入“hexo s”，启动服务器。此时可以实时修改并查看效果
- 输入“hexo clean”清理之前生成的内容，输入“hexo g”编译，生成到public
清除目标仓库的原有代码(别把.git和readme给删了)，将public中的代码复制到目标仓库，用github客户端推送两个respectory
推送完成后，等待2分钟(等网页更新)

图片

插入图片可以用markdown格式，注意别忘记"!"(否则显示为超链接)

第一种方式：绝对路径
![img](https://olivetien.github.io/2023/11/23/How-to-create-a-personal-homepage/img.png)
第二种方式：相对于source目录的路径（我将图片放在 ./source/img/posts/ 下）
![img](img/posts/img.png)

也可以用hexo格式（仅对 material 主题有效？）

1	`{% asset_img img.png This is an example image %}`

（2024年11月22日更新）
做出了如下修改：

将主题从 material 切换成 fluid
修改了config.yml中对博客的显示路径

1 2	`# permalink: :year/:month/:day/:title/ permalink: :title/`

因此图片统一采用相对于source目录的路径

封面图

封面图（thumbnail）直接放在博客同名文件夹，命名为thumbnail.jpg即可

如果thumbnail不显示，首先应检查是否在_config.yml中设置post_asset_folder为true，此外检查路径是否输入正确

高级玩法

添加自定义文件

在./source/中添加文件夹和文件即可。注意如果添加的是空文件夹，编译时会自动删除，因为用不到。

你也可以添加进主题的source文件夹中。

添加自定义html页面并防止被hexo渲染

理论上，可以在source文件夹中放任何文件，它会映射到对应目录。但如果是md或html文件，会被hexo处理导致无法正常显示。如何避免被hexo渲染：

法一：
编辑hexo配置文件_config.yml，在skip_render位置添加属性：

1
2
3

skip_render: 
    - ./HTML/**
    # 表示HTML文件夹里面的所有内容都不会被hexo渲染

但自己测试发现不起作用

法二：在每个html前加上

---
layout: false
---
解决的。渲染时会自动去掉这些

添加Javascript代码

要想在md中添加JS代码，只需要添加html代码即可。以下是一个按钮示例：

按钮的md源码：

<div id="phaser-catch-the-cat"></div>
<button id="phaser-catch-the-cat-load-button">点击加载游戏</button>
<script>
  document.getElementById('phaser-catch-the-cat-load-button').addEventListenerclick', function () {
    document.getElementById('phaser-catch-the-cat').innerHTML = '<iframe dth="100%" height="600" src="https://ganlvtech.github.io/phaser-catch-the-cat/dex.html"></iframe>';
    this.remove();
  });
</script>

添加网页计数器

添加如下代码

1
2
3

<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <span id="busuanzi_container_site_pv">本站总访问量<span id="busuanzi_value_site_pv"></span>次</span>

如果要应用到全局，可以修改themes/hexo-theme-material/layout/layout.ejs的模板文件
它统计的实际是该域名下的点击量(例如olivetien.github.io\下所有网页)，因此每点击一篇文章都会导致记录加1

前面提到模板文件使用ejs格式。ejs是"E" javascript的速写，这里"E"可以理解为easy/elegant等单词。它在html中嵌入脚本，实现批量生成html的功能

添加评论

使用gitalk。

首先需要注册github app，每个评论的人都需要登录该app。注册方法参照如下教程

Gitalk配置教程 | YuanLiChenAi

然后修改配置文件，参照如下教程。material自带预设，不需要自己写ejs代码，只需修改配置文件即可

hexo-theme-material | Easy Hexo 👨‍💻

可是总是出现error not found的问题，参照以下链接，看F12解决

(3 封私信 / 31 条消息) Gitalk 错误码Error: Not Found.？ - 知乎 (zhihu.com)

又出现Error: Validation Failed.

搜索gitalk，关键信息位于\layout\_widget\comment\gitalk\main.ejs和enter.ejs中。在main.ejs中有如下代码

<script>
    var gitalk = new Gitalk({
            clientID: '<%= theme.comment.gitalk_client_id %>',
            clientSecret: '<%= theme.comment.gitalk_client_secret %>',
            repo: '<%= theme.comment.gitalk_repo %>',
            owner: '<%= theme.comment.gitalk_owner %>',
            admin: ['<%= theme.comment.gitalk_owner %>'],
            distractionFreeMode: false
        })
   gitalk.render('gitalk-container')
</script>

参照教程Gitalk Error: Validation Failed._gitalk正则报错-CSDN博客的分析，问题的原因是该代码没有配置必要参数id和title，导致生成issue时自动生成了很长的id，超出了新版github对id字符数的限制（50字符）。解决方法是添加这两项

1 2	`id: 'Github Page Comment' title: 'Github Page Comment'`

虽然能成功评论了，但是所有博客共用评论，这不是我想看到的。于是参照博客不知道的痛 - 博客园，采用md5，根据每个博客的路径（location.pathname），生成唯一的id。代码如下，注意需要导入文件/files/js/md5.min.js

<script src="/files/js/md5.min.js"></script>
<script>
    var gitalk = new Gitalk({
            id: md5(location.pathname),
            clientID: '<%= theme.comment.gitalk_client_id %>',
            clientSecret: '<%= theme.comment.gitalk_client_secret %>',
            repo: '<%= theme.comment.gitalk_repo %>',
            owner: '<%= theme.comment.gitalk_owner %>',
            admin: ['<%= theme.comment.gitalk_owner %>'],
            distractionFreeMode: false,
            title: 'Github Page Comment'
        })
   gitalk.render('gitalk-container')
</script>

md5简介：md5是消息摘要算法，任意长度的消息经过处理都会生成相同长度的字符串。MD5的用途有：防止信息被篡改，防止直接看到明文，添加数字签名等

经过以上操作，每篇文章的issue都是独立的了。但还需要做初始化操作，否则访客看到的页面是“未找到相关的issues进行评论，请联系@OliveTIen初始化创建”。初始化操作为，登自己的账号，把每个博客浏览一遍，这样每个博客首次加载时都会自动初始化issue

其他

添加live2d参见文章Web04

更多高阶玩法参见Lei Mao的GitHub博客教程，这是他的GitHubPage仓库(ganlvtech.github.io)，这是他的博客源码

how to create personal homepage using Node.js

how to install fluid theme

问题

hexo无法使用的问题

有时候很长时间没碰博客了，再次输入hexo命令时，找不到命令(无法将“hexo”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。)
进入C:\Users\tgl\AppData\Roaming\npm，输入hexo有效果
将该目录添加进系统环境变量
进入源码目录，打开Git Bash，输入hexo，出现INFO Validating config，然后显示版本信息
在Git Bash中输入hexo generate hexo clean hexo server，有效果

找不到博客内容

为什么leetcode、how-to-clear-usb-history被404了？
- 原来是大小写问题。我将标题首字母改为大写，然后push到github，但是实际上github上这部分代码没有更新(因为目录不区分大小写，而hexo链接跳转时区分大小写)。
- 解决措施是将github文件夹删除后push，再添加后重新push。此外也可以通过修改文件名来解决

https://www.zhihu.com/question/462149457
↩

web

#web

Web01 如何用Hexo创建静态博客网站

http://olivetien.github.io/03-05-web/Web01-How-to-create-a-personal-homepage/

作者

Olive Tien

发布于

2023年11月23日

许可协议

HPC01-cmake01 上一篇

写在前面下一篇