Hexo博客(Snail主题)搭建回顾概览

Hexo博客(Snail主题)搭建回顾概览

笔者搭建博客地址:

https://saltyfishyjk.github.io
https://saltyfishyjk.github.io


目录
  • Hexo博客(Snail主题)搭建回顾概览
    #hexo博客snail主题搭建回顾概览

    • Part 0 前言
      #part-0-前言

      • 写作背景
        #写作背景

      • 定位
        #定位

        • 您在这里可以期望获得:
          #您在这里可以期望获得

        • 您在这里无法期望获得:
          #您在这里无法期望获得

      • 对读者前置知识的期望
        #对读者前置知识的期望

    • Part 1 笔者参考的其他博客
      #part-1-笔者参考的其他博客

    • Part 2 笔者踩过的坑
      #part-2-笔者踩过的坑

      • 设置GitHub默认分支为master
        #设置github默认分支为master

      • 直接按照Snail主题官方仓库(给出了重要基本指导)的README.md搭建博客
        #直接按照snail主题官方仓库给出了重要基本指导的readmemd搭建博客

      • 执行hexo g -d时关闭代理
        #执行hexo-g--d时关闭代理

    • Part 3 个性化设置博客界面
      #part-3-个性化设置博客界面

      • 在Snail主题官方仓库(给出了重要基本指导)已经给出的设置
        #在snail主题官方仓库给出了重要基本指导已经给出的设置

      • 官方指导未给出的设置配置
        #官方指导未给出的设置配置

        • 更改右上角导航栏
          #更改右上角导航栏

      • 写博客
        #写博客

        • 插入图片
          #插入图片

    • 后记
      #后记

Part 0 前言

该Part记录一些背景信息,有助于读者了解这篇博客的写作背景、定位、对读者的前置知识期望。建议脑海中只有”想像大家一样搭建hexo博客“的同学阅读本部分,其他同学可直接跳至Part 1开始阅读。


写作背景

笔者在6系第一学期的祭祖中阅读参考了大量的学长学姐和同届大神的博客,受益匪浅,csdn和cnblog都是很不错的适合博客小白的平台,同时易于在百度检索中出现;除此之外,基于github page的hexo博客吸引了我的兴趣,虽不易于百度检索,但是利于对个人博客收集整理,这便是搭建本博客的初衷。

笔者的设备是Windows 10家庭版。

定位

基于这篇博客提供的其他搭建博客详细指导链接和笔者自己的补充,预期读者可以依此搭建属于自己的Snail主题hexo博客。

您在这里可以期望获得:

  1. 笔者在搭建博客中踩过的坑
  2. 一些较详细的指导搭建博客链接
  3. 基于第2条中的搭建博客链接的一些补充
  4. 包括链接博客内容在内的搭建博客所需的充分知识
  5. 依照本博客给出的方法搭建出类似

    本博客
    https://saltyfishyjk.github.io

    的个人博客

您在这里无法期望获得:

  1. 应用到的技术的深层原理
  2. Snail主题之外的其他hexo主题博客搭建方法

对读者前置知识的期望

我们希望读者最好可以拥有以下知识,或在阅读本博客时及时查阅学习。

  1. 了解Git和GitHub基础知识
  2. 能够应用编辑器(如visual studio code)查看各种非常规类型配置文件
  3. 能够访问GitHub或能够使用VPN
  4. 命令行的使用与Linux基本命令

Part 1 笔者参考的其他博客

  1. Hexo+GitHub Page搭建技术博客(重要参考)
    https://segmentfault.com/a/1190000017986794

  2. Snail主题官方仓库(给出了重要基本指导)
    https://github.com/dusign/hexo-theme-snail

  3. hexo官网(可以获得hexo基本知识如hexo命令等)
    https://hexo.io/

  4. [

    hexo+github搭建博客(超级详细版,精细入微)
    https://www.cnblogs.com/yafine/p/12112210.html

  5. 解决npm install安装慢的问题
    https://blog.csdn.net/qwe435541908/article/details/93140354

  6. 利用vscode打开.styl文件的办法
    https://developers.weixin.qq.com/community/develop/doc/0006e4a6280c78ea8e266455b51c00

  7. 解决hexo中文博客打不开的问题
    https://blog.csdn.net/qq_32074689/article/details/86769767

  8. 解决博客中插入图片的问题
    https://www.cnblogs.com/bzsheng/p/13802829.html

以上为笔者在搭建博客的过程中所参考过的其他博客,前两个最为重要,读者可以将本博客与它们结合阅读。

Part 2 笔者踩过的坑

设置GitHub默认分支为master

由于美国的一些政治因素,GitHub在2020年将默认分支由多年来一直使用的master改为了main,这导致了学习2020年10月之前的博客教程时,现在的用户需要考虑默认分支不同导致的潜在问题。因此,直接将自己GitHub账户的默认分支改为master即可与大家保持一致,避免无谓的bug。

直接按照

Snail主题官方仓库(给出了重要基本指导)
https://github.com/dusign/hexo-theme-snail

的README.md搭建博客

笔者曾尝试先应用默认主题,再更换为snail主题的方法,但是由于未知原因一直失败,但直接按照snail主题给出的指令操作即可。因此,建议读者直接按此操作。

执行hexo g -d时关闭代理

在此先推荐一款访问GitHub的工具

DevSideCar
https://gitee.com/docmirror/dev-sidecar

,傻瓜式操作非常易用。

在使用DevSideCar时,可能会遇到执行hexo g -d命令时上传失败,这并非因为操作错误,而是因为网络原因,只需要关闭代理即可。

Part 3 个性化设置博客界面

如果你完全按照上文及相关链接的操作进行,那么下面的操作对你应当是适用的。

Snail主题官方仓库(给出了重要基本指导)
https://github.com/dusign/hexo-theme-snail

已经给出的设置

  1. 修改Site,按照官方指导即可。
  2. 修改Site Settings,其中的img文件夹的相对地址是blog\source\img,其中blog是官方指导最开始的hexo init blog命令生成的blog文件夹。在该img文件夹下放入你所想要的图片并修改配置文件中相应代码。
  3. 修改SNS Settings,按照官方指导即可。
    1. 修改Sidebar Settings,对于不需要的Sidebar,直接注释掉或删掉对应栏目即可;friends链接的title是在你的博客界面显示的文字,点击会跳转到href指向的链接。
  4. theme部分应该无需自己修改。
  5. Deployment部分依照官方指导修改即可,其具体格式可进一步参考

    Hexo+GitHub Page搭建技术博客(重要参考)
    https://segmentfault.com/a/1190000017986794

  6. Background effects部分按照官方指导修改即可,也可以关闭以减少CPU消耗,其中content部分可以修改为自己喜欢的emoji或语句,做个小彩蛋(比如本博客[doge])。

官方指导未给出的设置配置

更改右上角导航栏

例子:如想删去下图右上角的TAGS栏目,只需要在blog\source目录下山区tags文件夹即可。image

如果想增加栏目,可以查阅hexo命令hexo new page使用方法,此处不详述。

写博客

可以使用hexo new 'title'的命令生成.md博客源文件,在其中使用markdown语法书写即可。

插入图片

参考

解决博客中插入图片的问题
https://www.cnblogs.com/bzsheng/p/13802829.html

中的方案,其中前两种方法笔者已经亲测可用,最后的typora的方法没有尝试。

后记

感谢您阅读至此,这篇博客到此也就告一段落了,后续笔者若有新的心得会更新本博客。

这篇博客远非尽善尽美,笔者也只是提供了若干其他博客资源和自己亲历的坑,若有不足之处还望批评指正。