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

笔者搭建博客地址:saltyfishyjk’s Blog

文章目录

  • Hexo博客(Snail主题)搭建回顾概览
    • Part 0 前言
      • 写作背景
      • 定位
        • 您在这里可以期望获得:
        • 您在这里无法期望获得:
      • 对读者前置知识的期望
    • Part 1 笔者参考的其他博客
    • Part 2 笔者踩过的坑
      • 设置GitHub默认分支为master
      • 直接按照[Snail主题官方仓库(给出了重要基本指导)](https://github.com/dusign/hexo-theme-snail)的README.md搭建博客
      • 执行`hexo g -d`时关闭代理
    • Part 3 个性化设置博客界面
      • 在[Snail主题官方仓库(给出了重要基本指导)](https://github.com/dusign/hexo-theme-snail)已经给出的设置
      • 官方指导未给出的设置配置
        • 更改右上角导航栏
      • 写博客
        • 插入图片
    • 后记

Part 0 前言

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


写作背景

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

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

定位

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

您在这里可以期望获得:

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

您在这里无法期望获得:

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

对读者前置知识的期望

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

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

Part 1 笔者参考的其他博客

  1. Hexo+GitHub Page搭建技术博客(重要参考)
  2. Snail主题官方仓库(给出了重要基本指导)
  3. hexo官网(可以获得hexo基本知识如hexo命令等)
  4. hexo+github搭建博客(超级详细版,精细入微)
  5. 解决npm install安装慢的问题
  6. 利用vscode打开.styl文件的办法
  7. 解决hexo中文博客打不开的问题
  8. 解决博客中插入图片的问题

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

Part 2 笔者踩过的坑

设置GitHub默认分支为master

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

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

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

执行hexo g -d时关闭代理

在此先推荐一款访问GitHub的工具DevSideCar,傻瓜式操作非常易用。

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

Part 3 个性化设置博客界面

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

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搭建技术博客(重要参考)。
  6. Background effects部分按照官方指导修改即可,也可以关闭以减少CPU消耗,其中content部分可以修改为自己喜欢的emoji或语句,做个小彩蛋(比如本博客[doge])。

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

更改右上角导航栏

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

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

写博客

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

插入图片

参考解决博客中插入图片的问题中的方案,其中前两种方法笔者已经亲测可用,最后的typora的方法没有尝试。

后记

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

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

Hexo博客(Snail主题)搭建回顾概览相关推荐

  1. hexo博客next主题添加对数学公式的支持

    hexo博客默认为markdown格式,但是新搭建的hexo博客不支持公式渲染,下面介绍hexo博客next主题下添加对数学公式支持的方法. 环境说明: hexo版本:5.4.1 next版本: 最新 ...

  2. hexo博客yilia主题_缺失模块_解决方案

    hexo博客yilia主题,左侧栏目有一个全部文章的按钮,刚开始开始报错缺失模块,如下图: 我解决了这个问题着实不容易饶了弯路,但是跟着提示步骤,其实很简单,走起: 1.查看node版本 win键+R ...

  3. Github pages + Hexo 博客 yilia 主题使用畅言评论系统

    文章首发地址:http://www.54tianzhisheng.cn/2017/04/13/Hexo-yilia-changyan/ , 转载请注明出处. 前言 Hexo的Yilia主题由于原来使用 ...

  4. hexo 博客next主题集成gitment或者gitalk评论系统

    原文链接hexo 博客next主题集成gitment或者gitalk评论系统 前言 之前使用多说,多说挂了,用网易跟帖代替,网易跟帖又没了.前段时间用来必力,感觉还行,但总归不踏实.后面发现有gitm ...

  5. 为Hexo博客next主题添加友链

    为Hexo博客next主题添加友链 20230427153826|left

  6. hexo博客yilia-plus主题更换Beaudar评论插件

    文章目录 hexo博客yilia-plus主题更换Beaudar评论插件 一.安装Beaudar app. 二.添加到主题中 1.直接拉取仓库到本地. 2. 自己进行配置 三. 一些问题 hexo博客 ...

  7. hexo博客yilia主题 如何自定义个人博客的背景图片

    hexo博客yilia主题 博客背景的设置 个人博客系列文章目录 hexo博客yilia主题 所有文章模块缺失最新解决方案 hexo+yilia博客报错post.categories forEach ...

  8. hexo博客 Maupassant主题 添加萌妹纸、萌宠

    给hexo博客养一个 萌妹子或者萌宠,也是偶然之间发现可以添加可爱的妹纸或者是萌宠,发现挺好玩的,而且作者提供了很多模型供你选择,没事的时候还可以逗一逗 ? 文章目录 本博文的简述or解决问题? 获取 ...

  9. 02 Hexo博客Butterfly主题配置博客评论邮件提醒

    概述 个人博客搭建成功后已经上线运行了好久,但是一直没有时间配置评论区的邮件提醒功能,所以今晚有时间就抽空配置了,然后将操作过程做一下记录. 前提条件 一个已经上线运行的Hexo博客(至于用什么主题都 ...

  10. GitHub+HEXO博客更换主题

    写在前面 前面讲了怎么使用GitHub+HEXO搭建论坛,这里写这个论坛如何更换主题.对于如何安装HEXO和部署到GitHub的问题,见我另一篇文章使用GitHub+HEXO免费搭建个人博客(最详细) ...

最新文章

  1. 在代码段中安排自己定义的数据
  2. WordPress博客后台不能显示所有主题和无法编辑主题的问题的解决方法
  3. 现代软件工程系列 学生的精彩文章 (1)
  4. 深入理解Tomcat和Jetty源码之第二篇servlet规范和servlet容器
  5. SAP License:FICO重要概念(二)-附常用技巧
  6. jsp+servlet实现文件的上传和下载
  7. Android,iOS打开手机QQ与指定用户聊天界面
  8. 高中计算机技术教材,广西科学技术出版高中信息技术教材第一册《计算机硬件组成》...
  9. Vue学习之旅----vuex不同组件间数据共享-状态一致
  10. BOMAPI和DOMAPI
  11. 手机浏览器 css3,css3在不同型号手机浏览器上的兼容一览表
  12. 打字游戏之输入框功能的实现
  13. python控制相机自动拍照_如何让VPython中的对象自动移动到相机中?
  14. 未加载coreavcdecoder.ax所用的符号
  15. iOS -- masonry的使用
  16. 【全奖博士】香港大学招收计算机视觉方向博士/博后/研究助理
  17. xshell xftp 5系列
  18. 越客汽车美容管理软件 汽车行业专用软件
  19. USB Gadget iMX6UL开发板模拟U盘
  20. 华为笔试题-素数伴侣

热门文章

  1. An动画基础之元件的图形动画与按钮动画
  2. VMware设置静态IP
  3. 计算机组老师颁奖词,教研组颁奖词5篇
  4. 保存下载图片(taro h5)
  5. tweenMax学习笔记
  6. 英语八大句子成分之一 - 状语
  7. 《剑指offter》
  8. 开源免费的Mac剪切板管理工具-Maccy
  9. 计算机上如何使用文件管理器,苹果iphone iFiles文件管理器使用图文教程
  10. First-hitting-time model