HEXO NEXT建站备忘录

原文地址： https://www.vincentqin.tech/posts/build-a-website-using-hexo/

Hexo作为建立Blog利器，为我们没有JS基础的小白们提供了建立专属自己博客的机会！经常使用的语法很简单，我们完全可以在10min分钟之内建立自己的Blog，后期的优化才是最耗费时间的。好了，直接进入正文。

hexo clean    # 清除缓存，简写 hexo c
hexo generate # 作用：建立静态页面， 简写 hexo g 
hexo deploy   # 部署自己的blog，本人部署在了Git上，简写 hexo d
hexo server   # 以启动本地服务， 可预览，简写 hexo s
hexo new blog_name #　新建以blog_name为名的blog
在.md文档中加入 <!-- more --> 可以显示“阅读全文”

显示文章阅读数量

另外：显示文章阅读量， 服务主要用了LeanCloud服务提供商

主题设置

Make the theme more beautiful, recommended

Plus: 我使用的是Next主题

关于多说

多说已死，评论系统转到了Disqus，但是被墙的事实让人感觉不爽。几经周折，从多说转到Disqus，然后在gitment和gitalk之间徘徊，最后还是选择了valine，不过它只能在中国区进行评论，于是我还是保留了gitalk。于是我总结出来我属于爱折腾的那种人。

关于旋转头像

把侧边栏头像变成圆形&鼠标停留在上面出现旋转效果，具体修改文件的位置是next\source\css\_common\components\sidebar\sidebar-author.styl。更为具体的修改过程见Ehlxr写的这篇博客。

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;
  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
  -webkit-animation: play 2s ease-out 1s 1;
  -moz-animation: play 2s ease-out 1s 1;
  animation: play 2s ease-out 1s 1; 

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.5s ease-out;
  -moz-transition: -moz-transform 1.5s ease-out;
  transition: transform 1.5s ease-out;
}

img:hover {
  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}
