2022最新hexo+Github Pages个人博客配置全攻略！

发表于 阅读次数： 本文字数： 8.9k

看朋友们都做了自己的blog，所以心血来潮学一下也来做一个…虽然不一定会经常写，但是先做了再说

作为第一篇文章把整个搭建配置过程的坑什么的记录一下

也正好作为网站的测试了

为了省事直接用了GitHub pages和hexo的静态方案，虽然我自己有服务器，但是用经典的wp的话主题啊插件啊各种配置啊实在是麻烦的要死而且发文章也并不方便…还是得在本地用md写完了再去网站上上传

干脆直接用免费的GitHub pages，然后解析到自己的域名，效果是一样的，GitHub的服务器免费还稳定，又不用担心忘了续费文章丢掉，写文也只需要在本地写完之后用一句命令部署到GitHub就可以自动更新了，倒也挺方便

至于md的本地写作和图片的图床之类的问题，说起来就是另一个要解决的事了，之后再写文总结一下吧…总之来回来去踩了一堆坑看了一万篇文章试了各种办法，总算是找到了比较方便的写文章+配图+上传的方法了（但是以后会多写吗？大概还是…懒癌没得救 pia~

总之我最后的整套方案是这样，本地用typora写文章，图片用picGo做自动处理，阿里云oss做图床储存，可以直接复制图片或者截图，然后在typora里粘贴图片，自动上传到图床并且替换图片链接，然后写完之后用hexo命令一键部署到GitHub pages就ok啦…总的来说还是比较方便的

目前感觉不方便的地方就是新建文章还是需要用命令，然后写完之后还得敲命令部署上传…理论上可以用脚本解决，不过typora好像并不支持插件脚本之类的功能…之后再说啦

网上查到的各种hexo的配置攻略版本新老不一，经常有一些新版本修改了的地方，所以也是遇到了不少麻烦，包括官方的文档好像也有一些更新不及时的地方…总归自己最后实际使用的可以工作的配置都列了出来，希望能作为参考吧

那么这里的日期是2022年2月…这样

安装Node.js,Git

这部分比较简单 官网下载安装就好了

然后配置一下Git的账户和自己的GitHub账号关联（上传GitHub的ssh密钥）

image-20220217205417118

测试一下安装情况

1
2
3
git version
node -v
npm -v

安装Hexo框架

直接用

npm install -g hexo-cli

（npm最好挂梯子 我这里用了clash的TUN模式全局规则代理 不然源很慢 或者你也可以把npm的源换成国内源）

（请无视这里的npm更新提示）

然后初始化我们的网页

创建一个网站的目录，cd过去，打开命令行，执行

hexo init myBlog

这里会从hexo的GitHub上下载代码文件 所以比较慢 和刚才一样 最好挂代理

image-20220217210217187

初始化完成，这里我的文件夹就叫MyBlog

image-20220217210252332

进去看一下 已经自动生成了hexo的文件结构

然后cd进MyBlog这个文件夹，执行一下（不进入网站文件夹直接执行是没法启动的）

hexo s

这句代码是在本地启动服务器预览网站 Windows防火墙会跳联网提示，记得通过

然后进浏览器访问localhost:4000就可以看到初始化的hexo页面啦（没加主题，很丑2333）

image-20220217210548359

好了我们测试完按Ctrl+C退出来把本地服务器关掉

image-20220217210706763

配置GitHub Pages

然后把blog部署到github上

创建一个新的仓库

image-20220217224945020

名字：用户名.github.io 类型公开

image-20220217225111528

看一下设置下面的pages页 当前使用的分支是main 没有问题

然后安装下hexo的github部署插件

还是在刚才hexo项目的目录下面执行

npm install hexo-deployer-git --save

image-20220217225314799

然后修改下目录下面的_config.yml文件 这个就是hexo全局的配置文件啦

先改下最基础的GitHub部署设置 网站设置和主题插件啥的之后再说

image-20220217225604655

拉到最下面 加上这些内容

branch就是刚才设置页面里面的分支（以前的默认都是master 但是现在GitHub的默认分支改成了main，所以这里也要填main…）

