hexo创建个人博客(附加插入音乐、分享、评论、标签页、搜索)

你是不是见多了各种大v的个人博客,是不是也想拥有这样的一个个人博客,(静静的装B!)看这里,就对了。一步一步教你创建自己的博客。
  现在用的比较多的就是hexo(快速、简洁且高效的博客框架),支持markDown,有丰富的插件和主题

1、安装环境

  安装gitNode.js,git就不用多说了,如果连git都不会装,请出去把门关上。
Node.js 的安装可以使用两种方法:
1、点击前面链接直接下载安装即可
2、通过终端命令行:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

之后重启终端,如果还找不到nvm命令可尝试重启电脑
接着执行

$ nvm install 4

即可安装完成
以上两个条件已具备的话,即可开始安装hexo博客框架

$ npm install -g hexo-cli

执行完成后hexo就安装成功了,第一步结束,环境配置完毕可以开始创建自己的博客了

2、github上创建仓库

github帐号的创建我也不再次赘述了。下面说一下仓库的创建,名字前面部分可以自己随便起。后面部分统一为github.io ,其他的均不需设置。如下图:


屏幕快照 2016-05-09 下午5.36.45.png

3、博客的创建

3.1初始化
cd /Desktop  //cd到你的桌面执行:(init 后面的就是你的名字,当然你也可以随便起,不影响的,仅仅是创建一个文件夹)
$ hexo init nanshanyi.github.io

桌面会生成一个文件夹nanshanyi.github.io

3.2基础配置

打开_config.yml文件进行基础配置(可以使用<a href="http://www.sublimetext.com/" >sublime</a>或者<a href="https://atom.io/" >atom</a>来打开,都是很很强大的代码编辑器,可安装各种插件,前端开发必备)

title: 南山亿的技术博客   //博客名字
subtitle: 积少成多    //小标题可以写自己喜欢的话
description:          //博客描述
author: 南山忆     //作者名字
language: zh-Hans   //语言(此处为简体中文)
url:  //自己购买的域名网址(没有可不写)
theme:   //主题的名字
deploy: 
type: git //使用git发布
repo: https://github.com/nanshanyi/nanshanyi.github.io.git //刚刚创建的github仓库的地址
3.3安装主题

博客要想炫酷漂亮,一款合适的主题必不可少,hexo本身就提供了50种<a href="https://hexo.io/themes/" >主题</a> 可以预览查看,选择一款自己喜欢的主题
  点击图片即可预览,看到此主题的效果,点击蓝色主题名即可进入此主题的github仓库,一般主题作者都写有使用方法。


屏幕快照 2016-05-09 下午6.00.09.png
cd 到nanshanyi.github.io文件下
$ git clone https://github.com/iissnan/hexo-theme-next themes/next

这里使用的是一款简约漂亮的主题,使用的人挺多的。之后就可以在nanshanyi.github.io/themes目录下看到nex(以下next均为主题名,路径中为主题文件夹名。使用的主题不同只要把next换成相应的名字即可)主题。这个主题有三种布局展示形式,可自行挑选主题的详细配置<a href="http://theme-next.iissnan.com/getting-started.html" >请看这里</a>

3.4创建博客文章与发布

在nanshanyi.github.io 目录下终端命令:

$ hexo new '文件名' //会在source/_posts创建一个文件名.md文件

这就可以使用markdown编辑器开始写自己的博客了(上面提到有工具)

---
title: new//博客标题
date: 2016-05-10 10:47:49 //创建时间
tags:  //分类标签
---
  这里写正文(上面的---是必要的)

本地查看效果预览

$ hexo s

浏览器打开https://localhost:4000 即可查看效果
  发布到 github:

$ hexo clean && hexo g && hexo d //发布到 github

发布到 github 后可以使用 http://nanshanyi.github.io 访问(请使用你自己的网址)

3.5博客中插入图片,音乐

基本分为两种办法
(1)放在本地文件
首先在nanshanyi.github.io目录下确认 _config.yml 中有 post_asset_folder:true 。
在 hexo 目录,执行

$ npm install https://github.com/CodeFalling/hexo-asset-image --save

