hexo:一个快速,简单和强大的基于Node.js的博客框架。
next主题:拥有丰富而简单的配置,结合第三方服务,打造属于您自己的博客。
系统环境
OS:Windows 10
Sublime Text3
Git:2.13.0(Downloads for Windows)
Node.js:v6.11.2(v6.11.2 LTS)
新建存放博客文件的文件夹名称:E:\MyBlog
前提描述:
hexo 中有两份主要的配置文件,其名称都是 _config.yml
。 其中,一份位于站点根目录(\MyBlog
)下,主要包含 Hexo 本身的配置;另一份位于主题目录(如next,会被存放在 \My Blog\themes\next
)下,这份配置由主题作者提供,主要用于配置主题相关的选项。
为了描述方便,在以下说明中,将前者称为 站点配置文件
, 后者称为 主题配置文件
。
安装Hexo框架与Next主题
安装Hexo
1、任意地方,右击打开 Git Bash Here
,执行命令:
npm install hexo-cli -g
npm install hexo-deployer-git --save # 该依赖后续执行 hexo deploy 会用到
2、进入目录 \MyBlog ,右击打开 Git Bash Here
,执行命令(Hexo会自动在该文件夹下下载搭建网站所需的所有文件):
hexo init
3、安装依赖包
npm install
本地调试
1、hexo clean
# 清除public和编译文件
2、hexo g
或者 hexo generate
# 编译网站目录,生成静态网页
3、hexo s --debug
或者 hexo server
# 调试模式启动服务,默认端口是4000,访问即:localhost:4000
4、Ctrl + c
关闭 server
注:
可以通过 hexo server -p port
指定端口,如:hexo server -p 5000
或者:修改站点配置文件
server:
port: 5000
安装 NexT 主题(仍然在上面 Git Bash 执行下面命令)
1、git clone https://github.com/iissnan/hexo-theme-next themes/next
基本目录结构
主目录
主目录
├── .deploy #需要部署的文件
├── node_modules #Hexo插件
├── public #生成的静态网页文件
├── scaffolds #模板
├── source #博客正文和其他源文件, 404 favicon CNAME 等都应该放在这里
| ├── _drafts #草稿
| └── _posts #文章
├── themes #主题
├── _config.yml #全局配置文件
└── package.json
主题目录
主题目录
├── languages #国际化
| ├── default.yml #默认
| └── zh-CN.yml #中文
├── layout #布局
| ├── _partial #局部的布局
| └── _widget #小挂件的布局
├── script #js脚本
├── source #源代码文件
| ├── css #CSS
| | ├── _base #基础CSS
| | ├── _partial #局部CSS
| | ├── fonts #字体
| | ├── images #图片
| | └── style.styl #style.css
| ├── fancybox #fancybox
| └── js #js
├── _config.yml #主题配置文件
└── README.md #主题介绍
整体依赖已基本完成,下面是配置主题与插件安装。
站点与主题配置
关于设置网站的图标Favicon
1、在 EasyIcon 中找一张(32*32)的ico图标;
2、把图标放在 /themes/next/source/images
里;
3、修改 主题配置文件
# Put your favicon.ico into `hexo-site/source/` directory.
favicon: /images/favicon.ico
关于字体配置(原本用谷歌的字体太慢,而且上次到GitHub上访问不到)
修改 主题配置文件
font:
enable: true
# Uri of fonts host. E.g. //fonts.googleapis.com (Default)
host: //fonts.lug.ustc.edu.cn
具体配置逐项参考:(有的弄不明白可以百度,或者添加什么可以找别人的网站参考)
hexo常用命令笔记
Hexo-NexT搭建个人博客(一)
HEXO建站-基本设置
leanCloud,实现文章阅读量统计
使用Hexo搭建个人博客(基于hexo3.0)
NexT主题集成Algolia搜索插件
hexo的next主题个性化教程:打造炫酷网站
为 Hexo 博客主题 NexT 添加 LiveRe 评论支持
Hexo-设置阅读全文
指出坑点:
1、添加 Algolia 不需要像文章「NexT主题集成Algolia搜索插件」修改Next主题页面的内容。
执行 hexo clean
后执行 hexo algolia
不能执行 hexo g
2、添加 LiveRe 评论系统不需要像「为 Hexo 博客主题 NexT 添加 LiveRe 评论支持」来修改页面。
3、Algolia搜索:当文章内容过长,执行 hexo algolia
会报错(好像是字节过长):
报错信息:
E:\My Blog\node_modules\hexo-algolia\lib\command.js:99
throw err;
^
AlgoliaSearchError: Record at the position 0 objectID=7d9d87199a8f9cf9d7b91e24bf5fc282b92729c3 is too big size=14712 bytes. Contact us if you need an extended quota
at success (D:\My Blog\node_modules\algoliasearch\src\AlgoliaSearchCore.js:351:32)
at process._tickCallback (internal/process/next_tick.js:109:7)
解决办法:
如果不提供内容搜索的情况下
根据提示的内容:E:\My Blog\node_modules\hexo-algolia\lib\command.js:99
找到该js文件,修改:
hexo.extend.filter.register('after_post_render', function(data){
if(data.published){
data.objectID = computeSha1(data.path);
<!-- 将原来的 storedPost 修改成如下配置,这样上传的时候就不会上传content(内容)这个字节 -->
var storedPost = _.pick(data, ['title', 'date', 'slug', 'path', 'objectID']);
注:如果有大牛还有其他解决办法,望留言指导!
添加网易云音乐
搜索自己喜欢的音乐
生成外链代码(这里用iframe,因为可以调整宽度)
目标样式
代码修改
1、在站点配置文件
中添加配置
# 网易云音乐
wangyiCloudMusic:
enable: true
url: //music.163.com/outchain/player?type=2&id=436514312&auto=1&height=66
这样,换取音乐是只需修改站点配置文件
即可!
2、修改代码 \themes\next\layout\_partials\header.swig
{# 网易云音乐 #}
<nav>
...
{% if config.wangyiCloudMusic.enable %}
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=236 height=86 src="{{ config.wangyiCloudMusic.url }}"></iframe>
{% endif %}
</nav>
{% include '../_custom/header.swig' %}
3、关于样式,可以通过 google浏览器 F12 调试功能将样式调整好之后,通过 Sublime Text3 进行关键词所搜。
将文件夹添加到 Sublime Text3 --> 右击文件夹 --> 在文件夹中查找
, 根据需要进行修改!