前言
开始学习技术的时候，就有很多师傅推荐搭建博客，但是一直没开始搭建博客（就是因为穷。后来机缘巧合之下打听到可以用Hexo+Github免费搭建博客，最后只需要出购买域名的钱，再一次有了搭建博客的想法。
把第一次搭建博客过程记录下来。
以下仅为 Windows10 下搭建博客流程。
流程
获取搭建博客所需要的工具
本地生成博客内容
定值个性化博客 matery主题
将博客发表到互联网上
第一部分 获取搭建博客所需要的工具
搭建过程中，我们总共需要如下工具：
Git
下载地址: Git下载
下载完成后，运行程序，一直确定next就行。安装完成后，鼠标右击，会发现多了两个快捷键。
在搭建过程中，我们会需要用到第二个操作。更多关于Git知识，参照Git 使用笔记。
Node.js
下载地址: Node.js下载
下载完成后，运行程序，同理一直next就行。
安装完成后，可以打开
cmd或者Git Bash Here，进行检测是否安装成功：node -v npm -v显示版本说明安装成功。
Hexo
保证前面两个工具安装成功后，鼠标右击，打开
cmd，输入如下代码用于安装hexo:npm install -g hexo-cli中间过程可能会有报错，可以忽略。尝试能否查看版本号:
hexo -v显示版本号就说明安装成功。
我们接下来可能需要用到的相关指令:
hexo init -->初始化blog hexo clean -->清楚之前生成的东西 hexo g == hexo generate --> 生成静态文章(建议用缩写) hexo d == hexo deploy --> 部署文章,用于上传本地博客内容(建议缩写) hexo new "" -->创建blog文章 hexo new page "" -->创建blog页GitHub
注册一个
GitHub账号，记录用户名，账号，密码。后续可能会要求提供这些相关信息。
第二部分 本地生成博客内容
初始化博客
初始化博客内容
创建一个空文档（名字任意），用于保存blog内容。
鼠标右击该文档，打开
Git Bash Here，初始化博客内容hexo init忽视初始化过程中发出的警报。
安装必备的组件：
npm install一般完成后，该目录下应该会有如下文件/文件夹
node_modules:依赖包
public：存放生成的页面scaffolds：生成文章的一些模板source：用来存放你的文章themes：主题_config.yml:博客的配置文件
访问本地博客
使用指令:
hexo g hexo s完成后，会显示一个网址:http://localhost:4000/,点击进去，就会出现一个本地博客
脚本Front-matter+上传
文章均保存在主目录source/_posts中，默认为md文件，并且文件前面需要添加Front-matter 信息，有关信息如下:
title:Markdown的文件标题date:文件创建日期时间，同时也作为发布时间author:作者img:文章特征图,如果没有设置，则会根据文章标题的hashcode的值取余，选取对应的特色照片top:是否置顶cover:是否需要加入到首页轮播封面中coverlmg:首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片password:如果需要阅读相应文章，必须输入密码，此处输入值为实际密码的sha256小写形式。需保证主题目录_config,yml激活了该功能toc:是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题目录config.yml中激活了toc选项mathjax:是否开启数学公式支持 ，本文章是否开启mathjax，且需要在主题目录_config.yml中激活相应选修，且安装了相关插件-
summary：文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要 categories:文章分类，本主题的分类表示宏观上大的分类tags:文章标签，一篇文章可以多个标签
以上为可以添加的Front-matter 。根据需求进行添加，下面为自动化上传脚本，可以根据需求进行添加:
该脚本需要保证相关指令所需插件安装完成
该脚本如果只需要在本地演示，则将其中
hexo d换成hexo s
import os
import time
import hashlib
#===以下为需要修改的内容===
author="Myu_" #博客名
blog_address="E:\\make_blog\\blog" #本地博客根目录
banner="/medias/banner/" #图片保存位置
File_come=["F:\\Typora\\Blog\\"] #遍历文件范围,根据需求添加或修改
File_type=".md" #默认为md文件,可以根据自己需求修改
#===以上为需要修改的内容===
print("<==以下不输入均代表否定==>")
content=[]
address=blog_address+"\\source\\_posts\\"+input("文件名:")+".md"
content.append("---")
#标题
content.append("title: "+input("标题:"))
#日期
content.append("date: "+time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time())))
#作者
content.append("author: "+author)
#图片 默认不开启,会根据相关条件自定义图片
# content.append("img: "+banner+input("图片数字:")+".jpg")
# content.append("coverlmg: "+banner+input("封面图片数字:")+".jpg")
#置顶
if(input("是否需要置顶:").encode("utf-8")==b""):
content.append("top: false")
else:
content.append("top: true")
#首页轮播
if(input("是否需要加入到首页轮播封面中:").encode("utf-8")==b""):
content.append("cover: false")
else:
content.append("cover: true")
#密码
tmp=input("密码:").encode("utf-8")
if(tmp==b""):
content.append("password: ")
else:
content.append("password: "+hashlib.sha256(tmp).hexdigest())
#主题
content.append("summary: "+input("主题:"))
content.append("tags:")
#标签
count=0
while True:
tmp=input("第%d个标签名:"%(count+1))
count+=1
if(tmp.encode("utf-8")==b""):
break
else:
content.append("- "+tmp)
content.append("categories:")
#分类
count=0
while True:
tmp=input("第%d个分类:"%(count+1))
count+=1
if(tmp.encode("utf-8")==b""):
break
else:
content.append("- "+tmp)
content.append("---")
#文档地址
for i in range(len(content)):
content[i]=bytes((content[i]+"\n").encode("utf-8"))
print("你需要写入的文档名(请确保该文件名在指定文件范围内唯一):",end="")
def File_name_walk(File_name):
for File_walk in File_come:
for root,dirs,files in os.walk(File_walk):
for file in files:
if(file==File_name+File_type):
print("查找成功,正在创建本地文件...")
return root+file
if(dirs!=[]):
File_name_walk(dirs)
print("在指定文件搜索范围内,并没有找到相关文件,请重新输入:",end="")
return 0
while True:
File_name=input()
print("开始查找...")
tmp=File_name_walk(File_name)
if(tmp!=0):
fp=open(tmp,"rb")
line=fp.readline()
while line:
content.append(line)
line=fp.readline()
fp.close()
break
with open(address,"wb") as fp:
for i in range(len(content)):
fp.write((content[i]))
print("本地文件创建成功！")
os.chdir((blog_address))
os.system("hexo g")
os.system("hexo d")
print("上传blog成功！")
os.system("pause")
仅作为最初版本，后续不断完善。
第三部分 定制个性化博客 matery主题
通过第二部分获得的本地博客，可以用了，但是观赏性极差，还没有逼格。这肯定不行，必须来一手个性化。
这里仅提供matery主题的部分配置。
将主目录_config.yml内language修改一下，变成如下内容，就可以让博客内容主动显示成中文:
language: zh-CN
1.主题修改
首先下载matery主题包:传送门
然后将主题包放到你存放博客文件的themes文件夹下，然后打开主目录下的_config.yml,将其中默认主题名字修改一下：
theme: landscap
修改后如下:
保存后，查看本地博客，就会发现变成了相关主题，但是上面一排都没有设置页，导致不能访问。
2.添加界面
2.1添加404界面
这个主题默认没有一个404界面，我们可以人为添加一个。可以在主目录/source/下创建一个404.md，或者通过如下指令创建404.md:
hexo new page "404"
并在其中添加内容(所有都要添加):
---
title: 404
date: 2021-09-09 21:34:12
type: "404"
layout: "404"
description: "3mm～，你没有猜错，这是一个懒人，还没完善这里，QAQ :("
---
然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下：
<style type="text/css">
/* don't remove. */
.about-cover {
height: 75vh;
}
</style>
<div class="bg-cover pd-header about-cover">
<div class="container">
<div class="row">
<div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
<div class="brand">
<div class="title center-align">
404
</div>
<div class="description center-align">
<%= page.description %>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
// 每天切换 banner 图. Switch banner image every day.
$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');
</script>
2.2新建标签 tags 页
hexo new page "tags"
新建出来的/source/tags/index.md，写入如下内容:
---
title: tags
date: 2021-09-09 21:34:12
type: "tags"
layout: "tags"
---
2.3新建分类 categories 页
hexo new page "categories"
新建出来的/source/categories/index.md，写入如下内容:
---
title: categories
date: 2021-09-09 21:34:12
type: "categories"
layout: "categories"
---
2.4新建关于我 about 页
hexo new page "about"
新建出来的/source/about/index.md，写入如下内容:
---
title: about
date: 2021-09-09 21:34:12
type: "about"
layout: "about"
---
然后在主题目录_config.yml下找到:
profile:
avatar: /medias/avatar.jpg
career: Software Engineer
introduction: If you wish to succeed, you should use persistence as your good friend, experience as your reference, prudence as your brother and hope as your sentry.
以上为默认信息，可以根据自己需要修改内容
图片地址
我的项目，我的技能，相册等设置就在profile后面，根据注释自行选择
2.5新建友情连接 friends 页
hexo new page "friends"
新建出来的/source/friends/index.md，写入如下内容:
---
title: friends
date: 2021-09-09 21:34:12
type: "friends"
layout: "friends"
---
当然，剩下部分还是需要我们自己补齐，毕竟不像前几个页面，你只需要创建一个链接，这里我们需要提供剩下内容,示例:
[
{
"avatar": "https://myu-data.oss-cn-chengdu.aliyuncs.com/img/QQ%E5%9B%BE%E7%89%8720210706183646.jpg",
"name": "Myu_",
"introduction": "这是一个懒虫",
"url": "http://myu-blog.top/",
"title": "路过"
}
]
3.代码高亮
matery主题的代码高亮不是很理想，下载一个用于代码美化的插件:hexo-prism-plugin
npm i -S hexo-prism-plugin
将主目录下_config.yml内相关代码高显关闭
highlight: #代码块的设置
enable: false #开启代码块高亮
line_number: true #如果未指定语言，则启用自动检测
auto_detect: false #显示行数
tab_replace: '' #用n个空格替换tabs；如果值为空，则不会替换tabs
wrap: ture
hljs: false
然后在末尾添加我们自己的代码:
# 关闭原有的代码高亮，使用自己的
prism_plugin:
mode: 'preprocess' # realtime/preprocess
theme: 'tomorrow'
line_number: false # default false
custom_css:
4.增加建站时间
修改主目录/themes/matery/layout/_partial中的footer.ejs，末尾加上：
<script language=javascript>
function siteTime() {
window.setTimeout("siteTime()", 1000);
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var years = days * 365;
var today = new Date();
var todayYear = today.getFullYear();
var todayMonth = today.getMonth() + 1;
var todayDate = today.getDate();
var todayHour = today.getHours();
var todayMinute = today.getMinutes();
var todaySecond = today.getSeconds();
var t1 = Date.UTC(2021, 09, 4, 00, 00, 00); /*更具需要修改*/
var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
var diff = t2 - t1;
var diffYears = Math.floor(diff / years);
var diffDays = Math.floor((diff / days) - diffYears * 365);
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
document.getElementById("sitetime").innerHTML = "本站已运行 " +diffYears+" 年 "+diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
}
siteTime();
</script>
大致效果:
5.添加动漫人物
输入两次指令+添加一次代码即可实现:
npm install --save hexo-helper-live2d
npm install live2d-widget-model-shizuku
可以根据自己需求进行修改(原作者地址
然后在主目录_config.yml末尾添加内容:
live2d:
enable: true
scriptFrom: local
pluginRootPath: live2dw/
pluginJsPath: lib/
pluginModelPath: assets/
tagMode: false
log: false
model:
use: live2d-widget-model-shizuku
display:
position: right
width: 150
height: 300
mobile:
show: false
react:
opacity: 0.7
效果图:
这样弄出来的动漫人物并没有语言等功能，但是相比较来说，更简单实现。
6.添加blog动态标签
所谓动态标签，如下:
打开themes/matery/layout/layout.ejs，在末尾添加如下代码:
<script type="text/javascript">
var OriginTitile = document.title,
st;
document.addEventListener("visibilitychange", function () {
document.hidden ? (document.title = "看不见我🙈~看不见我🙈~", clearTimeout(st)) : (document.title =
"(๑•̀ㅂ•́) ✧被发现了～", st = setTimeout(function () {
document.title = OriginTitile
}, 3e3))
})
</script>
根据需求需改即可，然后在Git Bash Here 中
hexo clean
hexo g
7.添加搜索功能
使用一个名为hexo-generator-search的Hexo插件来实现内容搜索，安装:
npm install hexo-generator-search --save
在主目录_config.yml末尾添加如下内容:
search:
path: search.xml
field: post
8.鼠标拖尾 —彩虹星星掉落跟随
由于主题自带点击爱心标志，感觉还行，就没有再去修改其他类型。
在themes/matery/source/js目录下新建cursor.js文件，复制粘贴传送门里的所有内容
然后在themes/matery/layout/layout.ejs末尾添加:
<script src="/js/cursor.js"></script>
9.自定义鼠标样式
获取一个鼠标样式，放在主题文件夹内的任意位置
推荐
matery/source/medias
以我的为例，我的鼠标样式存放在matery/source/medias下，打开主题目录/source/css/my.css，添加如下内容:
*{
cursor: url("/medias/shubiao.cur"),auto!important;
}
:active{
cursor: url("/medias/shubiao.cur"),auto!important;
}
第一个为正常显示的鼠标样式，第二个为点击鼠标左键后显示的样式
补:过于花里胡哨的样式可能会对后续查看blog有一定的影响
10.添加二级标签
所谓二级标签，是指这种：
我们总共需要配置四个文件内容:
/themes/matery/layout/_partial/mobile-nav.ejs将如下内容:
<ul class="menu-list mobile-menu-list"> <% Object.keys(theme.menu).forEach(function(key) { %> <li> <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class="fa fa-fw <%- theme.menu[key].icon %>"></i> <% } else { %> <i class="fa fa-fw fa-link"></i> <% } %> <%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %> </a> </li> <% }); %> <% if (theme.githubLink && theme.githubLink.enable) { %> <li><div class="divider"></div></li> <li> <a href="<%- theme.githubLink.url %>" class="waves-effect waves-light" target="_blank"> <i class="fa fa-github-square fa-fw"></i><%- theme.githubLink.title %> </a> </li> <% } %> </ul>替换成:
<!-- 支持二级菜单特性 --> <ul class="menu-list mobile-menu-list"> <% Object.keys(theme.menu).forEach(function(key) { %> <li class="m-nav-item"> <% if(!theme.menu[key].children) { %> <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class="fa fa-fw <%- theme.menu[key].icon %>"></i> <% } else { %> <i class="fa fa-fw fa-link"></i> <% } %> <%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %> </a> <% } else { %> <a href="javascript:;"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class="fa fa-fw <%- theme.menu[key].icon %>"></i> <% } else { %> <i class="fa fa-fw fa-link"></i> <% } %> <%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %> <span class="m-icon"><i class="fa fa-chevron-right"></i></span> </a> <ul> <% for(let childrenLink of theme.menu[key].children){ %> <li> <a href="<%- url_for(childrenLink.url)%>" > <% if (childrenLink.icon && childrenLink.icon.length > 0) { %> <i class="fa <%- childrenLink.icon %>" style="left: 25px; position: absolute;"></i> <% } %> <span><%- childrenLink.name %></span> </a> </li> <% } %> </ul> <% } %> </li> <% }); %> <% if (theme.githubLink && theme.githubLink.enable) { %> <li><div class="divider"></div></li> <li> <a href="<%- theme.githubLink.url %>" class="waves-effect waves-light" target="_blank"> <i class="fa fa-github-square fa-fw"></i><%- theme.githubLink.title %> </a> </li> <% } %> </ul>/themes/matery/layout/_partial/navagtion.ejs将如下内容:
<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fa fa-navicon"></i></a> <ul class="right"> <% Object.keys(theme.menu).forEach(function(key) { %> <li class="hide-on-med-and-down"> <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class="fa <%- theme.menu[key].icon %>"></i> <% } %> <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span> </a> </li> <% }); %> <li> <a href="#searchModal" class="modal-trigger waves-effect waves-light"> <i id="searchIcon" class="fa fa-search" title="<%= __('search') %>"></i> </a> </li> </ul>替换成:
<!-- 支持二级菜单特性 --> <a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fa fa-navicon"></i></a> <ul class="right nav-menu"> <% Object.keys(theme.menu).forEach(function(key) { %> <li class="hide-on-med-and-down nav-item" > <% if(!theme.menu[key].children) { %> <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class="fa <%- theme.menu[key].icon %>"></i> <% } %> <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span> </a> <% } else { %> <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light"> <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %> <i class="fa <%- theme.menu[key].icon %>"></i> <% } %> <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span> <i class="fa fa-chevron-down" aria-hidden="true"></i> </a> <ul class="sub-nav menus_item_child "> <% for(let childrenLink of theme.menu[key].children){ %> <li> <a href="<%- url_for(childrenLink.url)%>" > <% if (childrenLink.icon && childrenLink.icon.length > 0) { %> <i class="fa <%- childrenLink.icon %>" style="margin-top: -20px;"></i> <% } %> <span><%- childrenLink.name %></span> </a> </li> <% } %> </ul> <% } %> </li> <% }); %> <li> <a href="#searchModal" class="modal-trigger waves-effect waves-light"> <i id="searchIcon" class="fa fa-search" title="<%= __('search') %>"></i> </a> </li> </ul>/themes/matery/source/css/matery.css末尾添加内容:
/* 二级菜单样式定义 */ .nav-menu {} .nav-menu li .sub-nav { position: absolute; top: 77px; list-style: none; margin-left: -20px; display: none; } .nav-menu li .sub-nav li { text-align: center; clear: left; width: 140px; height: 35px; line-height: 35px; position: relative; } .nav-menu li .sub-nav li a { height: 34px; line-height: 34px; width: 138px; padding: 0px; display: inline-block; border-radius: 5px; color: #000; } .nav-show i[aria-hidden=true] { -webkit-transform: rotate(180deg) !important; -moz-transform: rotate(180deg) !important; -o-transform: rotate(180deg) !important; -ms-transform: rotate(180deg) !important; transform: rotate(180deg) !important; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .menus_item_child { background-color: rgba(255, 255, 255, .8); width: fit-content; border-radius: 10px; -webkit-box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5); box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5); display: none; opacity: 0.98; -ms-filter: none; filter: none; -webkit-animation: sub_menus .3s .1s ease both; -moz-animation: sub_menus .3s .1s ease both; -o-animation: sub_menus .3s .1s ease both; -ms-animation: sub_menus .3s .1s ease both; animation: sub_menus .3s .1s ease both; } .menus_item_child:before { content: ""; position: absolute; top: -20px; left: 50%; margin-left: -10px; border-width: 10px; border-style: solid; border-color: transparent transparent rgba(255, 255, 255, .8) } .m-nav-item { /* position: relative; */ left: 45px } .m-nav-item ul { display: none; background: rgba(255, 255, 255, .1); } .m-nav-item ul li { width: 245px; height: 50px; line-height: 50px; text-align: center; } .m-nav-show .m-icon { -webkit-transform: rotate(90deg) !important; -moz-transform: rotate(90deg) !important; -o-transform: rotate(90deg) !important; -ms-transform: rotate(90deg) !important; transform: rotate(90deg) !important; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; -ms-transition: all .3s; transition: all .3s; } .m-nav-show .m-nav-item>a:hover { color: #FFF; background: rgba(255, 255, 255, .8); } .m-nav-show>a:before, .m-nav-item>a:hover:before { opacity: 1; } .m-nav-item .m-icon { position: absolute; right: 65px; height: 50px; padding: 0px; margin: 0px; } .nav-item li:hover a { color: #FFF; background: rgba(0, 0, 0, .1); }/themes/matery/source/js/matery.js再最后一个
});之前添加:// 增加二级菜单功能 $(".nav-menu>li").hover(function(){ $(this).children('ul').stop(true,true).show(); $(this).addClass('nav-show').siblings('li').removeClass('nav-show'); },function(){ $(this).children('ul').stop(true,true).hide(); $('.nav-item.nav-show').removeClass('nav-show'); }) $('.m-nav-item>a').on('click',function(){ if ($(this).next('ul').css('display') == "none") { $('.m-nav-item').children('ul').slideUp(300); $(this).next('ul').slideDown(300); $(this).parent('li').addClass('m-nav-show').siblings('li').removeClass('m-nav-show'); }else{ $(this).next('ul').slideUp(300); $('.m-nav-item.m-nav-show').removeClass('m-nav-show'); } });
然后打开主题目录_config.yml，进行下列样式修改:
Medias:
icon: fas fa-list
children:
- name: Musics
url: /musics
icon: fas fa-music
- name: Movies
url: /movies
icon: fas fa-film
...
11.添加文章字数统计
安装hexo-wordcount插件
npm i --save hexo-wordcount
主题目录_config.yml，找到如下信息
wordCount:
enable: false #将这个值设置为 true
postWordCount: true
min2read: true
totalCount: true
12.修改主题颜色
以下修改均在主题目录/source/css/matery.css中:
修改横幅颜色:
搜索:
.bg-color,找到后，根据自己喜好进行修改(下为个人配置).bg-color { background-image: linear-gradient(to right, #3230bf 0%, #9d0f7a 100%); /*修改颜色*/ opacity: 0.8; /*透明效果*/ }去除动态背景颜色:
我感觉挺烦的，看着不舒服，会选择将它去掉
搜索:
@-webkit-keyframes rainbow以及@keyframes rainbow，分别将它们内容注释掉@-webkit-keyframes rainbow { /* 动态切换背景颜色. */ } @keyframes rainbow { /* 动态切换背景颜色. */ }
13.设置背景图+网站favicon+网站LOGO
可以将自己的照片替换主题目录/source及其/source/medias下的相关图片
也可以在主题目录_config.yml中进行搜索，进行修改:
- 网站背景图:
background - 网站favicon:
favicon - 网站LOGO:
logo
推荐将自己图片替换目录下的相关图片。
个性化设置到此结束。有些个性化，比如视频，音乐，评论，mathjax等，都没有配置，需要自行出门左转问度娘。
第四部分 将博客发表到互联网上
发到互联网上，这就需要之前一直没有提到的GitHub了
有很多种方法实现博客发表到互联网上，这里仅讲
GitHub
创建一个GitHub仓库
首先，拥有一个GitHub账号，新建一个仓库
然后进行设置:
列如==>例如
生成SSH，添加到GitHub
Git Bah中，yourname与youremail分别对应你的GitHub账号的名字与邮箱
git config --global user.name "yourname"
git config --global user.email "youremail"
例如：
git config --global user.name "Re0Hy"
git config --global user.email "2218205894@qq.com"
输入完成后，可以通过以下指令查看输入是否有误
git config user.name
git config user.email
然后进行SSH的创建
什么是SSH？
实际上就是创建一个公钥与私钥，将公钥放在GitHub上，这样，当你链接GitHub时，根据公钥匹配私钥，进而能够顺利的上传文件
ssh-keygen -t rsa -C "youremail"
创建成功后，可以在C:\Users\ASUS找到一个.ssh的文件夹，获取id_rsa.pub中的内容，等会要用。
如果不想打开文件夹，可以通过指令实现获取:
cat ~/.ssh/id_rsa.pub
然后在GitHub名字下的settings，点击SSH and GPG keys，选择New SSH key,名字任取，将复制的内容原封不动的复制到Key框内。
在Git Bash中，检测是否成功，指令如下
ssh -T git@github.com
只要出现这句话就行，后面but内容不必关心。
将hexo部署到GitHub上
打开主目录_config.yml,找到deploy,设置可以参考如下
deploy:
type: git
repository: https://github.com/Re0Hy/Re0Hy.github.io
branch: main
下载相关插件，来实现上传功能
npm install hexo-deployer-git --save
然后就可以进行上传文件了
hexo g
hexo d
每次上传前，需要
hexo g生成静态文章，然后才能hexo d进行上传，否则博客上的内容不会进行改变
可能需要等待一会，才能在http://yourname.github.io/看到相关内容
设置个人域名
可以设置可以不设置，看个人。推荐设置一个，毕竟一两杯奶茶钱，有几年域名使用权。
个人博客在没有设置域名之前，有时候不能在
以腾讯云为例，登录后，点击控制台
搜索：域名注册，点击注册域名，根据个人喜好和资金选择后缀名，购买成功后，就可以在我的域名中就可以看到我们刚才买到的域名了，进行实名认证，然后在操作下方，点击解析，选择添加记录，总共需要添加两个内容:
主机记录分别为@与www,记录类型为CNAME,记录值为你的GitHub仓库名字
然后在你的GitHub仓库设置中，设置Custom domain内容:
保存后，在主目录/source下，应该会有一个名为CNAME文件,如果没有，自己创建一个，并且写入你的域名名字，保存即可。过段时间后，就可以通过域名访问你的个人博客了。
第五部分 优化
这部分需要有域名
百度收录站点
提交网站
虽然我们已近将博客发表到互联网上面了，但是并不会主动向别人推送我们博客内容（这可不行，这么好的装B，呸，分享技术的好机会，怎么能放弃。
所以我们需要向百度提供我们的网址，先搜索site:+你的域名,点击提交网址
选择提交网址，登录账号后，用户中心，选择站点管理
第三步这里，共三种验证，这里我选择的是CNAME验证，相对来说更简单，毕竟我们前面设置了CNAME，将它提供的信息，在腾讯云里面添加一条解析就好了。
这里不一样，因为两者的域名不一样，知道输入的值的由来就行
如果是另外两种，那一定要注意，使用文件验证文件存放的位置需要放在
sourc文件夹下，如果是html文件那么hexo就会将其编译，所以必须要在html头部加上的layout:false，这样就不会被hexo编译。（如果验证文件是txt格式的就不需要）
点击验证，完成。
构建网站地图
为什么要构建网站地图呢？
实际上就是为了便于搜索引擎爬虫获取你blog的内容，提高访问量
利用npm自动生成网站的sitemap,然后将sitemap交给百度就行。
安装：
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
然后往主目录_config.yml里面添加一点内容:
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
# url: https://Re0Hy.github.io
url: https://myu-blog.top
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
把url改成自己的博客域名就行。
然后hexo g,运行完成后，查看主目录/public内是否存在baidusitemap.xml与sitemap.xml，存在说明安装成功。
向百度提交链接
将生成的sitemap.xml交给百度，目前有三种提交方式
API提交，sitemap,手动提交
效率:API提交>sitemap>手动提交
我这里选择API提交，下载hexo-baidu-url-submit插件，这样当我们上传博客文章的时候，自动推送。
npm install hexo-baidu-url-submit --save
在主目录_config.yml中，添加:
baidu_url_submit:
count: 80 # 提交最新的链接个数
host: www.myu-blog.top # 在百度站长平台中注册的域名
token: *********** # 这里是密钥,所以不要在GitHub中放博客源代码
path: baidu_urls.txt # 文本文档的地址， 新链接会保存在此文本文档里
其中秘钥由来：
然后在主目录_config.yml中deploy下面添加内容（以我的为例:
deploy:
- type: git #在原来的基础上前面加了—
repository: https://github.com/Re0Hy/Re0Hy.github.io
branch: main
- type: baidu_url_submitter #添加的内容
然后进行hexo g+hexo d，一定要先进行hexo g，否则会报错，成功效果图：
这里一大堆是因为我的网址里面有中文字符
其他两种可以百度寻方法。
至此，就成功的让百度收录站点，实际生效可能还是需要等一段时间，有点慢。
Google收录站点
大致操作和百度收录站点差不多，首先登录Google站点平台
后续补充….
