Hexo+Next搭建个人博客

进入本人博客


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
初始化hexo生成的博客

安装 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 --> 右击文件夹 --> 在文件夹中查找 , 根据需要进行修改!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容