最新Hexo的入门教程及Next主题配置
导读： hexo是什么？简单的说，就是一个静态博客的生成工具也可以说是一个搭建静态博客的框架，我这个博客就是就是基于hexo生成的。9月份把这个博客用hexo折腾出来，前几天ACM区域赛事结束了，所以想记录下来折腾的过程，留着以后备用。这里只说...
hexo是什么？简单的说，就是一个静态博客的生成工具也可以说是一个搭建静态博客的框架，我这个博客就是就是基于hexo生成的。9月份把这个博客用hexo折腾出来，前几天ACM区域赛事结束了，所以想记录下来折腾的过程，留着以后备用。这里只说如何在windows下成功安装hexo并运行起来，关于主题以及配置不做记录。
因为Hexo是基于Node.js的，所以必须先安装Node，所以请点击这里去下载适合自己windows版本的Node吧。
（注意：在安装步骤里Custom Setup这一步记得选Add to PATH）。
安装好以后，打开，(那对于小白来说如何打开呢？然后输入，点击确定，这样就打开了.)，输入,如果出现版本号，那说明安装成功了，并且环境变量也配置好了，如果是未知命令那就要配置下环境变量。
还是打开然后输入安装hexo的命令：
这一步需要一点时间，请稍等一会，让他安装好。
安装完成后在里输入出现一系列版本号就是安装成功啦QAQ
到这里，就要恭喜你成功完成了Hexo的安装了。
在电脑中建一个文件夹（路径根据自己爱好，我是在E盘里建了一个名为Blog的文件夹），我在这里命名为Blog吧。
然后通过的到这个文件夹下，运行命令：
这个时候会将这个文件夹初始化为一个博客专用文件夹，生成过程稍微要点时间，耐心等待。
然后输入：
之后npm将会自动安装你需要的组件，只需要等待npm操作即可。
继续操作：
然后输入：
会出现：
在浏览器里打开你将会看到：
到这里你已经有了一个属于你的本地Blog了。
why不是Github，因为我个人认为搭建一个个人博客用Github会有诸多不便。
比如：1.搭建一个博客肯定就要往百度推送，不然别人搜不到你的博客有什么意思。而如果部署Github的话，百度无法抓取blog链接。2.Coding服务器在中国，所以Blog加载速度比GitHub快很多。
现在我们的博客已经在本地搭建完成，那要怎么才能让别人看到我们的博客呢？我们选择把我们的静态网页的代码发到coding上去，然后由coding负责将我们的代码展现出来。注册步骤比较简单，点击这里去注册。需要声明的是，如果你以后不想绑定独立域名，那么coding给你的域名默认为
而你需要建立的仓库名需要与你的用户名保持一致，不然会出现问题，所以慎重起名字。然后填好个人信息，就会升级为银牌会员（能拥有5个私人仓库）。
在coding上面新建仓库
项目名称写成你的用户名，比如我的仓库名字为Blog,然后描述写不写都行，自己选择公有还是私有，然后直接选择创建项目。
这个过程的目的是在你的电脑和coding之间建立联系的通道，不然谁都能往上面增加内容，那你的博客岂不乱套了？
首先查看目录C:Users\用户名
有没有.ssh目录,如果没有，cmd在本地blog路径下,输入命令:
然后按3个回车。
再检查有没有.ssh目录，打开目录，你会看到出现3个文件：
然后用notepad++打开id——rsa.pub(这个是公钥，不带pub的是私钥，这个不要泄露出去），你会开到一堆字母，全选复制下来。
下面打来浏览器，进入你刚才创建的仓库，设置-部署公钥-新建部署公钥，公钥名称可以不填，将刚才复制的公钥粘贴在公钥内容里面。把授予权限打上勾！，然后添加就可以了。
下面我们进行博客的站点配置，打开Blog文件夹，你会看到这样的文件
这个文件的意思就是对你的博客进行一些设置，比如的你的用户名等等，记住这个文件特别重要！，以后你进行配置都要在这里进行，下面我们用notepad++打开它，这是你的网站信息
要是不懂英文就查字典写，注意：名称后面要放空格，不然会出错！！！。然后滑倒最下面，填写你的git地址，这一步特别关键，你可以照我这个写，同样，别忘了空格！
（本张图片来自vzhiwen，因为我Blog修改了域名，后面会讲到）
然后点击文件保存
在Blog文件路径里，依次输入下列命令：
如果提及不上去，就下载一个插件，在命令行里输入：
再次提交就可以了
clean表示清除缓存，d是deploy的缩写，意思是将代码推送到coding，然后等待一些时间，第一次需要输入coding的用户名和密码或者询问你yes/no，按照说明输入即可，出现下面的字样说明推送完毕
打开浏览器，进入coding，代码-pages服务，部署来源选择master，然后可以选择https访问（）这个就是打开你网页的时候地址栏前面显示的绿锁头，后面写着安全，如果不选择，就会出现叹号，不过影响不大。
现在，你的博客已经基本配置完成，现在就打开你的浏览器，输入你的网址试试吧！
如果你感觉默认Blog主题可以通过这一块来学习，如果给自己Blog换个主题。
为了使博客不太难看，我们需要安装一个主题，切换至刚刚生成的Hexo 目录，安装主题
$ cd Blog
$ git clone themes/next
如果没有Git可以去下一个，百度有一堆
这里选了一个极简的主题，也是Hexo众多主题中最受欢迎的一个。上面出现的喵神的主题 在这里。Hexo也有更多主题供你选择。
在你的站点配置文件里修改——theme: next //刚刚安装主题的，名字
这是 NexT 默认的 Scheme —— Muse ，现在，你已经成功安装并启用了 NexT 主题。下一步我们将要更改一些主题的设定，包括个性化以及集成第三方服务。 4）主题设定 选择 Scheme Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：
注释 # 即可。 选择 Pisce Scheme
所有基础框架都已经创建完成，接下来可以开始写你的第一篇博客了
在Blog/source/_posts下创建你的第一个博客吧，例如，创建一个名为FirstNight.md的文件，用Markdown大肆发挥吧，注意保存。
如：
然后本体测试看看，输入
测试服务启动，你可以在浏览器中输入 访问了
如果测试没问题，就可以上传到Coding了
依次输入下面命令
然后你就可以再浏览器里输入你的Coding项目链接访问了
在Blog路径下输入：
生产后会提示你文件路径，一般在Blog/source/_posts下
文章基本设置
基本设置
基本设置
实现效果图
修改模板，搜索 ，将 # 换成
设置 菜单 菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。 编辑主题配置文件，修改以下内容： 设定菜单内容，对应的字段是 menu。 菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。 菜单示例配置(在主题配置文件中)
若你的站点运行在子目录中，请将链接前缀的 / 去掉 NexT 默认的菜单项有（标注 的项表示需要手动创建这个页面）：
键值设定值显示文本（简体中文）homehome: /主页archivesarchives: /archives归档页categoriescategories: /categories分类页tagstags: /tags标签页aboutabout: /about关于页面commonwealcommonweal: /404.html公益 404
设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用 这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{
language}
.yml （{
language}
为你所使用的语言）。 以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml，在 menu 字段下添加一项：
设定菜单项的图标，对应的字段是 menu_icons。 此设定格式是 item name: icon name，其中 item name 与上一步所配置的菜单名字对应，icon name 是 Font Awesome 图标的 名字。而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。 菜单图标配置示例
在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 Font Awesome 图标名字） 的情况下，NexT 将会使用 作为图标。 请注意键值（如 home）的大小写要严格匹配 7）** 侧栏** 默认情况下，侧栏仅在文章页面（拥有目录列表）时才显示，并放置于右侧位置。 可以通过修改 主题配置文件 中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分，其一是侧栏的位置， 其二是侧栏显示的时机。 设置侧栏的位置，修改 sidebar.position 的值，支持的选项有：
目前仅 Pisces Scheme 支持 position 配置。影响版本5.0.0及更低版本。
设置侧栏显示的时机，修改 sidebar.display 的值，支持的选项有：
搜索功能真心好用，当文章多起来的时候，标签提供的作用已经很少了，只能简单索引，搜索却能精确查找，这里我用的依旧是最简单的本地站内搜索。
编辑 主题配置文件_config.yml
， 修改字段
， 值设置成头像的链接地址。其中，头像的链接地址可以是
地址值完整的互联网:站点内的地址将头像放置主题目录下的（新建 目录若不存在） 配置为：或者 放置在 , 配置为：
打开，在里面添加如下代码：
编辑主题配置文件
添加：
侧栏社交链接的修改包含两个部分，第一是链接，第二是链接图标。 两者配置均在主题配置文件
中。
1、 链接放置在 字段下，一行一个链接。其键值格式是 。
2、 设定链接的图标，对应的字段是 social_icons。其键值格式是 匹配键:图标名称， 匹配键 与上一步所配置的链接的 显示文本 相同（大小写严格匹配），图标名称 是图标的名字（不必带 fa- 前缀）。 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。
打开文件：
相关操作：
enable: true添加相关中文说明，不添加也行。
修改统计规则及busuanzi失效修复
打开文件,在copyright前加上画红线这句话：
代码如下：
然后再合适的位置添加显示统计的代码，如图：
代码如下：
在这里有两中不同计算方式的统计代码：
pv的方式，单个用户连续点击n篇文章，记录n次访问量
uv的方式，单个用户连续点击n篇文章，只记录1次访客数
添加之后再执行hexo d -g，然后再刷新页面就能看到效果
在站点的根目录下：
打开 ，搜索关键字 ：
打开主题配置文件 ,搜索关键字 设置为 ：
编辑文章,增加关键字（next可以根据文章改变时间自动更改）
在 themes/next/source/css/_custom/custom.styl 中添加如下代码：
打开
在 之前添加代码(注意不要放在的后面)
打开 ,在里面添加如下代码：(可以放在最后面)
到此就结束了，运行 ，然后运行 ,然后运行 ，最后打开浏览器在浏览器的地址栏输入 就能看到效果了\（——︶——）/
可以这么设置====>
在上一步修改 中，把刚才的这些代码：
改为
：线条颜色, 默认: ；三个数字分别为(R,G,B): 线条透明度（0——1）, 默认: : 线条的总数量, 默认: 背景的z-index属性，css属性用于控制所在层的位置, 默认:
打开 ，搜索关键字 ,设置为 ,可以更换加载样式：
博客根目录 文件 标签下 修改为：
博客根目录 文件 标签下 修改为：
博客根目录 文件 标签下 修改为：
然后修改博客根目录 文件 标签下 修改为：
博客根目录 同上修改对应位置为
在图标库中找到你自己喜欢的图标, 修改桃心,打开 ,搜索关键字 ,替换图标名
2.隐藏网页底部
打开主题配置文件,搜索关键字 ，如下:(或者直接删除)
打开路径中的,在文件中合适位置——（我加在了最后面）——加入下面代码段：
在中插入下面代码块：
然后就可以上传看效果啦
自己使用的Hexo+NexT主题，主题默认的版权声明配置在文件中
直接把 改为即可开启。
实现效果图
具体实现方法
在路径 中新建 文件,并添加以下内容：
接着打开文件，在 之后， 之前添加如下画红色部分代码（post-footer之前两个DIV）：
代码如下：
然后打开主题配置文件（),在末尾添加：
完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。
评论系统其实是放在Leancloud上的，因此首先需要去注册一个账号
Leancloud官网，点我注册
注册完以后需要创建一个应用，名字可以：blog ，然后 进入应用->
设置->
应用key
获取你的appid 和 appkey 如图所示：
拿到你的appid和appkey之后，打开主题配置文件 搜索 valine，填入appid 和 appkey
记得在Leancloud ->
设置 ->
安全中心 ->
Web 安全域名 把你的域名加进去
ShareSDK
开始使用
注册一个账号，然后打开后台，找到appkey
打开
新建一个文件名为 ，并输入以下代码：
打开：
将以下代码：
改成：
打开 ，添加以下代码：
当我们一开始建完博客时，搜索引擎是搜索不到的，我们需要做一项工作就是通知搜索引擎收录我们的网站。
这里需要做两个事情，一个是，一个是.
我们到百度站长平台里面的站长工具里面去验证网站，大概步骤如下：
第一步：输入网站第二步：站点属性第三步：验证网站
前两步都很简单，第三步：验证网站有以下三种方法：
文件验证HTML标签验证CNAME验证
这里我们选择的方法，然后会得到一个文件。
我使用的主题是，所以我把这个验证文件放在根目录下面，
这样当我们编译网站的时候，这个文件会被原封不动的拷贝到我们博客的根目录下。
好，重要编译hexo并部署，完成验证.
接下来我们进入链接提交.
链接提交有和两种方法，手动就是每次你有新的链接生成，你就需要手动提交链接到百度，这种方法太麻烦了，不使用。
提交有三种方式：
主动推送(实时)自动推送sitemap
这里我们选择方式。
安装hexo的sitemap网站地图生成插件
在你的hexo站点的添加下面的代码
配置成功后，hexo编译时会在hexo站点根目录生成，部署网站后，提交到百度：
下载插件clipboard.js 。
打开 ,新建文件夹 。
把下载 下的 文件夹下的文件拖动到 文件夹下。
打开 ,新建文件 ,代码如下:
打开 ,新建文件 ，代码如下:
修改文件 ,在标签 上面插入代码:
在站点的根目录下执行以下命令：
在如下图所示，新建 gulpfile.js ，并填入以下内容：
生成博文是执行 hexo g &
&
gulp 就会根据 gulpfile.js 中的配置，对 public 目录中的静态资源文件进行压缩。
实现效果图
具体实现方法
打开,向里面加入：
打开,向里面加入：(颜色可以自己定义)
效果如图
安装依赖包,在站点根目录，打开Git Bash ，安装hexo-helper-live2d
在或者添加以下内容
安装需要的宠物文件
如效果图所示的宠物名为haruto， 则为 ,其他宠物包点击live2d-widget-models。如果需要修改宠物的位置，可以在下添加
详细内容可参考hexo-helper-live2d
实现效果图：
实现方法：
在网址输入:
然后将里面的代码copy一下，新建文件并且将代码复制进去，然后保存。将文件放到路径里面，然后打开文件,在末尾（在前面引用会出现找不到的bug）添加以下代码：
实现效果图：
实现方法：
跟那个红心是差不多的，首先在里面建一个叫fireworks.js的文件，代码如下：
打开,在上面写下如下代码：
打开主题配置文件，在里面最后写下:
打开文件,在以下位置插入这样一段代码：
代码如下：
然后在文章上写成类似这样：
打开 站点下 文件。代码全部替换为：(next 5.1以后主题已自带此功能)
打开文章添加top字段,设置数值，数值越大文章越靠前：
我在万网购买的域名，地址：我这里是结尾的域名，一年39大洋anoyer.cn
添加如下的解析
得到域名之后，到控制台进行解析
控制台->
域名与网站(万网)->
域名->
域名列表->
解析
在阿里云控制台，设置主机记录，记录类型为，记录值是IP。其中103.210.21.11是Github Pages服务器指定的IP地址，访问该IP地址即表示访问Coding Pages。
在阿里云控制台，设置主机记录，记录类型为，记录值是。表示将这个主域名映射
如何知道知道的 Coding Pages IP
在中输入
成功之后:
在的文件夹下建立一个的文件内容写入你的域名信息，比如我这里是发布到Coding即可
进入Coding 项目的Pages服务，进入设置
把刚解析的域名绑定上去。到这里就OK了。
在知道了页面的结构之后，你就可以将你的播放器添加在页面的任意位置，开始我是放在了首页，然后发现一上来就自动播放太吵了，于是就放在了侧边栏，想要听得朋友可以手动点击播放，
我们可以直接在网易云音乐中搜索我们想要插入的音乐，然后点击生成外链播放器
然后可以根据你得设置生成相应的html代码，将获得的html代码插入到你想要插入的位置即可
我放在了layout/_macro/sidebar.swig 文件下
在文章中使用 手动进行截断
这种方法可以根据文章的内容，自己在合适的位置添加 标签，使用灵活，也是Hexo推荐的方法。
之前有访问过一些大佬的个人博客，里面有个在线联系功能，看着不错，所以也试着在自己的站点上接入了此功能。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 最新Hexo的入门教程及Next主题配置
本文地址： https://pptw.com/jishu/661532.html