hexo是什么？简单的说，就是一个静态博客的生成工具也可以说是一个搭建静态博客的框架，我这个博客就是就是基于hexo生成的。9月份把这个博客用hexo折腾出来，前几天ACM区域赛事结束了，所以想记录下来折腾的过程，留着以后备用。这里只说如何在windows下成功安装hexo并运行起来，关于主题以及配置不做记录。

安装Node.js

因为Hexo是基于Node.js的，所以必须先安装Node，所以请点击这里去下载适合自己windows版本的Node吧。

（注意：在安装步骤里Custom Setup这一步记得选Add to PATH）。

安装好以后，打开，(那对于小白来说如何打开呢？然后输入，点击确定，这样就打开了.)，输入,如果出现版本号，那说明安装成功了，并且环境变量也配置好了，如果是未知命令那就要配置下环境变量。

安装Hexo

还是打开然后输入安装hexo的命令：

这一步需要一点时间，请稍等一会，让他安装好。

安装完成后在里输入出现一系列版本号就是安装成功啦QAQ

到这里，就要恭喜你成功完成了Hexo的安装了。

初始化个人博客仓库

在电脑中建一个文件夹（路径根据自己爱好，我是在E盘里建了一个名为Blog的文件夹），我在这里命名为Blog吧。

然后通过的到这个文件夹下，运行命令：

这个时候会将这个文件夹初始化为一个博客专用文件夹，生成过程稍微要点时间，耐心等待。

然后输入：

之后npm将会自动安装你需要的组件，只需要等待npm操作即可。

开始生成博客

继续操作：

然后输入：

会出现：

在浏览器里打开http://localhost:4000/，你将会看到：

到这里你已经有了一个属于你的本地Blog了。

why不是Github，因为我个人认为搭建一个个人博客用Github会有诸多不便。

比如：1.搭建一个博客肯定就要往百度推送，不然别人搜不到你的博客有什么意思。而如果部署Github的话，百度无法抓取blog链接。2.Coding服务器在中国，所以Blog加载速度比GitHub快很多。

注册Coding

现在我们的博客已经在本地搭建完成，那要怎么才能让别人看到我们的博客呢？我们选择把我们的静态网页的代码发到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，按照说明输入即可，出现下面的字样说明推送完毕

打开pages服务

打开浏览器，进入coding，代码-pages服务，部署来源选择master，然后可以选择https访问（）这个就是打开你网页的时候地址栏前面显示的绿锁头，后面写着安全，如果不选择，就会出现叹号，不过影响不大。 现在，你的博客已经基本配置完成，现在就打开你的浏览器，输入你的网址试试吧！

如果你感觉默认Blog主题可以通过这一块来学习，如果给自己Blog换个主题。

主题安装

为了使博客不太难看，我们需要安装一个主题，切换至刚刚生成的Hexo 目录，安装主题 $ cd Blog $ git clone https://github.com/iissnan/hexo-theme-next 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大肆发挥吧，注意保存。 如：

然后本体测试看看，输入

测试服务启动，你可以在浏览器中输入https://localhost:4000 访问了

如果测试没问题，就可以上传到Coding了

依次输入下面命令

然后你就可以再浏览器里输入你的Coding项目链接访问了

创建文章

在Blog路径下输入：

生产后会提示你文件路径，一般在Blog/source/_posts下

文章基本设置

创建标签

基本设置

创建分类

基本设置

标签图标

实现效果图

修改模板，搜索 ，将 # 换成

设置菜单：

设置 菜单 菜单配置包括三个部分，第一是菜单项（名称和链接），第二是菜单项的显示文本，第三是菜单项对应的图标。 NexT 使用的是 Font Awesome 提供的图标， Font Awesome 提供了 600+ 的图标，可以满足绝大的多数的场景，同时无须担心在 Retina 屏幕下 图标模糊的问题。 编辑主题配置文件，修改以下内容： 设定菜单内容，对应的字段是 menu。 菜单内容的设置格式是：item name: link。其中 item name 是一个名称，这个名称并不直接显示在页面上，她将用于匹配图标以及翻译。 菜单示例配置(在主题配置文件中)