中间那个地址就是刚才创建的GitHub仓库的地址 这里应该是用https格式的和ssh格式的都可以

但是我发现用ssh链接的话我的代理似乎不能很好的运作…所以push会失败 于是改成用https格式之后部署成功

image-20220217231228688

image-20220217225822828

链接在仓库主页面的code下面点ssh或者https然后直接复制就可以

然后我们保存配置文件

部署应该就配置好了

运行一下试试

hexo g -d

这个命令是二合一指令，g是generate，意思是生成静态页面（用来上传到GitHub pages用来访问）然后-d是deploy自动部署到GitHub仓库中

上传成功~

image-20220217231308902

然后我们回到GitHub的仓库页面刷新一下 就可以看到网站文件被上传上去了

image-20220217231359032

浏览器输入https://superhostpopo.github.io/尝试访问一下

ok，已经能够正常访问啦

那么最后再把这个页面和我的个人域名做一下解析，就可以用自己的域名访问网站啦

解析个人域名

这里我的域名在腾讯云购买的，所以进入腾讯云控制台，找到dns设置

image-20220217231824116

直接添加一条CNAME类型的记录，这里我是解析到了主域名下面的二级域名，也就是blog.superhostpopo.cn

所以主机记录写的blog 记录值当然是指向我们的GitHub pages的链接

image-20220217231943252

如果要使用主域名的话可以直接添加www主机名和@主机名的解析都指向GitHub pages页面即可

设置完dns解析，接下来要设置GitHub的页面设置把网址指向自己的域名，这里再进入settings页面，直接修改custom domain里面填入我们的个人域名然后save保存

image-20220217232248248

我这里把下面的强制https也打开了，这样访问时候都会使用https链接进行

看到绿色的小箭头，说明域名指向已经成功了

试试在浏览器里输入https://blog.superhostpopo.cn/，也可以成功访问了

但这里还有个小问题，也就是实际上这个设置，是自动在仓库文件里加入了一个CNAME文件说明了实际网址的指向，但当我们使用hexo g -d重新部署的时候，本地文件会覆盖GitHub仓库，导致cname文件失效，所以我们要把这个文件加入到本地hexo项目的source目录下面，这样在hexo重新生成和部署的时候也会照常将这个文件上传进来

image-20220217232619877

image-20220217232847609

直接把这个文件下载保存在source目录下，或者在目录下直接新建一个CNAME文件，里面填上我们的个人域名地址，都是ok的，这样再次部署的时候就不会丢失cname了

image-20220217233048241

这文件里的内容很简单 只有一行

测试新建文章

写一篇文章测试一下

hexo n "测试文章"

image-20220217233250525

会自动在post目录下生成文章的md文件 然后就可以在里面加入内容啦

保存一下，然后还是生成上传

hexo g -d

嗯…等了一会就能看到文章啦 不过好丑（

PS：发现偷懒用GitHub图床的话不爬梯的话看不到图。。GitHub虽然能访问但是GitHub的图片文件就不行 奇奇怪怪的

算了 明天换阿里云吧 也不省这点钱了

PPS：尝试了下网上说的https://cdn.jsdelivr.net加速 然后发现这破玩意也得爬梯…这有个什么用啊（摔 反而更不稳定了

果然还是用阿里云吧

但是总之网站是部署成功啦 剩下的明天再研究了 摸了

配置主题

氪了点金（9快qwq）换了阿里云oss的图床

速度快的飞起

然后开始配主题

用的是GitHub上star最多的Next主题

文档写的也很详细：

http://theme-next.iissnan.com/getting-started.html

这里直接用git安装

image-20220218154803339

直接进入网站目录执行这句

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

编辑：

草死 这个文档上写的是老版的next的库 next已经迁移到了新版仓库 这里

https://github.com/theme-next/hexo-theme-next

命令要用这个

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

部署的时候才发现提示了一下已经迁移了…喂作者更新一下文档啦！

然后再编辑根目录的config.yml文件

把theme改成next就启用主题啦

然后看一下

