hexo(Next)+GitHub Pages搭建开源博客

发表于 | 更新于 | 分类于 | 阅读次数：

node环境

略

初始化

1
2
3
4
npm install hexo-cli -g
hexo init MyBlog
cd MyBlog
npm install

安装主题

1
git clone https://github.com/iissnan/hexo-theme-next.git themes/next

创建页面

1
2
3
hexo new page "tags"
hexo new page categories
hexo new page "about"

安装插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
npm install --save hexo-server
npm install --save hexo-wordcount
npm install --save hexo-asset-image
npm install --save hexo-generator-tag
npm install --save hexo-generator-feed
npm install --save hexo-generator-index
npm install --save hexo-generator-archive
npm install --save hexo-generator-category
npm install --save hexo-generator-search
npm install --save hexo-generator-searchdb
npm install --save hexo-generator-sitemap
npm install --save hexo-generator-baidu-sitemap
npm install --save hexo-generator-seo-friendly-sitemap
# npm install --save hexo-filter-indicate-the-source
# 压缩
npm install --save hexo-uglify
npm install --save hexo-imagemin    # 安装报错 19
npm install --save hexo-clean-css
npm install --save hexo-html-minifier # 安装报错 2
# 发布
npm install --save hexo-deployer-git
npm install --save hexo-deployer-rsync
npm install --save gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp 

# 其它插件
npm install --save hexo-recommended-posts

常用命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 清空缓存
hexo clean

# 创建草稿
hexo new draft "My first Blog"

# 将草稿发布成文章
hexo publish "My first Blog"

# 直接创建文章
hexo new "My second Blog"

# 生成静态文件并部署网站
hexo generate(g) --deploy( -d)

# 启动本地服务
hexo server -i 10.0.0.1 -p 80 -l

# 获取推荐文章列表，前提是已安装hexo-recommended-posts插件
hexo recommend

优化

首页博客间距调整

1
2
3
> hexo-theme-next\source\css\_schemes\Mist\_posts-expanded.styl
> .post { margin-top: 60px; }
>

自定义内容区域的宽度

1
2
3
4
5
6
> hexo-theme-next\source\css\_variables\custom.styl
> $content-desktop = 700px
> $content-desktop-large = 900px
> # 此方法不适用于 Pisces Scheme
> # 移动设备下，宽度自适应
>

替换文章标签图标

  • themes/hexo-theme-next-6.7.0/layout/_macro/post.swig
1
2
3
4
将
rel="tag">#
替换为
rel="tag"><i class="fa fa-tag"></i>

自定义样式优化

  • themes\hexo-theme-next-6.7.0\source\css_custom\custom.styl 追加
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
// 主页文章添加阴影效果
.post {
  margin-top: 2%;
  margin-bottom: 5%;
  padding: 1%;
  -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
  -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

.main-inner {
  margin-top: 2%;
  padding: 2% 2% 2% 2%;
  background: #fff;
  min-height: 95%;
}

// 自动更新背景图片
body {
  background: url(https://source.unsplash.com/random/1600x900);
  background-repeat: no-repeat;
  background-attachment:fixed;
  background-size: cover;
  background-position:50% 50%;
}

// 修改博客页面宽度
.container .main-inner {
  width: 85%;
}

// 优化修改博客标题位置
.posts-expand .post {
  margin-top: 3%;
}

// 优化标题字体大写
.menu .menu-item a, .menu .menu-item span.exturl {
  font-size: 16px;
}

公益404页面优化404效果

  • 在source目录下创建404.html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <!DOCTYPE HTML>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
      <meta name="robots" content="all" />
      <meta name="robots" content="index,follow"/>
      <link rel="stylesheet" type="text/css" href="https://qzone.qq.com/gy/404/style/404style.css">
    </head>
    <body>
    <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="https://www.lengyuewusheng.com" homePageName="回到 www.lengyuewusheng.com"></script>
    </body>
    </html>
    • 测试只有在发布到github pages上才生效，本地测试无法直接跳转。

文章结尾增加版权声明

  • themes/hexo-theme-next-6.7.0/layout/_macro/ 目录下创建 my-copyright.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>

  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="http://jslibs.wuxubj.cn/sweetalert_mini/jquery-1.7.1.min.js"></script>
  <script src="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="http://jslibs.wuxubj.cn/sweetalert_mini/sweetalert.mini.css">
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <!-- p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p -->
  <p><span>许可协议:</span>本博客所有文章除特别声明外，均采用<i class="fa fa-creative-commons"></i><a href="https://creativecommons.org/licenses/by-nc-sa/3.0/" rel="external nofollow" target="_blank"> BY-NC-SA 3.0</a>许可协议。转载请注明出处！</p>
</div>
<script>
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({
          title: "",
          text: '复制成功',
          html: false,
          timer: 500,
          showConfirmButton: false
        });
      });
    }));