若你的站点运行在子目录中，请将链接前缀的 / 去掉 NexT 默认的菜单项有（标注 的项表示需要手动创建这个页面）：

设置菜单项的显示文本。在第一步中设置的菜单的名称并不直接用于界面上的展示。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 来去掉图标。

打开文件：

相关操作：

1. enable: true
2. 添加相关中文说明，不添加也行。

修改统计规则及busuanzi失效修复

打开文件,在copyright前加上画红线这句话：

代码如下：

然后再合适的位置添加显示统计的代码，如图：

代码如下：

在这里有两中不同计算方式的统计代码：

1. pv的方式，单个用户连续点击n篇文章，记录n次访问量

uv的方式，单个用户连续点击n篇文章，只记录1次访客数

添加之后再执行hexo d -g，然后再刷新页面就能看到效果

在站点的根目录下：

打开 ，搜索关键字 ：

打开主题配置文件 ,搜索关键字 设置为 ：

编辑文章,增加关键字（next可以根据文章改变时间自动更改）

在 themes/next/source/css/_custom/custom.styl 中添加如下代码：

修改

打开 在 之前添加代码(注意不要放在< /head>的后面)

---

修改配置文件

打开 ,在里面添加如下代码：(可以放在最后面)

到此就结束了，运行 ，然后运行 ,然后运行 ，最后打开浏览器在浏览器的地址栏输入 就能看到效果了（￣︶￣）/

---

如果你感觉默认的线条太多的话

可以这么设置====>

在上一步修改 中，把刚才的这些代码：

改为

---

配置项说明

• ：线条颜色, 默认: ；三个数字分别为(R,G,B)
• : 线条透明度（0~1）, 默认:
• : 线条的总数量, 默认:
• 背景的z-index属性，css属性用于控制所在层的位置, 默认:

打开 ，搜索关键字 ,设置为 ,可以更换加载样式：

内容板块透明

博客根目录 文件 标签下 修改为：

菜单栏背景

博客根目录 文件 标签下 修改为：

站点概况背景

博客根目录 文件 标签下 修改为：

然后修改博客根目录 文件 标签下 修改为：

按钮背景

博客根目录 同上修改对应位置为

1. 在图标库中找到你自己喜欢的图标, 修改桃心,打开 ,搜索关键字 ,替换图标名

2.隐藏网页底部

打开主题配置文件,搜索关键字 ，如下:(或者直接删除)

打开路径中的,在文件中合适位置~~（我加在了最后面）~~加入下面代码段：

在中插入下面代码块：

然后就可以上传看效果啦

自己使用的Hexo+NexT主题，主题默认的版权声明配置在文件中

直接把 改为即可开启。

实现效果图

具体实现方法

在路径 中新建 文件,并添加以下内容：

接着打开文件，在 之后， 之前添加如下画红色部分代码（post-footer之前两个DIV）：

代码如下：

然后打开主题配置文件（),在末尾添加：

完成以上设置之后，在每篇文章之后都会添加如上效果图的样子。

注册Leancloud

评论系统其实是放在Leancloud上的，因此首先需要去注册一个账号

Leancloud官网，点我注册

注册完以后需要创建一个应用，名字可以：blog ，然后 进入应用->设置->应用key

获取你的appid 和 appkey 如图所示：

博客主题配置文件配置

拿到你的appid和appkey之后，打开主题配置文件 搜索 valine，填入appid 和 appkey

配置域名

记得在Leancloud -> 设置 -> 安全中心 -> Web 安全域名 把你的域名加进去

• ShareSDK

• 开始使用 注册一个账号，然后打开后台，找到appkey

  

• 打开

• 新建一个文件名为 ，并输入以下代码：

• 打开：

• 将以下代码：

• 改成：

• 打开 ，添加以下代码：

当我们一开始建完博客时，搜索引擎是搜索不到的，我们需要做一项工作就是通知搜索引擎收录我们的网站。