```language

背景颜色设置

其实NEXT主题已经自带了几种动画了，我用的是three_waves；但是呢，存在一个问题就是因为Blog背景是透明的，这样文字和背景动画就有重叠效果了，很不方便阅读，这时把背景色设置为白色即可。添加background: white到如下路径next\source\css\_schemes\Muse\_layout.styl

.header-inner, .container .main-inner, .footer-inner {
  background: white;
  +mobile() { width: auto; }
}

页面宽度设置

有时候我们可能会嫌弃博客的页面太小，留白过大。这时候可以对页面宽度进行设置，可以参考Hexo Next主题 Issue #759。对于 Pisces Scheme，需要同时修改 header 的宽度、.main-inner 的宽度以及 .content-wrap 的宽度。例如，使用百分比（Pisces 的布局定义在 source/css/_schemes/Picses/_layout.styl 中）：

.header{ width: 80%; } /* 80% */
.container .main-inner { width: 80%; } /* 80% */
.content-wrap { width: calc(100% - 260px); }

优化友情链接

新建一个Friends页面：

hexo new page Friends

新建样式，进入themes\next\source\css\_custom\custom.styl，在最后新加上几行代码:

$shadowColor      = #333;
$themeColor       = #222;
$link-image-size  = 180px;

.link-body{
    ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin: 0;
        padding: 0;
        .link{
            max-width: $link-image-size;
            min-width: $link-image-size;
            max-height: $link-image-size;
            min-height: $link-image-size;

            position: relative;
            box-shadow: 0 0 1px $shadowColor;
            magin: 6px;
            width: 20%;
            list-style: none!important;
            overflow: hidden;
            border-radius: 6px;
            img{
                object-fit: cover;
                transition: transform .6s ease-out;
                vertical-align: middle;
                border-bottom: 4px solid #eee;//#e5642b;
                transition: 0.4s ;
                width: 100%;
                border-radius: 90px 90px 90px 90px;

                display: inline-block;
                float: none;
                vertical-align: middle;
            }
            .link-name{
                position: absolute;
                bottom: 0;
                width: 100%;
                color: #666;
                text-align: center;
                text-shadow: 0 0 1px rgba(0,0,0,.4);
                background: rgba(255,255,255,.7);
            }
            &:hover{
                img{
                    overflow: hidden;
                    //transition: 0.4s;
                    border-radius: 0 0 0 0;
                }
                .link-name{
                    color: $themeColor;
                    text-shadow: 0 0 1px $themeColor;
                }
            }
        }
    }
}

然后编辑站点的source\Friends下的index.md文件，内容如下：

<div class="link-body">
    <ul>
    <!--your friend begin-->
    <li class="link"><a href="your_friends_link" title="balabala" target="_blank" >
        <img src= "image_path" alt="balabala"/>
        <span class="link-name"> balabala</span></a></li>
    <!--your friend end-->

    <!--your another friend begin-->
    <li class="link"><a href="your_friends_link" title="balabala" target="_blank" >
        <img src= "image_path" alt="balabala"/>
        <span class="link-name"> balabala</span></a></li>
    <!--your another friend end-->
    ...
    </ul>
</div>

增加gitter即时聊天到sidebar

参考sidecar的示例，在themes\next\layout\_layout.swig的</body>前增加如下代码：

  <!-- add gitter on sidebar -->
  <script>
    ((window.gitter = {}).chat = {}).options = {
      room: 'vincentqin-blog-chat/Lobby'
    };
  </script>
  <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>

然后在themes\next\source\css\_custom\custom.styl里增加如下设置：

// adjust the position of gitter
.gitter-open-chat-button {
      right: 20px;
      padding: 10px;
      background-color: #777;
}

@media (max-width: 600px) {
    .gitter-open-chat-button,
    .gitter-chat-embed {
        display: none;
    }
}

添加页面背景

将背景图片放在themes\next\source\images下，例如bg.jpg，然后themes\next\source\css\_custom\custom.styl里增加如下设置：

@media screen and (min-width:1200px) {

    body {
    background:url(/images/bg.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed; // 鼠标滚动背景不动
    background-position:50% 50%;
    }
    #footer {
        color:#c8c8c8;
    }
}

这里是我custom.styl所有配置，仅供参考。

MarkDown编辑器

推荐Haroopad

插入PDF文档以及图片

  1. 插入PDF文档：
    将相应的PDF文档放在与博客标题同名的文件夹内，然后再按照如下方式进行插入。
[点我，这里是PDF文档](latex入门教程.pdf)
  1. 利用js嵌入图片
<img src= image_path alt="Lytro相机" width="100%">
<center>Lytro</center>

注意以上的`image_path`既可以是图床中的路径，亦可以把图片放在`source/images/`文件下，然后`image_path=/images/logo.png`，当然也可以如下插入图片，更加方便。
``` js
[图片上传失败...(image-2fc882-1512967929071)]
```
  1. 利用插件，以下我在Github上找到的别人已经做好的一个小工具。

  • 安装 hexo-tag-asset-res

    打开Git Shell, 在Hexo根目录下, 输入如下代码

    $ npm install hexo-tag-asset-res --save

  • 修改Hexo根目录下_config.yml文件

    打开Hexo根目录, 找到_config.yml文件, 用任何一个文本编辑器打开, 找到如下代码

    post_asset_folder: false

  • 测试插入
    <center>{% asset_img 1.jpg 林青霞%}</center>

配置个性化的字体

在next\source\css\_variables\custom.styl文件中添加如下内容。

// 修改成你期望的字体族
$font-family-base   = "Monda","Microsoft YaHei", Verdana, sans-serif
// 标题，修改成你期望的字体族
$font-family-headings   = "Roboto Slab", Georgia, sans
// 代码字体
$code-font-family   = "PT Mono", "Input Mono", Consolas, Monaco, Menlo, monospace
// 博客字体
$font-family-posts  = "Monda"
// logo字体
$font-family-logo   = "Lobster Two"

在博客中插入网易云音乐

我们可以利用网易云提供的代码直接在markdown文档里面插入。

  • 在网页上找到你想要播放的音乐，如下图：
    {% asset_img wangyiMusic.png %}
  • 点击生成外链播放器
    {% asset_img wangyiMusicCode.png %}

注意自动播放，以及音乐播放器的大小可调。

  • 在Markdown文档里插入如下代码
<center><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=500 height=86 src
="http://music.163.com/outchain/player?type=2&id=29722263&auto=0&height=66"></iframe></center>

<center><iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=500 height=86 src="http://music.163.com/outchain/player?type=2&id=29722263&auto=0&height=66"></iframe></center>

同时部署

接下来主要涉及到以hexo框架搭建博客的版本管理。同时部署其实很简单，仅仅修改站点配置文件的_config.yml即可。在最后的deploy底下新增一项：

repo: 
github: https://github.com/Your_Github_ID/Github_ID.github.io.git 
coding: https://git.coding.net/Your_Coding_ID/Your_Repo_Name.coding.me.git

以后hexo d时，就会同时部署到github和coding。

版本管理

方案 1（推荐）

下载第三方插件，more information refers to this link hexo-git-backup. When you are well configured, you can just run the following command.

hexo backup     #或 hexo b

方案 2

这里涉及到git的部分知识。

目的：实现整个blog源码级别的代码管理，包括站点配置&主题配置。

首先明确一点，在每次hexo d时，都会自动产生一个名为.deploy_git的文件夹，这个文件夹下包含有hexo g渲染出的各种文件，这些文件就是构成github page或者coding page的重要源码；同时会自动的将这个.deploy_git设置成本地仓库，即产生一个.git的隐藏文件。我们做的事情和以上过程不尽一致，总结起来主要是以下几个命令。
首先建立一个名为.gitignore的文件，表示我们并不上传这些文件，原因后续介绍。其内容为：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
themes/

接下来就是把blog的源文件夹搞成一个本地仓库，如下命令。

# 创建仓库
git init    
# 为本地仓库添加文件
git add -A
# 提交到本地仓库
git commit -m "your message"
# 添加一个名为 origin 的远程，这个名字随便起
git remote add origin https://github.com/Your_Github_ID/Your_Repo_Name.git
# 为其添加 push 到 Github 的地址
git remote set-url --add --push origin https://github.com/Your_Github_ID/Your_Repo_Name.git
# 为其添加 push 到 Coding 的地址
git remote set-url --add --push origin https://git.coding.net/Your_Coding_ID/Your_Repo_Name.git
# push到远端的master分支
git push --set-upstream origin master
# 新建并切换分支
git checkout -b "another-branch"
# 各种更改文件......推送到远程
git push --set-upstream origin another-branch
# 以后可以直接 git push，不用set了。

通过以上命令，我们就可以同时部署在github仓库https://github.com/Your_Github_ID/Your_Repo_Name.git和coding仓库https://git.coding.net/Your_Coding_ID/Your_Repo_Name.git了。

设置主题远程仓库

这时你会发现themes这个文件夹并没有同时被上传到远程仓库，同上操作，将theme/next设置成本地仓库并部署。之所以将这个仓库单独上传，是为了方便切换主题，以及主题升级。

设置node_modules远程仓库

之所以将这个模块单独拎出来处理，是因为这个文件夹虽然容量不大，但是其中文件个数特别多。当和blog源文件一同被git add到暂存区之后，git shell的运行速度就会超慢。我的解决思路就是将其创建成一个仓库，这样git shell的速度就会快一些。具体步骤不再赘述，同上。

结语

经过建立以上的3个仓库，实现了blog源码级别的版本管理。当然，如果你不想暴露自己的源码，那么你只需要在coding申请一个私有仓库并部署就ok了。虽然看起来有些麻烦，但是一旦配置完毕之后，我们就只需要以下几个步骤就可以实现管理。

hexo clean  # 不是必要步骤
hexo d -g   # 渲染+部署到github page以及coding page
git add .   # 添加到暂存区
git commit -m "your message" # push到本地仓库
git push    # 上传到远程仓库（站点目录、next主题目录、node_modules目录）

Good luck:)

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,117评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,328评论 1赞 293
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,839评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,007评论 0赞 206
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,384评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,629评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,880评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,593评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,313评论 1赞 243
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,392评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,052评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2赞 270