本博客配置方案
Yang Li Lv1

记录下本博客的配置方案,以方便之后进行查验,其他人可以参考我的配置。

方案概述

我的博客使用GitHub和hexo的keep主题进行搭建的,依赖数个组件,包括GitHub,hexo,hexo-theme-keep主题,PicX 图床工具,gitalk评论工具等。

GitHub配置

建立一个GitHub仓库用于撰写博客

我的GitHub地址为:https://github.com/yangli-os/yangli-os.github.io
我的博客地址即为:https://yangli-os.github.io
注意:这里的名字尽量采用用户名+github.io的形式以避免出错。

安装相关包

安装Git,配置git ssh,安装Node.js,hexo的操作可以参考文章:https://zhuanlan.zhihu.com/p/26625249

注意:

1.hexo相关的所有指令必须在blog文件夹下进行操作,否则不会执行。
2.配置hexo完成后,在本地localhost:4000测试后,先不用着急hexo d进行推送,我们安装完keep主题再进行推送。
3.如果hexo g出现报错,不建议直接进行hexo d的推送,推送成功会导致github当中的.github和index文件被删除,导致博客崩溃。
出现这种情况建议a.恢复_config.yml的配置文件,输入:hexo new “test”,然后hexo g,hexo d,更新github即可恢复。

下载安装keep主题

进入到blog文件夹下,输入:

1
2
cd theme
npm install hexo-theme-keep

修改配置文件

复制文件路径blog/theme/hexo-theme-keep下的_config.yml文件,更名为_config.hexo-theme-keep.yml,放到blog的主目录下。

_config.yml配置文件说明

_config.yml文件的修改可以说是整个配置的核心了,耗时又耗力。这里先交代几个注意事项:

1.该文件采用的是yml的编写格式,可以使用文本文档的形式打开和编辑,但是注意每一个项目冒号后都有一个英文空格,不加空格会导致报错。
2.更换了主题的配置文件主要是有两个,一个是hexo的_config.yml文件,一个是theme当中的hexo-theme-keep主题的配置文件,这个文件要复制之后改名为:
_config.hexo-theme-keep.yml,原有的theme文件夹下hexo-theme-keep主题的配置文件_config.yml不变。
3.看清配置是在哪个文件下的配置文件。

针对hexo的_config.yml配置文件修改

在blog文件夹下找到_config.yml文件,使用文本文档打开后直接修改,修改的内容有:

1
2
3
4
5
6
7
8
9
10
11
12
# Site
title: YangLi's Blog # 博客标题

# URL
url: https://yangli-os.github.io/ # 博客路径

# 博客的github地址
deploy:
type: git
# 格式:git@github.com:用户名/仓库名.git
repo: git@github.com:yangli-os/yangli-os.github.io.git # 注意地址后要加.git
branch: master

其他的不用动,subtitle,keywords,author之类的不重要,也不建议改,改了很可能报错。

针对_config.hexo-theme-keep.yml的修改

该修改可以参考keep的官方文档:https://keep.xpoet.cn/2020/11/Keep-%E4%B8%BB%E9%A2%98%E9%85%8D%E7%BD%AE%E6%8C%87%E5%8D%97/
这里我只列我定制化的内容和需要注意踩坑的地方。

style

style是博客当中的各种logo和图片,尽量使用svg格式的图,我的图是在https://igoutu.cn/icons/set/svg上下载的。
这些图片可以在blog\themes\hexo-theme-keep\source\images的路径下找到,建议把想要上传的图片放到这个路径下进行配置,hexo会自动同步到github的image文件夹下。

1
2
3
style
# Avatar (You can use local image or image external link)
avatar: /images/饼干.svg # 这里使用自定义的图标了。

social_contact

社交网络链接需要开启首页的First screen才行,文章里面有,这里不做赘述

1
2
3
4
social_contact:
enable: true
links:
weixin: https://raw.githubusercontent.com/yangli-os/image-hosting/master/20220506/xxx.7l2uxquuvwg0.webp

这里我是配置的PicX 图床工具进行的,在线使用地址为:https://picx.xpoet.cn/
网站上有演示教程,很简单。
需要建一个存储图片的github仓,我这里是https://github.com/yangli-os/image-hosting
每次使用可能都需要配置一遍token,然后上传图片,获取复制图片的github外链。

gitalk评论配置

这里说需要另外建一个仓库,其实不需要,可以使用上面图床的仓库,也可以使用自己已有的仓库,在仓库里面点击issues,添加一个评论。
按照:keep官方文档 中的教程在applications 上进行操作
_config.hexo-theme-keep.yml上对应的配置修改如下:

1
2
3
4
5
6
7
8
9
comment:
enable: true
use: gitalk # values: valine | gitalk | twikoo

gitalk:
github_id: yangli-os
repository: image-hosting # Repository name to store issues
client_id: XXX # GitHub Application Client ID
client_secret: XXX # GitHub Application Client Secret

配置完成后,需要执行hexo clean,清空界面文件才可以。
之后在博客底部会出现评论区,需要登陆github才可以正常使用。

我的配置文件

可以点击链接获取我的_config.hexo-theme-keep.yml配置文件:_config.hexo-theme-keep.yml

补充

使用这种方法搭建的博客,实际上使用的是GitHub Page功能,而这个功能对百度和Google的搜索引擎是反爬虫的,所以这上面的文章没办法搜到。
Google想要能搜到的方法:使用Google Search console,添加一个index文件,再添加每一个上传的博客网站(每更新一篇文章,就要去添加一次)
这种方法能够Google到博客的内容了。
但实测以一样的方法上传index文件等无法在百度上实现搜索(能Google为啥百度呢?)。

  • Post title:本博客配置方案
  • Post author:Yang Li
  • Create time:2022-05-07 15:53:06
  • Post link:https://yangli-os.github.io//2022/05/07/本博客配置方案/
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.
 Comments