</script>
{% endif %}
  • themes/hexo-theme-next-6.7.0/source/css/_common/components/post/ 目录下创建 my-post-copyright.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}
  • 修改 themes/hexo-theme-next-6.7.0/layout/_macro/post.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 {% if theme.wechat_subscriber.enabled and not is_index %}
    <div>
      {% include '../_partials/post/wechat-subscriber.swig' %}
    </div>
  {% endif %}
#========在include ../_partials/post/wechat-subscriber.swig逻辑下追加以下内容=============
  <div>
  {% if not is_index %}
  {% include 'passage-end-tag.swig' %}
  {% endif %}
  </div>
  <div>
        {% if not is_index %}
          {% include 'my-copyright.swig' %}
        {% endif %}
  </div>
  • themes/hexo-theme-next-6.7.0/source/css/_common/components/post/post.styl追加一行
1
@import "my-post-copyright"
  • themes/hexo-theme-next-6.7.0/layout/_macro/ 目录下新建 passage-end-tag.swig
1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------End of article. <i class="fa fa-paw"></i> I appreciate whoever read and leave commends on articles.-------------</div>
    {% endif %}
</div>
  • themes/hexo-theme-next-6.7.0/_config.yml中追加
1
2
passage_end_tag:
  enabled: true
  • 博客文章头中声明copyright
1
2
3
---
copyright: true
---

常见问题

生成发布时报错，几乎没有有效信息。。。

  • 报错内容：
1
2
3
H:\hexo-Blog>hexo g -d
INFO  Start processing
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
  • 处理方案：

此种情况大概率是由于你的博客的Markdown文件中存在非表格格式的竖线或其它Markdown难以解析的符号导致，如果存在竖线，将竖线用&#124替换，如果存在其它特殊符号将符号删除即可。

hexo generate 执行报错

  • 报错内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