之后再使用 hexo new 'new' 创建新博客的时候,会在source/_posts里面创建.md文件的同时生成一个相同的名字的文件夹。把该文章中需要使用的图片放在该文件夹下即可。
使用的时候

![“图片描述”(可以不写)](/文件夹名/你的图片名字.JPG)
例如:
![ ] (new/text.jpg)

(2)放在<a href="https://portal.qiniu.com/signup?code=3lglas6pgi2qa">七牛</a>上,需要先注册,上传图片生成链接,直接在文章中使用链接即可。
(3)插入音乐
  可以使用网易云音乐,搜索想要的歌曲,点击歌曲名字进入播放器页面,点击生成外链播放器;复制代码,直接粘贴到博文中即可。这样会显示一个网易的播放器,可以把

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="http://music.163.com/outchain/player?type=2&id=32192436&auto=1&height=32"></iframe>
//其中的width=298 height=52 均改为0就看不到了,依然可以播放音乐
屏幕快照 2016-05-10 下午2.01.52.png

屏幕快照 2016-05-10 下午1.56.58.png

4、集成多说评论,分享

申请<a href="http://duoshuo.com/">多说</a>帐号,打开页面点击我要安装注册帐号


屏幕快照 2016-05-10 上午10.38.15.png

在themes/next目录下打开 _config.yml,设置

  duoshuo_shortname:  nanshanyi //上面多说域名中填的内容
  需要分享的打开duoshuo_share: true 即可,支持分享到微博、QQ空间、微信

然后打开themes\landscape\layout_partial\article.ejs文件
把以下代码

  <% if (!index && post.comments && config.disqus_shortname){ %>
  <section id="comments">
    <div id="disqus_thread">
      <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
    </div>
  </section>
  <% } %>

替换为

<% if (!index && post.comments && config.duoshuo_shortname){ %>
  <section id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread" data-thread-key="<%= post.layout %>-<%= post.slug %>" data-title="<%= post.title %>" data-url="<%= page.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:'<%= config.duoshuo_shortname %>'};
      (function() {
        var ds = document.createElement('script');
        ds.type = 'text/javascript';ds.async = true;
        ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
        ds.charset = 'UTF-8';
        (document.getElementsByTagName('head')[0] 
         || document.getElementsByTagName('body')[0]).appendChild(ds);
      })();
      </script>
    <!-- 多说公共JS代码 end -->
  </section>
  <% } %>

然后你hexo s ,打开http://localhost:4000/ 打开文章看一下,评论和分享已经静静的躺在那了

屏幕快照 2016-05-10 下午3.36.43.png

5、添加标签页

在nanshanyi.github.io文件目录下执行

$ hexo new page tags //会在nanshanyi.github.io/source下创建tags文件夹内部是一个index.md和index文件夹

修改nanshanyi.github.io/themes/next/_config.yml

menu:
  home: /      //主页
  #categories: /categories //分类
  archives: /archives   //归档
  tags: /tags   //标签(添加此行即可)
  about: /about   //关于
  #commonweal: /404.html

首页菜单就会有便签项,点击即可进入标签页。

6、添加搜索功能

next支持Swiftype 、微搜索和Local Search
  (1)Swiftype (收费的没有免费版,进可以使用15天)是为网站和移动应用提供内部搜索的工具,点击进入<a href="https://swiftype.com/users/sign_up">Swiftype注册页面</a> ,注册之后需要填写自己的博客的网址
然后选择


屏幕快照 2016-05-10 下午9.07.45.png

选择 install Search


屏幕快照 2016-05-10 下午9.10.01.png

途中的即为swiftype_key
修改nanshanyi.github.io/themes/next/_config.yml中的
swiftype_key:上面红圈中的内容

点击 resume Configuration 选择 search field edit


屏幕快照 2016-05-10 下午9.49.27.png

save
发布即可看到效果


屏幕快照 2016-05-10 下午9.54.34.png

(2)添加本地搜索
安装 hexo-generator-search,在nanshanyi.github.io目录下执行以下命令:
$ npm install hexo-generator-search --save

在nanshanyi.github.io/themes/next/_config.yml添加

search: 
      path: search.xml
      field: post

发布即可看到效果,和上面的 swiftType 效果差不多,就不再粘图片了。

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

推荐阅读更多精彩内容