如何被百度收录

这里需要做两个事情，一个是，一个是.

验证网证

我们到百度站长平台里面的站长工具里面去验证网站，大概步骤如下：

1. 第一步：输入网站
2. 第二步：站点属性
3. 第三步：验证网站

前两步都很简单，第三步：验证网站有以下三种方法：

• 文件验证
• HTML标签验证
• CNAME验证

这里我们选择的方法，然后会得到一个文件。 我使用的主题是，所以我把这个验证文件放在根目录下面， 这样当我们编译网站的时候，这个文件会被原封不动的拷贝到我们博客的根目录下。

好，重要编译hexo并部署，完成验证.

链接提交

接下来我们进入链接提交. 链接提交有和两种方法，手动就是每次你有新的链接生成，你就需要手动提交链接到百度，这种方法太麻烦了，不使用。 提交有三种方式：

1. 主动推送(实时)
2. 自动推送
3. 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字段,设置数值，数值越大文章越靠前：

1.申请域名

• 我在万网购买的域名，地址：https://wanwang.aliyun.com/domain/com?spm=5176.8142029.388261.137.LoKzy7
• 我这里是结尾的域名，一年39大洋anoyer.cn

2.解析域名

添加如下的解析

得到域名之后，到控制台进行解析

控制台->域名与网站(万网)->域名->域名列表->解析

在阿里云控制台，设置主机记录，记录类型为，记录值是IP。其中103.210.21.11是Github Pages服务器指定的IP地址，访问该IP地址即表示访问Coding Pages。

在阿里云控制台，设置主机记录，记录类型为，记录值是。表示将这个主域名映射

如何知道知道的 Coding Pages IP

在中输入

成功之后:

3.配置

• 在的文件夹下建立一个的文件
• 内容写入你的域名信息，比如我这里是
• 发布到Coding即可

4.Coding 配置

进入Coding 项目的Pages服务，进入设置

把刚解析的域名绑定上去。到这里就OK了。

在知道了页面的结构之后，你就可以将你的播放器添加在页面的任意位置，开始我是放在了首页，然后发现一上来就自动播放太吵了，于是就放在了侧边栏，想要听得朋友可以手动点击播放， 我们可以直接在网易云音乐中搜索我们想要插入的音乐，然后点击生成外链播放器

然后可以根据你得设置生成相应的html代码，将获得的html代码插入到你想要插入的位置即可

我放在了layout/_macro/sidebar.swig 文件下

在文章中使用 手动进行截断 这种方法可以根据文章的内容，自己在合适的位置添加 标签，使用灵活，也是Hexo推荐的方法。

​ 之前有访问过一些大佬的个人博客，里面有个在线联系功能，看着不错，所以也试着在自己的站点上接入了此功能。

注册

首先在DaoVoice注册个账号，点击->邀请码是。

完成后，会得到一个，后面会用到：

修改head.swig

修改文件，添加内容如下：

位置贴图：

主题配置文件

在文件中添加内容：

聊天窗口配置

附上我的聊天窗口的颜色、位置等设置信息：

至此，网页的在线联系功能已经完成，重新，上传GitHub后，页面上就能看到效果了。

就比如说你现在往右下角看看(～￣▽￣)～ ，欢迎撩我（滑稽）。

因为next主题自带打赏功能，所以我们只需要在next的主题配置文件中找到如下代码,文件夹是我在blog/source下面建立的文件夹，然后把你的微信及支付宝收钱码图片拉进去，修改名字为和

打开 ,修改：

1.https://www.jianshu.com/p/f054333ac9e6

    以上就是本篇文章【Hexo的入门教程及Next主题配置】的全部内容了，欢迎阅览 ！ 文章地址：http://lanlanwork.gawce.com/news/11483.html 
     资讯      企业新闻      行情      企业黄页      同类资讯      首页      网站地图      返回首页 阁恬下移动站 http://lanlanwork.gawce.com/mobile/ , 查看更多