hexo(next)+github博客的搭建

发表于 | 更新于 | 分类于
本文字数： 7.7k | 阅读时长 ≈ 7 分钟

​ 本文主要讲解博客的搭建过程，next主题优化，next配置文件详解等。

hexo+github的搭建过程

准备安装软件

依次安装

配置和使用github

注册github

访问github.com右上角singnup

uername 最好都用小写，因为最后建立的博客地址是：http://username.github.io；邮箱十分重要，GitHub 上很多通知都是通过邮箱的。

创建Repository

Repository 名字应该是http://username.github.io。

其他的可以选择添加一些描述也可以选择默认什么也不添加 ，点击creat repository

配置SSH keys

运行git bash

1
2
3
$ ssh-keygen -t rsa -C "邮件地址@youremail.com"
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车就好>

【提示1】这里的邮箱地址，输入注册 Github 的邮箱地址；

【提示2】「-C」的是大写的「C」

然后系统会要你输入密码：

1
2
Enter passphrase (empty for no passphrase):<设置密码>
Enter same passphrase again:<再次输入密码>

在回车中会提示你输入一个密码，这个密码会在你提交项目时使用，如果为空的话提交项目时则不用输入。这个设置是防止别人往你的项目里提交内容。

注意：输入密码的时候没有输入痕迹的，不要以为什么也没有输入。

添加SSH Key到GitHub

在本地文件夹找到id_rsa.pub文件，.ssh文件夹里记事本打开这个文件复制全部内容到github相应位。

测试

打开git bash，输入以下代码

1
$ ssh -T git@github.com

如何返回值中有successfully字段代表配置成功了。

设置用户信息

打开git bash，完善个人信息

1
2
$ git config --global user.name "user" //输入注册时的username
$ git config --global user.email  "email" //填写注册邮箱

搭建hexo博客

利用npm命令安装hexo

1
$ npm install -g hexo
  • 创建独立博客项目文件夹

安装完成后，关掉前面那个 Git Bash 窗口。在本地创建一个与 Repository 中博客项目同名的文件夹（如E:\username.github.io）在文件夹上点击鼠标右键，选择 Git bash here；

【提示】在进行博客搭建工作时，每次使用命令都要在E:\username.github.io目录下。

执行下面的指令，Hexo 就会自动在 E:\username.github.io文件夹建立独立博客所需要的所有文件啦！

1
$ hexo init
  • 安装依赖包
1
$ npm install
  • 确保git部署
1
$ npm install hexo-deployer-git --save
  • 本地查看

现在已经搭建好本地的 Hexo 博客了，执行完下面的命令就可以到浏览器输入 localhost:4000 查看到啦

1
2
$ hexo g
$ hexo s

hexo g 每次进行相应改动都要hexo g 生成一下

hexo s 启动服务预览

执行完 hexo init 命令后会给一个默认的主题：landscape

你可以到官网找你喜欢的主题进行下载 hexo themes 知乎：有哪些好看的 Hexo 主题？

找到它所在的 Github Repository （怎么找，我喜欢的那个，恰好博主放了他的github地址）

找到之后通过git命令下载

在主题的repository点击clone 复制一下那个地址

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

next主题使用及优化

启用主题

与所有 Hexo 主题启用的模式一样。 当 克隆/下载 完成后，打开 站点配置文件， 找到 theme 字段，并将其值更改为 next。

启用 NexT 主题

1
theme: next

到此，NexT 主题安装完成。下一步我们将验证主题是否正确启用。在切换主题之后、验证之前， 我们最好使用 hexo clean 来清除 Hexo 的缓存。

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以 在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

  • Muse - 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
  • Mist - Muse 的紧凑版本，整洁有序的单栏外观
  • Pisces - 双栏 Scheme，小家碧玉似的清新

Scheme 的切换通过更改 主题配置文件，搜索 scheme 关键字。 你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

选择 Pisces Scheme

1
2
3
#scheme: Muse
#scheme: Mist
scheme: Pisces

设置 语言

编辑 站点配置文件， 将 language 设置成你所需要的语言。建议明确设置你所需要的语言，例如选用简体中文，配置如下：

1
language: zh-CN

添加百度/谷歌/本地 自定义站点内容搜索

  1. 安装 hexo-generator-searchdb，在站点的根目录下执行以下命令：
1
$ npm install hexo-generator-searchdb --save
  1. 编辑 站点配置文件，新增以下内容到任意位置：
1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  1. 编辑 主题配置文件，启用本地搜索功能：
1
2
3
# Local search
local_search:
  enable: true

文章模块的美化

文章内代码美化

  • 行内代码
    在主题目录下，将source/css/_custom/custom.styl文件修改如下：
1
2
3
4
5
6
7
8
9
//行内代码样式
code {
    color: #ff7600;
    background: #fbf7f8;
    border: 1px solid #d6d6d6;
    padding:1px 4px;
    word-break: break-all;
    border-radius:4px;
}
  • 区块代码
    在主题目录下，修改config.yml文件：
1
2
#   样式可选： normal | night | night eighties | night blue | night bright
highlight_theme: night

文章结束语

  • 添加模块文件

在主题目录下layout/_macro中新建 passage-end-tag.swig文件,并添加以下内容：

1
2
3
4
5
6
7
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">
              -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------
        </div>
    {% endif %}
</div>
  • 导入模板文件

在layout/_macro/post.swig文件中，找到：

1
2
3
{#####################}
{### END POST BODY ###}
{#####################}

在上面代码之前添加：

1
2
3
4
5
<div>
      {% if not is_index %}
          {% include 'passage-end-tag.swig' %}
      {% endif %}
</div>
  • 配置
    在主题配置文件中添加：
1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

增强文章底部版权信息

  • 增加文章md文件的头部信息中添加copyright: true时，添加版权声明
  • 增加文章标题、发布时间、更新时间等信息

在目录 next/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
{% 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 src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <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>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
	});
    });  
</script>
{% endif %}

在目录next/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;
}

修改next/layout/_macro/post.swig，在代码

1
2
3
{#####################}
{### END POST BODY ###}
{#####################}

之前添加增加如下代码：

1
2
3
4
5
<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：

1
@import "my-post-copyright"

保存重新生成即可。

参考

技术小白搭建hexo+github博客

next最新版主题下载使用

next主题官方文档

next主题个性化教程

next主题配置文件详解

NexT v6.0+ 背景动画Canvas_nest设置无效的解决方案

给Hexo搭建的博客增加百度谷歌搜索引擎验证

添加文章字数和读取文章的时间

hexo + next主题高级配置

-------------本文结束感谢您的阅读-------------

本文标题:hexo(next)+github博客的搭建

文章作者:clay

发布时间:2016年06月06日 - 14:06

最后更新:2018年08月18日 - 19:08

原始链接:https://clay-wangzhi.github.io/2016/06/06/新建博客方法/

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。