如何利用hexo在github上建立自己的博客

Posted on | In | | Visitors: |
Symbols count in article: 4.8k | Reading time ≈ 0:05

1 建立hexo本地站点

具体参考https://hexo.io/
主要步骤：

1
hexo init

1
hexo g
1
hexo s

默认端口为4000，如果该端口被占用，可以通过hexo s -p 8080将端口改为8080

2 配置主题

在https://hexo.io/themes/ 中选择适合自己的主题，并copy到themes文件夹
以下以next主题为例

3 配置github自动部署

参考https://linghucong.js.org/2016/04/15/2016-04-15-hexo-github-pages-blog/
主要步骤：
修改站点根目录下的_config.yml

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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 民科小屋
subtitle: 计算机民科
description:
author: xiaofengwo
language: zh-Hans
timezone:

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://ifuleyou.github.io
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss


# Pagination
## Set per_page to 0 to disable pagination
per_page: 5
pagination_dir: page

index_generator:
  per_page: 5

archive_generator:
  per_page: 20
  yearly: true
  monthly: true

tag_generator:
  per_page: 15


# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next


# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:ifuleyou/ifuleyou.github.io.git
  branch: master

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

4 配置评论、评分、访问计数

在themes/next/_config.yml里修改以下配置
并且按照配置文件中给出的站点到相应的网站中注册账号，获取相应信息

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id:     xxxx
  color:  fc6423
# ---------------------------------------------------------------

# Show number of visitors to each article.
# You can visit https://leancloud.cn get AppID and AppKey.
leancloud_visitors:
  enable: true
  app_id: xxxxx
  app_key: xxxxxxxx

# Disqus
disqus:
  enable: true
  shortname: xiaofengwo
  count: true

5 如何为next主题添加背景效果

next主题有一个十分有趣的js背景效果，可以跟随鼠标的移动，汇集背景中随机浮动的点，并在每两个点之间生成一条线段，生生灭灭，聚聚散散，科技感十足，特别受广大民科喜欢。

6 为hexo博客插入图片

  • 七牛云存储

    首先，到https://www.qiniu.com网站注册账号，需要实名认证。

    然后，创建自己的存储空间。

    利用图床软件（windows下的uwp图床，mac下的U图床等）将图片上传到自己的存储空间后，获得url，直接利用url访问即可。

    此方法的好处，是操作简便，无需关心图片的具体存放，且七牛会为图片进行瘦身，访问速度较快。另外，图片资源不需要存放到hexo的source文件夹下，可以减少本地存储以及git同步时的时间空间开销，也较易于进行跨越博客平台的迁移。

  • 利用hexo-asset-image上传图片

    直接摘抄https://www.jianshu.com/p/c2ba9533088a中的步骤

    1.首先确认_config.yml 中有 post_asset_folder:true。
    Hexo 提供了一种更方便管理 Asset 的设定：post_asset_folder
    当您设置post_asset_folder为true参数后，在建立文件时，Hexo
    会自动建立一个与文章同名的文件夹，您可以把与该文章相关的所有资源都放到那个文件夹，如此一来，您便可以更方便的使用资源。

    2.在hexo的目录下执行npm install https://github.com/CodeFalling/hexo-asset-image --save（需要等待一段时间）。

    3.完成安装后用hexo新建文章的时候会发现_posts目录下面会多出一个和文章名字一样的文件夹。图片就可以放在文件夹下面。结构如下：

    1
    2
    3
    4
    5
    本地图片测试
    ├── apppicker.jpg
    ├── logo.jpg
    └── rules.jpg
    本地图片测试.md

    这样的目录结构（目录名和文章名一致），只要使用 ![logo](本地图片测试/logo.jpg) 就可以插入图片。其中[]里面不写文字则没有图片标题。
    生成的结构为

    1
    2
    3
    4
    5
    public/2016/3/9/本地图片测试
    ├── apppicker.jpg
    ├── index.html
    ├── logo.jpg
    └── rules.jpg

    同时，生成的 html 是

    <img src="/2016/3/9/本地图片测试/logo.jpg" alt="logo">

    而不是愚蠢的

    <img src="本地图片测试/logo.jpg" alt="logo">

    注意:
    通过常规的 markdown 语法和相对路径来引用图片和其它资源可能会导致它们在存档页或者主页上显示不正确。在Hexo2时代，社区创建了很多插件来解决这个问题。但是，随着Hexo3的发布，许多新的标签插件被加入到了核心代码中。这使得你可以更简单地在文章中引用你的资源。

    img

    比如说：当你打开文章资源文件夹功能后，你把一个 example.jpg图片放在了你的资源文件夹中，如果通过使用相对路径的常规 markdown 语法 [](/example.jpg)，它将 不会 出现在首页上。（但是它会在文章中按你期待的方式工作）

    正确的引用图片方式是使用下列的标签插件而不是markdown

    img

    7 hexo的公式支持

    参考：http://stevenshi.me/2017/06/26/hexo-insert-formula/

    配置

    1
    $ npm install hexo-math --save

    在站点配置文件 _config.yml 中添加：

    1
    2
    3
    4
    5
    6
    math:
      engine: 'mathjax' # or 'katex'
      mathjax:
        # src: custom_mathjax_source
        config:
          # MathJax config

    在 next 主题配置文件中 themes/next-theme/_config.yml 中将 mathJax 设为 true:

    1
    2
    3
    4
    5
    # MathJax Support
    mathjax:
      enable: true
      per_page: false
      cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

    也可以在文章的开始集成插件支持，但不建议这么做：

    1
    2
    3
    <script type="text/javascript"
       src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
    </script>

    使用

    $数学公式$ 行内 不独占一行
    $$数学公式$$ 行间 独占一行