^-^
Shaw Shai's Blog
博客搭建过程
最近更新：2024-03-19   |   字数总计：2.5k   |   阅读估时：10分钟   |   阅读量：次
记录博客网站的搭建过程。

1 博客搭建

本博客网站的搭建，主要由以下三部分构成：

  • Hexo静态博客框架；
  • GitHub托管静态网页；
  • 阿里云域名购买。

主要参考了知乎大佬的这篇教程：

1
2
GitHub+Hexo 搭建个人网站详细教程
https://zhuanlan.zhihu.com/p/26625249

搭建过程完全按照教程进行。其中须注意的几点：

  1. GitHub创建新仓库托管静态网页，仓库类型必须为public；

  2. hexo init blog命令后，会新建一个blog文件夹，后面的命令均在新建的blog文件夹下执行；

  3. 域名解析和教程中稍有差异；

  4. 更换主题时要先将主题下载到themes文件夹中，next主题地址有更新；

    1
    git clone https://github.com/theme-next/hexo-theme-next themes/next

关于主题的个性化设置暂时还没有做。

2 异地管理

接下来将遇到异地管理问题（比如换了一台电脑）。注意到，在以上过程中托管到GitHub的文件，仅为所发布的网页文件，并非本地的编辑与配置源文件。因此还需要建立仓库来管理源文件。

于是找到这篇教程：

1
2
Hexo+github个人博客搭建+异地管理
https://blog.csdn.net/zwx2445205419/article/details/66970640

其做法是在原仓库新建hexo分支，用于提交源文件。

考虑到原仓库为public，而我希望源文件为private，因此须建立private仓库。大致步骤如下:

  1. 新建仓库名为hexo，设为private；（此处我擅自将分支也改名为hexo）

  2. 在blog文件夹外，将库hexo克隆到本地；（注意public和private库的克隆方式有所区别）

    1
    2
    # 将https:// 改为 git@github.com:用户名/项目名称
    git clone git@github.com:shawshai/hexo.git

  3. 将文件夹blog中所有文件复制到文件夹hexo中，并删除文件.gitignore；

    1
    2
    3
    4
    5
    6
    7
    cd hexo
    # 添加所有变化，工作区->暂存区
    git add -A
    # 暂存区->版本库
    git commit -m "add all hexo files"
    # 本地库->远程库
    git push origin hexo

  4. 此处发现主题文件夹next由于是从GitHub克隆，自动作为子模块，无法正常push到远程仓库hexo，须增加以下命令：

    1
    2
    3
    4
    5
    6
    7
    8
    # 删除Git文件
    rm -r themes/next/.git*
    # 逆初始化模块
    git submodule deinit themes/next
    # 删除.gitmodules中记录的模块信息（--cached选项清除.git/modules中的缓存）
    git rm --cached themes/next 
    # 提交更改到代码库
    git commit -am "Remove next submodule."

    再重复步骤3，Done！

更换电脑后，只要克隆hexo到本地，安装好Node.js和Hexo，在文件夹hexo中继续编辑即可。

1
2
3
4
5
6
7
8
# 下载安装Node.js----[https://nodejs.org/en/download/]
# 检测是否安装成功
node -v
npm -v
# 安装Hexo
npm install -g hexo-cli
# 安装Git部署插件
npm install hexo-deployer-git --save

注意，不需要hexo init，该操作会重置文件_config.yml中的参数。编辑结束后，依旧在当前目录hexo中，hexo部署，git上传即可。

1
2
3
4
5
hexo new <title>  # 创建文章
hexo clean        # 清除缓存
hexo g            # 生成
hexo s            # 启动服务预览
hexo d            # 部署

3 添加评论系统-Gitalk

博客评论系统选择了Gitalk，具体参考了以下链接：

1
2
hexo主题next中gitalk配置与评论初始化
https://www.toimc.com/hexo-usage-3/

只进行到 安装npm依赖项。

另外，也参考了这篇的说明。

4 遇到的问题

后续将继续记录使用过程中遇到的问题，以及解决办法。

4.1 插入图片问题

插入图片是基本需求。

参考了链接，在文件夹hexo中的文件_config.yml中更改设置：

1
post_asset_folder: true

安装插件hexo-renderer-marked:

1
npm install hexo-renderer-marked

目前有两种方式插入本地图片：

  1. 使用markdown语法

    1
    ![图片信息描述](abc.jpg)

    此方法无法控制图片大小，默认占满父容器宽度。Typora中一旦设置图片缩放，便转化成了html语法，部署后图片路径出错，无法显示。

  2. 使用html语法

    1
    <div style="width:50%;margin:auto">{% asset_img abc.png 图片信息描述 %}</div>

    此方法在Typora中无法像显示图像，但能够实现调整网页中图像大小。

    参考了以下链接：

    1
    2
    Hexo 自定义图片大小
    https://www.dazhuanlan.com/2019/10/07/5d9a759c66188/

还是希望能够调整图片大小，因此目前采用了第二种方法。

4.2 异地克隆问题

更换电脑时，将私有库hexo克隆到本地时，本地测试运行重启后页面空白，提示 : 

1
WARN No layout: index.html

检查发现远程私有库hexo中主题文件夹themes\next是空的，没有push上去。

重新克隆主题next即可。完整过程如下：

1
2
3
git clone git@github.com:shawshai/hexo.git
cd hexo
git clone https://github.com/theme-next/hexo-theme-next themes/next

