安装hexo
我的小窝:https://zelsonia.coding.me/hexo/
- 准备:node.js(npm), git, coding账号
npm install -g hexo
安装hexo在本地sites下新建空文件夹来放置hexo
touch hexo
初始化
hexo init
本地打开查看是否运行成功
$ hexo g
$ hexo s
这两行命令是下面两个的缩写
hexo generate
hexo server
网址输入localhost:4000 查看效果
安装next主题
git clone git@github.com:iissnan/hexo-theme-next.git themes/next
如果想要其他主题,自行搜索,把ssh替换上面的git@github.com:iissnan/hexo-theme-next.git
安装好后,在根目录下的_config.yml配置文件修改
修改Hexo目录下的config.yml配置文件中的theme属性,将其设置为nexttheme:next
注意:Hexo有两个config.yml文件,一个在根目录,一个在theme下,此时修改的是在根目录下的。清除缓存,重新生成,查看localhost:4000,看主题是否生效
hexo clean 清除缓存 网页正常情况下可以忽略此条命令
$ hexo g
$ hexo s
修改配置文件
coding新创建项目,把ssh copy下来,修改根目录的配置文件_config.yml,注意缩进,还有冒号后的空格
deploy:
type: git
repository:
#github: git@github.com:ShomyLiu/ShomyLiu.github.io.git还可以github也一起
coding: git@git.coding.net:shomyliu/shomyliu.git
branch: master
在博客的source/目录下需要创建一个空白文件,至于原因,是因为 coding.net需要这个文件来作为以静态文件部署的标志。就是说看到这个Staticfile就知道按照静态文件来发布。
coding还需要在根目录下建一个.nojekyll空文件(coding page 配置hexo报错 the xx theme not be found
在根目录下建一个.nojekyll空文件就可以了,因为Coding默认支持Jekyll搭建网站)
cd source/
touch Staticfile
cd ../
到hexo
touch .nojekyll
上到coding
npm install hexo-deployer-git --save
安装这个,要不之后会报错error deployer not found:git上到coding
hexo clean
hexo d -g
如果报错了,看看是不是之前提到过的报错。coding 上选择pages, 选master分支,他就自行部署了。成功后,若是没有样式,需要更改一下_config.yml文件,其中的url和root属性。
url:http://zelsonia.coding.me/hexoTest/
root: /hexoTest
ps: 整个这个文件夹不需要git init,push之类的操作。
报错
ERROR Script load failed: themes\next\scripts\tags\exturl.js
Error: Cannot find module 'hexo-util'
运行npm install hexo-util --save
next进阶
站点配置hexo/_config.yml
语言,和个人信息的部分,下面列出应该需要修改的,有的可能某一种theme下看不到
language: zh-Hans
author
title
subtitle
description
主题配置next/_config.yml
tag页面点了404
添加目录云、标签云页面,不添加就会404
hexo new page "tags"
hexo new page "categories"
把主题配置文件里menu里对应的注释去掉,menu上就能看到分类和标签
添加新页面后,他的中文怎么改
如果添加了新的单词,就要添加翻译在文件里
languages/{language}.yml,例如简体中文就是zh-Hans.yml
侧边栏
sidebar positon
侧边栏位置,left,right
头像
avatar: url或者 /images/avatar.jpg
图片放在source/images下
缩略图
网站缩略图标icon
favicon: /favicon.ico
缩略图可以在这个网站做http://tool.lu/favicon/
代码高亮
code hightlight 高亮
github链接
social:
#LinkLabel: Link
GitHub: https://github.com/zelsonia
图标是social_icons
日志发布
发布新日志,新博客
hexo new "Hello"
然后到source/_post下编辑同名md文件再clean && d -g
ps: md文件里 ##
后面需要空格
删除日志
直接_post下删了,再clean,d -g
日志添加分类,标签
生成md文件时,在顶部会有填写分类标签的地方,像这篇我就是这样写的
categories: hexo
tags: [hexo,node.js]
下面的日志,分类,标签是有了1个后才会出来,日志本来就有一篇,所以其他的两个一开始是没有的。
放音乐
打开网页版网易云音乐。
如果只是加入单曲,只需要搜索歌曲,点开歌曲名,点击生成外链播放器,复制html代码(可以选择是否自动播放),将html代码无需任何修改放入markdown文章里就OK了。
如果想要加入歌单,就需要自己创建歌单,然后分享歌单,找到自己的分享动态,点进去可以看到有“生成外链播放器”这些字眼,其余操作就和上面一样了。不过,你的歌单有变化的话,这个外链的歌曲同样跟着变,这一点挺棒的。
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=471374061&auto=1&height=66"></iframe>
嵌入不自动播放只需要把以上代码中的auto改为=0即可,样子是这样的
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=471374061&auto=1&height=66"></iframe>
阅读更多 设置
在文章的想要截断的区域, 添加这个``
其他应用
每篇文章的阅读量
http://www.tuicool.com/articles/YB3EJnz
注意事项是:config里已经有appid等参数,还有中文翻译那里也已经存在
本地图片方便引入
http://www.jianshu.com/p/c2ba9533088a
- 首先确认
_config.yml
中有 post_asset_folder:true - hexo下执行
npm install https://github.com/CodeFalling/hexo-asset-image --save
- 之后新建的md会在
_posts
下出现同名文件夹,是放图片的,之后![](articleName/logo.jpg)
rss订阅
http://www.jianshu.com/p/264024768d03
这个教程的问题是
plugins: hexo-generate-feed
这是一行的,上面写成两行会报错
首页footer页尾修改
首先,找到 \themes\next\layout_partials\下面的footer.swig文件,打开会发现,那两行就是最后三段
可以把div里的改成{{ __('footer.powered') }}
去翻译的文件里footer那里添加就行不要重复。
统计,评论,搜索
http://theme-next.iissnan.com/third-party-services.html#algolia-search
next官方给的好多扩展,我用了
- 网易云跟帖 评论(需要一级域名)
- 百度统计 人次
- 不蒜子统计 首页统计
- Algolia 搜索
里面都很详细了。
几点注意:1.百度统计不是站点上显示,是去那边看人次和次数。
2.hexo algolia 搜索,新增文章都要执行添加进index
没有一级域名,就暂时不能搞评论了。
更新hexo
更新hexo:
npm update -g hexo
更新主题:
cd 到主题文件夹,执行命令:
git pull
更新插件:
npm update