1
2
hexo clean
hexo g -d

然后刷新一下发现首页只有乱码了啥也没有…

明明试了下hexo s本地看是可以正常显示的…

翻了下配置文件，发现原来是没有改网站域名…导致访问不到正确的文件了

改成自己的域名，再clean然后部署一遍，ok~

image-20220218160119297

image-20220218160145161

主题很漂亮嘛~

然后再做一些细节的主题配置，自己的信息什么的啦

简单的网站信息设置，不细说了

image-20220218165134738

坑：

首先这里语言的问题

按照文档上写的把语言改成zh-Hans（简体中文）

然后发现更新之后语言变的乱七八糟了…草（三声

image-20220218162440121

去网上搜了一下发现…这是个常见问题，原因是…虽然作者在文档里写的都是zh-Hans，但是主题的目录下的语言文件却是zh-CN，所以找不到匹配的文件名自然就乱套啦

所以我们进入\themes\next\languages目录下面，把zh-CN.yml的文件复制一份然后改名叫zh-Hans.yml，ok~

（作者更新一下文档啊喂！！ x2）

然后改一下网站的logo图标

我们先做好180x180，32x32和16x16分辨率的图标，我在网上查到的教程都说要用ico格式的图标，但是这里其实直接用png格式就可以了，hexo默认的图标也是png的，直接用ps做出来就好了，存到\themes\next\source\images文件夹下面

改下\themes\next_config.yml配置文件（这个是主题配置，虽然文件名一样，但是和网站配置是不一样的）

image-20220218164535644

1
2
3
4
favicon:
  small: /images/popo2-16x16.png
  medium: /images/popo2-32x32.png
  apple_touch_icon: /images/popo2.png

分别修改这三个图片文件就好了

主题的布局：

Next主题本身内置有三个子风格，可以用在主题配置里切换

image-20220218171216101

我个人比较喜欢比较简洁的这个啦

侧边栏的头像：

主题配置文件

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/popo.png
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false

把url改成头像文件就行了，这里把头像显示改成了圆形的

添加阅读量统计功能：

感谢下@不蒜子 大佬提供的统计api功能啦

用起来很简单，在主题配置文件里找到这句

1
2
busuanzi_count:
  enable: true

不需要任何配置，改成true，启用即可，真的非常的简单

（查了一下其他各种网站提供的统计api真的是…一个比一个复杂，需要各种注册各种绑定id。麻烦死啦。dalao的api只需要一个开关就可以提供统计了，真的很感谢，太厉害啦）

image-20220218172500760

效果也很不错嘛

加入本地搜索：

安装插件

npm install hexo-generator-searchdb --save

编辑网站配置文件，加入下面这段在最后

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

编辑主题配置文件，搜索这句配置打开

1
2
3
# Local search
local_search:
  enable: true

加入latex公式支持：

这真的是个大坑…坑了我好半天。查了各种资料 总算成功了

首先吧我们编辑主题配置文件，打开mathjax选项

1
2
3
4
mathjax:
  enable: true
  # See: https://mhchem.github.io/MathJax-mhchem/
  mhchem: false

然后默认的渲染器并不能支持mathjax，所以卸载然后替换成另一个兼容的渲染器

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

最后还得在编写的文章的头部加上math支持的开关

image-20220218180538675

然后重新部署运行下，总算可以正常显示latex公式啦~

image-20220218180604350

关于其中的坑啊…首先配置文件里面有好几个mathjax的选项卡，但是只有math:下面的那个的enable才是有用的，别改错了

然后网上的支持渲染器有很多，如果用mathjax的话，就是hexo-renderer-kramed或者hexo-renderer-pandoc，但是后者我用起来会报错，前者是可以成功的

至于如果你用katex的话，需要选择其他的渲染器，这里我mathjax好不容易调成功了就不费劲去改其他的了所以不管了

最后记得在文章里打开公式支持…哎，一言难尽啊

安装字数统计：

安装插件

npm install hexo-symbols-count-time --save

修改站点配置文件添加

1
2
3
4
5
6
# 文章字数统计
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