很快发现，上述方案并没有解决问题，因为新克隆的主题next参数配置全部为初始值。

主题文件next无法push的原因：该主题是从Github克隆的，自动作为hexo的子模块。

正确解决方案如下：

先删除其Git文件，然后删除其子模块身份。

1
2
3
4
5
6
7
8
# 删除Git文件
rm -r themes/next/.git*
# 逆初始化模块
git submodule deinit themes/next
# 删除.gitmodules中记录的模块信息（--cached选项清除.git/modules中的缓存）
git rm --cached themes/next 
# 提交更改到代码库
git commit -am "Remove a submodule."

如此，主题文件next便能正常push，后续将不会遭遇此问题。（已补充到第2节异地管理第4步中）

Done.

4.3 还是Git问题

由于时常需要在笔记本和台式机之间切换，在使用Git时遇到一点问题。

目前的策略是，在一端编辑完成，最后一次hexo d之后，执行

1
2
3
git add -A
git commit -m "修改说明"
git push

然后在另一端，开始编辑前，执行

1
git pull

每次编辑始于git pull，终于git push，仓库hexo中只设一个分支，最大程度避免在Git中遇到复杂情况。

然而，这个流程存在问题：有时执行git pull后发现拉取的文件不全，远程库中某些文件没有更新到本地。

这是由于本地内容有更改，所以没有pull成功。添加以下命令实测有效：（参考链接）

1
2
git stash		# 储存本地修改
git pull

Done.

4.4 LaTeX支持

数学公式的显示是必需的。配置参考链接如下：

数学公式显示

https://xu-jinzhong.gitee.io/2020/03/17/maths-formula-display/

4.4.1 开启mathjax

进入目录 ~\themes\next，编辑 _config.yml ，修改如下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Math Formulas Render Support
math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true
    cdn: //cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML

4.4.2 新建博客添加 mathjax

在带有公式的博客开头添加 mathjax:true 即可，类似如下内容

1
2
3
4
5
title: Hello, World!
date: 2021-04-24 21:34:56
tags: hello
mathjax: true
typora-root-url: hello-world

4.4.3 解决语义冲突

由于 LaTeX 与 markdown 语法有语义冲突，Hexo 默认的转义规则会将一些字符进行转义。比如 _ 转为 <em> ，用于表示斜体或加粗，这就导致公式中带下标时无法正常显示。参考了以下两个博客的解决方案。

在任意的hexo主题支持数学公式 - Gary's Blog (myblackboxrecorder.com)

Hexo 下 LaTeX 无法显示的解决方案 | Scott'Log (zealscott.com)

解决方案是取消对这些语义冲突的字符的转义。

主要操作为其中的两个步骤：

  1. 更换默认渲染引擎为 kramed

    1
    2
    npm uninstall hexo-renderer-marked --save
    npm install hexo-renderer-kramed --save

  2. 更改转义规则

    在博客根目录下，进入node_modules\kramed\lib\rules\inline.js。

    把第11行的escape变量的值做相应的修改：

    1
    escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,

    改为：

    1
    escape: /^\\([`*\[\]()$+\-.!>])/,

    这里，我比参考博客里多删了 # 和 _ 字符，因为在编辑包含 # 和 _ 的公式时出现编译错误，这样修改后得到解决。同理，其它类似的语义冲突问题也要修改这里。

    同时把第20行的 em 变量也要做相应的修改：

    1
    em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

    改为

    1
    em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

以上即可解决语义冲突的问题。另外，还可以参考两个博客，更换 MathJax 的 CDN 链接。

4.5 插入视频

要在博客中插入视频文件，需要知道如何在HTML中插入视频。

参考了文章“HTML怎么添加视频？附三种方法！”中的方法一：

<video></video>标签是 HTML5 的一个新特性，它用于在 HTML 页面嵌入视频元素。具体使用方法如下：

1
2
3
<video controls >
     <source src="视频路径" type="video/视频格式">
</video>

只需要把视频文件放在markdown文件对应的资源文件夹中，然后将上面的“视频路径”替换为视频文件名即可。例如要添加的视频为 hello.mp4 ，只需将其放入资源文件夹，然后

1
2
3
<video controls >
     <source src="hello.mp4" type="video/mp4">
</video>

即可。非常方便。

另外，Typora中也可以通过这种方法插入视频。

4.6 英文引号渲染为中文引号的问题

文件中使用英文引号时，Hexo 渲染到网页上，会自动变成中文引号，出现左右引号混乱的问题。

参考了以下博客中的解决方案。

MyBlog(02) 问题：英文的引号显示成中文了 | 冬天里太阳 (wyscjm.github.io)

在 Hexo 根目录下的站点配置文件 _config.yml 添加如下代码即可解决。

1
2
3
4
5
6
7
8
9
10
11
12
13
# 引号问题关闭各种渲染器
# 默认 hexo-renderer-marked 渲染器
# hexo-renderer-kramed 渲染器。
# hexo-renderer-markdown-it 渲染器
marked:
  smartypants: false
kramed:
  smartypants: false
markdown:
  render:
    typographer: false
markdown-it-plus:
    typographer: false
2021-04-24 该篇文章被 少帥 打上标签: hexo github 归为分类: 记录

上一篇：Qt 环境配置 下一篇：Hello, World!
© 2021-2024 China
摆脱冷气 只向上走