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许可协议。转载请注明出处!