修改主题配置文件打开

1
2
3
4
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true

ok啦可以看到阅读时长和文章字数

image-20220218182136822

ps：感觉这个阅读时长功能没个卵用…关掉，只留下了字数统计

1
2
3
4
5
6
# 文章字数统计
symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

配置标签和关于：

hexo支持标签和分类两个文章分类功能…但是这俩我感觉，功能差不多，有点重复

所以就只开了标签，分类就不用了

先创建标签页面：

hexo new page tags

然后修改这个页面，在\source\tags\index.md

里面改成这样

1
2
3
4
5
---
title: Tags
date: 2022-02-18 19:03:24
type: "tags"
---

关掉保存

再修改主题配置里面的menu部分，直接把tag行的注释取消即可

tags: /tags/ || fa fa-tags

然后在写文章的时候只要在文章头里打上标签

1
2
3
4
5
title: 测试文章
date: 2022-02-17 23:32:38
tags:
- 测试
- 网站

注意这里的格式：

短横线后面记得加空格

每一个tag占一行

一个文章可以有任意个标签

然后就可以在网站的标签页面里按照标签对文章分类了

image-20220218192525823

然后添加关于页面

和标签页面相同，先创建about页面

hexo new page about

同样修改about目录下的index.md

1
2
3
4
title: 关于我
date: 2022-02-18 19:03:14
type: "about"
#这里写关于正文内容

修改主题配置文件，打开about行

1
2
3
4
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags

此时在主页点击关于就可以看到自己的关于页面了

修改代码高亮风格：

改成暗色模式，修改主题配置文件如下

顺便把一键复制代码的功能也打开

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: false
    # Available values: default | flat | mac
    style:

效果不错~

image-20220218194659745

设置个人信息链接：

修改主题配置social部分

1
2
3
4
5
6
7
8
9
10
11
social:
  #GitHub: https://github.com/yourname || fab fa-github
  #E-Mail: mailto:yourname@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype

自行启用对应条目即可

我这里设置的内容：

1
2
3
social:
  GitHub: https://github.com/SuperHostPopo || fab fa-github
  bilibili: https://space.bilibili.com/4023159 || fab fa-bilibili

友情链接：

修改links部分

1
2
3
links:
  #Title: http://yoursite.com
  e萌工作室: https://www.emoe.xyz/

显示效果是这样的

image-20220218194759860

显示版权信息说明：

修改主题配置文件

1
2
3
4
5
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

这是侧边栏和文章底部的版权信息，直接打开就好

image-20220218194824550

follow me功能 这里我和侧边栏信息写的相同的，也可以添加你的rss订阅之类的进去

1
2
3
4
5
6
7
follow_me:
  GitHub: https://github.com/SuperHostPopo || fab fa-github
  bilibili: https://space.bilibili.com/4023159 || fab fa-youtube
  #Twitter: https://twitter.com/username || fab fa-twitter
  #Telegram: https://t.me/channel_name || fab fa-telegram
  #WeChat: /images/wechat_channel.jpg || fab fa-weixin
  #RSS: /atom.xml || fa fa-rss

image-20220218200151416

修改网站底部footer：

1
2
3
4
5
6
7
8
9
10
11
12
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  #since: 2015

  # Icon between year and copyright info.
  icon:
    # Icon name in Font Awesome. See: https://fontawesome.com/icons
    name: fa fa-terminal
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#000000"

这里把底部的红色爱心图标修改了一下，感觉红心不是很好看。图标可以去这个网站找到代码https://fontawesome.com/icons

image-20220218201952480

（无视那个访问量 这里因为本地预览所以抽掉了）

侧边栏：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  #width: 300

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

这里可以修改显示位置（左右） 宽度

还有何时显示

我就不改了都用了默认的

回到顶部滚动条和阅读进度显示

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: false
  # Scroll percent label in b2t button.
  scrollpercent: true

把最后那个改成true就好

image-20220218203349221

好啦…这些都在本地调试完了，我这个博客大概就算搞定了~

最后还是

hexo clean && hexo g -d

搞定！desu