使用hexo+github搭建博客 笔记

发表于 | 分类于 | | 阅读数

常用命令汇总

命令 简写 作用
hexo deploy hexo d 部署到github等
hexo server hexo s 开启服务器,
–debug 开启调试模式
hexo clean 清楚缓存文件及静态文件
hexo generate hexo g 生成静态网页,
-f 等同于hexo clean && hexo g;
-d 等同于hexo g && hexo d
hexo new “new file title” 创建新文章，若题目中无空格，可省去双引号
hexo new page tags 在source创建tags文件夹，且生成index.md的文章

注意：可以做个命令统计脚本，根据使用频次排序上述命令。

本地资料备份

已在github添加hexo分支，本地资料push到hexo分支，hexo部署由hexo d自动推送到master分支。 

1
git push origin hexo

安装 hexo

1
2
3
4
5
npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

更换NexT 主题

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

修改配置文件
打开_config.yml:
修改主题一行为：

1
theme: next

写文章

1
hexo new [layout] <title>

默认layout使用 _config.yml 中的 default_layout 参数
若标题中包含空格，请使用引号括起来。

1
hexo new page --path about/me "About me"  # 自定义新文章路径

举例

1
hexo new first.md

编辑first.md文件即可

本地启动服务器

1
2
3
hexo server
# 可简写为
hexo s

默认网址：![http://localhost:4000/]
-p 重设端口号
-s 只使用静态文件

部署到github

  1. 安装 github部署工具

    1
    npm install hexo-deployer-git --save

  2. 修改_config.yml

    1
    2
    3
    deploy:
      type: git
      repo: https://github.com/Narglc/Narglc.github.io

  3. 部署到github

    1
    2
    3
    hexo deploy
    # 可简写为：
    hexo d

generate vs deploy

1
2
3
4
hexo generate		# 生成静态文件
	-d,--deploy  	# 文件生成后立即部署网站
# 可简写为：
hexo g

hexo g 仅仅生成静态文件，用于本地部署；hexo d 可推送到github部署

clean

1
hexo clean			#清除缓存文件 (db.json) 和已生成的静态文件 (public)。

代码高亮样式

1
2
# normal | night | night eighties | night blue | night bright  # 5种可用
highlight_theme: night

添加阅读全文按钮 [暂未开启]

只显示文章一部分，多余的需要点击阅读全文来查看，需要在文章中添加

1
<!--more-->

设置网站缩略图标

修改站点配置文件_config.yml中small、medium、apple_touch_icon对应图片地址：

1
2
3
4
5
favicon:
  small: /images/favicon-16x16-next.png
  medium: /images/favicon-32x32-next.png
  apple_touch_icon: /images/apple-touch-icon-next.png
  safari_pinned_tab: /images/logo.svg

本地搜索功能

安装 hexo-generator-searchdb 插件

1
npm install hexo-generator-searchdb --save

修改next主题配置文件_config.yml:

1
2
local_search:
  enable: true

站点配置文件_config.yml的Extensions后添加：

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

侧边栏社交链接

修改next主题配置文件_config.yml:

1
2
3
4
5
6
7
8
9
social:
  E-Mail: mailto:qingcheliuzhi@qq.com || envelope
  GitHub: https://github.com/Narglc || github
  豆瓣: https://www.douban.com/people/Narglc/ || douban
social_icons:
  enable: true
  icons_only: false
  transition: false
  微博: weibo		# 可设置上述对应的图标

注意： || 前面是链接地址，后面是FontAwsone字符库的图标名

打赏

修改站点配置文件_config.yml:

1
2
3
4
# Reward
reward_comment: Donate comment here
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

文章末尾添加版权信息

实现

手动修改主题目录下的 layout/_macro/post.swig 文件，找到 post-footer 标签，添加以下内容div内代码段：

即，将div内代码段插入footer标签开始处。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<footer class="post-footer">
	<div>    
	 {# 此处判断是否在索引列表中 #}
	 {% if not is_index %}
	<ul class="post-copyright">
	  <li class="post-copyright-author">
	      <strong>本文作者：</strong>{{ theme.author }}
	  </li>
	  <li class="post-copyright-link">
	    <strong>本文链接：</strong>
	    <a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.path }}</a>
	  </li>
	  <li class="post-copyright-license">
	    <strong>版权： </strong>
	    本站文章均采用 <a href="http://creativecommons.org/licenses/by-nc-sa/3.0/cn/" rel="external nofollow" target="_blank">CC BY-NC-SA 3.0 CN</a> 许可协议，请勿用于商业，转载注明出处！
	  </li>
	</ul>
	{% endif %}
	</div>
[footer 原有内容]
</footer>

添加显示格式

修改主题目录下的 source/css/_custom/custom.styl 文件:

1
2
3
4
5
6
7
.post-copyright {
    margin: 1em 0 0;
    padding: 0.5em 1em;
    border-left: 3px solid #ff1700;
    background-color: #f9f9f9;
    list-style: none;
}

站点访问计数

使用不蒜子脚本实现计数

新实现

Next 主题在版本6.0以上已经内置了不蒜子访客统计的代码，修改主题配置文件_config.yml即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: <i class="fa fa-user"></i> 访问人数
  site_uv_footer: 人
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: <i class="fa fa-eye"></i> 总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: <i class="fa fa-file-o"></i> 阅读数
  page_pv_footer:
根本不存在什么打赏一说！