HEXO NEXT建站备忘录

作者: 小秦Vincent | 来源:发表于2017-12-11 12:55 被阅读0次

HEXO NEXT建站备忘录
Hexo+NexT+Heroku十分钟免费博客建站教程
Github+Hexo+Next 建站日志
Hexo+NexT+GitHub简易建站流程
hexo-next优化之路
Hexo主题设置
完全免费搭建个人博客系列笔记（三）
Hexo主题--Hueman初体验
Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(五
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编辑器

插入PDF文档以及图片

插入PDF文档：
将相应的PDF文档放在与博客标题同名的文件夹内，然后再按照如下方式进行插入。

[点我，这里是PDF文档](latex入门教程.pdf)

利用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)]
```

利用插件，以下我在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>

同时部署

接下来主要涉及到以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:)

HEXO NEXT建站备忘录
原文地址： https://www.vincentqin.tech/posts/build-a-website-u...
Hexo+NexT+Heroku十分钟免费博客建站教程
title: Hexo+NexT+Heroku十分钟免费博客建站教程date: 2016-10-29 20:57:...
Github+Hexo+Next 建站日志
欢迎猛击悟の迹【http://chihweihsu.com】跳转原文 2017-05-21： Markdown内置...
Hexo+NexT+GitHub简易建站流程
一直以来，我都急切的渴望拥有一个属于自己的博客网站，但是两年来，由于各种原因一直没能是真正的实践。正好这几天闲了下...
hexo-next优化之路
选择了Hexo + Next完成个人博客建站之后，仍然会有很多不足之处。此时，万能的搜索引擎和git社区为我们提供...
Hexo主题设置
hexo默认主题是landscape，hexo官方也提供了许多主题。推荐使用Next和Yelee。Next简洁美观...
完全免费搭建个人博客系列笔记（三）
使用hexo+next+github/coding+gitalk添加博客评论系统,以及hexo+next+码云+i...
Hexo主题--Hueman初体验
之前折腾过hexo的主题next，相信用hexo搭博客的，很多人都选用next，但在使用的过程中，总感觉next缺...
Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(五
简介上篇Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(四)讲解到Hexo NexT的相关配置如：...
Hexo+Next搭建个人博客
1. 参考 Hexo官方文档 Next官方文档 Hexo+Next主题优化 2. 环境 Node.js Gi...

HEXO NEXT建站备忘录

显示文章阅读数量

主题设置

关于多说

关于旋转头像

背景颜色设置

页面宽度设置

优化友情链接

增加gitter即时聊天到sidebar

添加页面背景

MarkDown编辑器

插入PDF文档以及图片

配置个性化的字体

在博客中插入网易云音乐

同时部署

版本管理

方案 1（推荐）

方案 2

设置主题远程仓库

设置node_modules远程仓库

结语

相关文章

HEXO NEXT建站备忘录

Hexo+NexT+Heroku十分钟免费博客建站教程

Github+Hexo+Next 建站日志

Hexo+NexT+GitHub简易建站流程

hexo-next优化之路

Hexo主题设置

完全免费搭建个人博客系列笔记（三）

Hexo主题--Hueman初体验

Hexo搭建GitHub博客—打造炫酷的NexT主题--高级(五

Hexo+Next搭建个人博客

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读