H:\hexo-Blog>hexo g
INFO  Start processing
INFO  Files loaded in 1.97 s
INFO  Generated: baidusitemap.xml
ERROR Asset render failed: lib/canvas-ribbon/canvas-ribbon.js
SyntaxError: Unexpected token: operator (>)
    at JS_Parse_Error.get (eval at <anonymous> (H:\hexo-Blog\node_modules\hexo-uglify\node_modules\uglify-js\tools\node.js:27:1), <anonymous>:86:23)
    at getFullErrorStack (H:\hexo-Blog\node_modules\hexo-bunyan\lib\bunyan.js:1129:18)
    at Object.Logger.stdSerializers.err (H:\hexo-Blog\node_modules\hexo-bunyan\lib\bunyan.js:1147:16)
    at H:\hexo-Blog\node_modules\hexo-bunyan\lib\bunyan.js:873:50
    at Array.forEach (<anonymous>)
    at Logger._applySerializers (H:\hexo-Blog\node_modules\hexo-bunyan\lib\bunyan.js:865:35)
    at mkRecord (H:\hexo-Blog\node_modules\hexo-bunyan\lib\bunyan.js:978:17)
    at Logger.<anonymous> (H:\hexo-Blog\node_modules\hexo-bunyan\lib\bunyan.js:1044:19)
    at self.render.render.catch.err (H:\hexo-Blog\node_modules\hexo\lib\plugins\generator\asset.js:33:20)
    at tryCatcher (H:\hexo-Blog\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (H:\hexo-Blog\node_modules\bluebird\js\release\promise.js:512:31)
    at Promise._settlePromise (H:\hexo-Blog\node_modules\bluebird\js\release\promise.js:569:18)
    at Promise._settlePromise0 (H:\hexo-Blog\node_modules\bluebird\js\release\promise.js:614:10)
    at Promise._settlePromises (H:\hexo-Blog\node_modules\bluebird\js\release\promise.js:689:18)
    at Async._drainQueue (H:\hexo-Blog\node_modules\bluebird\js\release\async.js:133:16)
    at Async._drainQueues (H:\hexo-Blog\node_modules\bluebird\js\release\async.js:143:10)
    at Immediate.Async.drainQueues (H:\hexo-Blog\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:789:20)
    at tryOnImmediate (timers.js:751:5)
    at processImmediate [as _immediateCallback] (timers.js:722:5)
INFO  Generated: atom.xml
INFO  Generated: search.xml
  • 处理方案:
1
npm uninstall hexo-uglify uglify uglify-js
  • 报错内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
ERROR path.substring is not a function
TypeError: path.substring is not a function
    at Object.urlForHelper (H:\hexo-Blog\node_modules\hexo\lib\plugins\helper\url_for.js:9:31)
    at wrapper (H:\hexo-Blog\node_modules\lodash\lodash.js:4941:19)
    at Object.eval [as tpl] (eval at precompile (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:497:13), <anonymous>:125:119)
    at compiled (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:618:18)
    at Object.eval [as tpl] (eval at precompile (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:497:13), <anonymous>:263:126)
    at compiled (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:618:18)
    at Theme._View.View._compiled (H:\hexo-Blog\node_modules\hexo\lib\theme\view.js:127:30)
    at Theme._View.View.View.render (H:\hexo-Blog\node_modules\hexo\lib\theme\view.js:29:15)
    at H:\hexo-Blog\node_modules\hexo\lib\hexo\index.js:390:29
    at tryCatcher (H:\hexo-Blog\node_modules\bluebird\js\release\util.js:16:23)
    at H:\hexo-Blog\node_modules\bluebird\js\release\method.js:15:34
    at RouteStream._read (H:\hexo-Blog\node_modules\hexo\lib\hexo\router.js:134:3)
    at RouteStream.Readable.read (_stream_readable.js:442:10)
    at resume_ (_stream_readable.js:822:12)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
ERROR path.substring is not a function
TypeError: path.substring is not a function
    at Object.urlForHelper (H:\hexo-Blog\node_modules\hexo\lib\plugins\helper\url_for.js:9:31)
    at wrapper (H:\hexo-Blog\node_modules\lodash\lodash.js:4941:19)
    at Object.eval [as tpl] (eval at precompile (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:497:13), <anonymous>:125:119)
    at compiled (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:618:18)
    at Object.eval [as tpl] (eval at precompile (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:497:13), <anonymous>:263:126)
    at compiled (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:618:18)
    at Theme._View.View._compiled (H:\hexo-Blog\node_modules\hexo\lib\theme\view.js:127:30)
    at Theme._View.View.View.render (H:\hexo-Blog\node_modules\hexo\lib\theme\view.js:29:15)
    at H:\hexo-Blog\node_modules\hexo\lib\hexo\index.js:390:29
    at tryCatcher (H:\hexo-Blog\node_modules\bluebird\js\release\util.js:16:23)
    at H:\hexo-Blog\node_modules\bluebird\js\release\method.js:15:34
    at RouteStream._read (H:\hexo-Blog\node_modules\hexo\lib\hexo\router.js:134:3)
    at RouteStream.Readable.read (_stream_readable.js:442:10)
    at resume_ (_stream_readable.js:822:12)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
ERROR path.substring is not a function
TypeError: path.substring is not a function
    at Object.urlForHelper (H:\hexo-Blog\node_modules\hexo\lib\plugins\helper\url_for.js:9:31)
    at wrapper (H:\hexo-Blog\node_modules\lodash\lodash.js:4941:19)
    at Object.eval [as tpl] (eval at precompile (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:497:13), <anonymous>:125:119)
    at compiled (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:618:18)
    at Object.eval [as tpl] (eval at precompile (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:497:13), <anonymous>:263:126)
    at compiled (H:\hexo-Blog\node_modules\swig-templates\lib\swig.js:618:18)
    at Theme._View.View._compiled (H:\hexo-Blog\node_modules\hexo\lib\theme\view.js:127:30)
    at Theme._View.View.View.render (H:\hexo-Blog\node_modules\hexo\lib\theme\view.js:29:15)
    at H:\hexo-Blog\node_modules\hexo\lib\hexo\index.js:390:29
    at tryCatcher (H:\hexo-Blog\node_modules\bluebird\js\release\util.js:16:23)
    at H:\hexo-Blog\node_modules\bluebird\js\release\method.js:15:34
    at RouteStream._read (H:\hexo-Blog\node_modules\hexo\lib\hexo\router.js:134:3)
    at RouteStream.Readable.read (_stream_readable.js:442:10)
    at resume_ (_stream_readable.js:822:12)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    ......
  • 处理方案：
1
该问题是在升级Next v5.1.4时出现，首先将Next回滚，然后将本地的node_modules文件夹删除，同时删除package-lock.json，重新执行`npm install`生成node_modules目录后恢复。

hexo deploy 执行报错

  • 报错内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
fatal: HttpRequestException encountered.
   ��������ʱ�����
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': No error
FATAL Something's wrong. Maybe you can find the solution here: http://hexo.io/docs/troubleshooting.html
Error: fatal: HttpRequestException encountered.
   ��������ʱ����
bash: /dev/tty: No such device or address
error: failed to execute prompt script (exit code 1)
fatal: could not read Username for 'https://github.com': No error

    at ChildProcess.<anonymous> (H:\hexo-Blog\node_modules\hexo-util\lib\spawn.js:37:17)
    at emitTwo (events.js:126:13)
    at ChildProcess.emit (events.js:214:7)
    at ChildProcess.cp.emit (H:\hexo-Blog\node_modules\cross-spawn\lib\enoent.js:40:29)
    at maybeClose (internal/child_process.js:925:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)

H:\hexo-Blog>
  • 处理方案：
1
这种问题可能是因为本地git环境被破坏导致，重装或升级一下本地git即可解决问题。
冷月无声 wechat
关注也是一种力量
-------------End of article. I appreciate whoever read and leave commends on articles.-------------

本文标题:hexo(Next)+GitHub Pages搭建开源博客

文章作者:冷月无声

发布时间:2017年07月28日 - 01:07

最后更新:2019年02月01日 - 21:02

原始链接:https://www.lengyuewusheng.com/2017/07/28/00002_hexo-Next-GitHub-Pages搭建开源博客/

许可协议:本博客所有文章除特别声明外，均采用 BY-NC-SA 3.0许可协议。转载请注明出处！