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 来去掉图标。
打开文件:
相关操作:
- enable: true
- 添加相关中文说明,不添加也行。
修改统计规则及busuanzi失效修复
打开文件,在copyright前加上画红线这句话:
代码如下:
然后再合适的位置添加显示统计的代码,如图:
代码如下:
在这里有两中不同计算方式的统计代码:
-
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属性用于控制所在层的位置, 默认:
打开 ,搜索关键字 ,设置为 ,可以更换加载样式:
内容板块透明
博客根目录 文件 标签下 修改为:
菜单栏背景
博客根目录 文件 标签下 修改为:
站点概况背景
博客根目录 文件 标签下 修改为:
然后修改博客根目录 文件 标签下 修改为:
按钮背景
博客根目录 同上修改对应位置为
- 在图标库中找到你自己喜欢的图标, 修改桃心,打开 ,搜索关键字 ,替换图标名
2.隐藏网页底部
打开主题配置文件,搜索关键字 ,如下:(或者直接删除)
打开路径中的,在文件中合适位置~~(我加在了最后面)~~加入下面代码段:
在中插入下面代码块:
然后就可以上传看效果啦
自己使用的Hexo+NexT主题,主题默认的版权声明配置在文件中
直接把 改为即可开启。
实现效果图
具体实现方法
在路径 中新建 文件,并添加以下内容:
接着打开文件,在 之后, 之前添加如下画红色部分代码(post-footer之前两个DIV):
代码如下:
然后打开主题配置文件(),在末尾添加:
完成以上设置之后,在每篇文章之后都会添加如上效果图的样子。
注册Leancloud
评论系统其实是放在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字段,设置数值,数值越大文章越靠前:
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