在搭建和优化Hexo时遇到的问题

记录自己在搭建博客的过程中所遇到的问题以及最终的解决办法

修改背景图的问题

今天想要进一步的优化一下自己疫情期间搭建的博客，想要解决替换页面背景的问题。由于NexT版本的更新，在搜索引擎上得到的大部分指引都是针对在NexT 7.3.0以前的文件设置，而在NexT 7.3.0之后的版本无法找到hexo/next/source/css/_custom/_custom.styl文件，搜索到的解决办法也五花八门，尝试了很多方法都出现了不同的错误，比如今天所遇到的错误:

初步尝试

将原本放在hexo/next/source/css/_custom/_custom.styl中的自定义样式代码放在hexo/source/_data/styles.styl中
在NexT的基本配置文件中将#style: source/_data/styles.styl的注释符号删除

出现错误

ERROR Asset render failed: css/main.css
Error: D:\blog\themes\next\source\css\main.styl:47:11
   43|
   44| // Custom Layer
   45| // --------------------------------------------------
   46| for $inject_style in hexo-config('injects.style')
   47|   @import $inject_style;
-----------------^
   48|

failed to locate @import file D:\blog\source\_data\styles.styl

根据提示，我们推断是无法定位到指定文件，而该文件正是我们修改的D:\blog\source\_data\styles.styl

解决办法

参考作者：lyshark（文章出处：https://www.cnblogs.com/lyshark）所给出的解决办法，在NexT 7.3.0之后的版本，原本写在hexo/next/source/css/_custom/_custom.styl中的自定义样式代码，直接复制到错误提示的D:\blog\themes\next\source\css\main.styl中即可，最终修改成功的文件如下

// CSS Style Guide: http://codeguide.co/#css


$scheme    = hexo-config('scheme') ? hexo-config('scheme') : 'Muse';

$variables = base $scheme;


// Variables Layer
// --------------------------------------------------
for $variable in $variables
  @import "_variables/" + $variable;
for $inject_variable in hexo-config('injects.variable')
  @import $inject_variable;

// Mixins Layer
// --------------------------------------------------
@import "_mixins.styl";
for $inject_mixin in hexo-config('injects.mixin')
  @import $inject_mixin;

// Dark mode colors
// --------------------------------------------------
@import "_colors.styl";

// Common Layer
// --------------------------------------------------

// Scaffolding
@import "_common/scaffolding";

// Layout
@import "_common/outline";

// Components
@import "_common/components";


// Schemes Layer
// --------------------------------------------------
@import "_schemes/" + $scheme;


// Custom Layer
// --------------------------------------------------
for $inject_style in hexo-config('injects.style')
  @import $inject_style;

//背景图片
body{   
        background:url(https://i.loli.net/2020/08/28/GzMoWTZ4kFKUN6i.png);
        background-size:cover;
        background-repeat:no-repeat;
        background-attachment:fixed;
        background-position:center;
}

至此，博客的背景图修改完成！

关于背景图的URL链接

什么是URL链接

统一资源定位系统（uniform resource locator;URL）是因特网的万维网服务程序上用于指定信息位置的表示方法。URL是统一资源定位符，对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它，包括我们常见的网址也同样属于URL地址。

如何得到图片的URL地址

要想我们的博客在网络访问后图片能够正常的显示，我们就必须保证这张图片已经成为了互联网上的资源，这样我们就能通过URL定位该图片，否则计算机本地的图片可不能被普通人未经授权地通过互联网看到哦！

因此，我们就需要了解一种能将本地图片上床并得到URL地址的工具——图床。

官方对于图床的解释：图床一般是指储存图片的服务器，有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和CDN加速三种。

我所使用的是评价还不错的SM.MS, 国外一家免费且免注册的图床。

配置Hexo的SSH key

在博客已经搭建完成之后，每次当我想把更新的内容在Git Bash中使用hexo d命名上传到Github仓库的时候，时常会弹出Open SSH的页面，要求我重新登录Github的帐号。账号名称和密码都要重新输入。

经过搜索，才知道是自己搭建博客的时候没有配置SSH key，所以每次都需要手动进行身份认证。

什么是SSH key？

要解决这个问题我么首先需要知道什么是SSH，Secure Shell简单来说就是一个网络安全协议，通过公钥加密技术来验证远程主机，从而保证了数据的保密性和完整性。上面所提到的OpenSSH（OpenBSD Secure Shell) 就是使用SSH的计算机程序。

知道了什么是SSH，SSH key就很好理解了，就是在配置完成后让你不需要输入密码也能登录到SSH服务器。

了解了这些概念之后，我们看看如何配置Hexo的SSH key。

如何配置SSH key

获取自己的SSH key

1.打开Git Bash,输入如下命令：

1	ssh-keygen -t rsa -C "email"

“email”中填入我们Github所绑定的邮箱

2.Enter之后，Git Bash会显示：

1	Enter file in which to save the key (/c/Users/sun/.ssh/id_rsa):_

这是让我们选择SSH key生成之后的保存地址，为了避免之后的配置出现别的麻烦，我们就选择默认的路径，直接Enter

3.Git Bash给出提示：

1	Enter passphrase <empty for no passphrase>:_

输入GitHub的密码后Enter

4.我们在刚刚选择的默认路径（C:\users\sun.ssh）下去查看生成的SSH key文件（可以用记事本或者word打开），打开该文件就能够看到属于你的那一串SSH key了

5.打开GitHub中博客绑定的那个仓库，点开设置Settings，选择项中选择Deploy keys，title一栏随意填写，只要把刚刚文件中的key复制进去就🆗

6.接下来，我们需要检查本地的SSH key是否配置成功，打开Git Bash，输入命令：

1	ssh -T git@github.com

回车之后如果看到

1	You’ve successfully authenticated, but GitHub does not provide shell access

说明已经配置成功，接下来我们需要设置Git中的配置名单，输入如下命令：

1 2	git config --global user.name "你的GitHub帐号名称" git config --global user.email "你的GitHub所绑定的账号邮箱"

最后，我们到hexo的配置文件中去找到Deployment：修改repo的前缀

1	repo: git@github.com:你的用户名/你的仓库名.git

到这里就成功配置Hexo的SSH key，下面是我在配置过程中所遇到的问题：

绑定时所遇到的错误

1
2
3

warning: user.name has multiple values
error: cannot overwrite multiple values with a single value
       Use a regexp, --add or --replace-all to change user.name.

提示我们用户名有多个值，我们可以在Git Bash中输入：

1	git config --list

查看Git的相关配置信息，发现我们给user.name赋了多个值，输入：

1 2	git config --global --replace-all user.name "你的GitHub帐号名称" git config --global --replace-all uesr.email "你的GitHub所绑定的账号邮箱"

就可以重新设置我们的配置信息了，除此之外，我们还能通过输入：

1	git config --helper

查看更多关于配置信息的操作命令

解决了上述问题，我已经成功配置好了Hexo的SSH key，经过测试，终于不用再反反复复的输入我合计长达40多位的账户名称和密码了。关于git的相关知识，之后再慢慢积累，如果你在这过程中遇到了什么问题，欢迎留言，我们可以一起解决！希望可以帮助到你

886！❤