0%

hexo安装教程

发表于 分类于 阅读次数： Valine： 5.8k 5 分钟

目录

  1. 搭建hexo环境

  2. 安装hexo

搭建hexo环境

安装完后，在D盘或其他盘新建个文件夹（命名随意，这里命名为hexo），不出意外，右键就可以看到下图

图1

选择Git Bash Here，则会弹出一个命令框，如下图所示。至此hexo环境搭建完成。

图2

安装hexo

安装hexo十分简单，在上图弹出的黑色框中输入

1
npm install -g hexo-cli

等上面命令执行完毕，接着输入

1
hexo init

图3

最后输入

1
hexo s

图4

此时在浏览器中输入

1
http://localhost:4000/

便可以看到下图，至此，hexo安装完毕。

图5

使用next主题

下载

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

使用主题

把hexo/config.yml中的theme属性改成next，如下

1
theme: next

语言改成中文

  1. 在hexo/theme/language/下，找到 zh-Hans.yml 重命名 zh-CN.yml
  2. 把hexo 文件夹下_config.yml 修改 language: zh-CN
  3. 在命令行hexo clean、 hexo s

更改字体大小

往Hexo\themes\next\source\css_variables目录下的custom.style(没有则新建)添加

1
2
3
$font-size-base = 18px; // 默认是 16px 大小
$font-family-headings = Georgia, sans // 标题，修改成你期望的字体族
$font-family-base = "Microsoft YaHei", Verdana, sans-serif // 修改成你期望的字体族

使用mist Schema

找到hexo/theme/next/config.yml，使用mist属性，如下

1
2
3
4
5
6
7
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces

使用头像

在Hexo\themes\next\source\images目录（没有images目录则新建）下放一张图片，如avatar.jpg，然后在D:\Hexo\themes\next\config.yml中找到avatar属性，并设置为

1
2
# user avatar 
avatar: /images/avatar.jpg

设置多说评论

申请多说key
在hexo/_config.yml 新增

1
2
# Duoshuo ShortName
duoshuo_shortname: 此处填写申请到的key

打赏

在hexo/theme/next/_config.yml末尾添加，并且把微信和支付宝二维码放到hexo\themes\next\source\images下

1
2
3
4
# Donate 文章末尾显示打赏按钮
reward_comment: 
wechatpay: /images/wechat_pay.png
alipay: /images/alipay.jpg

统计

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  leancloud_visitors:
  enable: true
  app_id: 自己申请的leancloud ID
  app_key: 自己申请的leancloud key
# Show PV/UV of the website/page with busuanzi.
# Get more information on http://ibruce.info/2015/04/04/busuanzi/
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: false
  page_pv_header: <i class="fa fa-file-o">本文总阅读量</i>
  page_pv_footer: 次

设置侧边栏社交链接

编辑站点的 _config.yml(hexo/_config.yml)，新增字段 social，然后添加社交站点名称与地址即可。例如：

1
2
3
4
5
6
7
8
# Social links
social:
  github: https://github.com/your-user-name
  twitter: https://twitter.com/your-user-name
  weibo: http://weibo.com/your-user-name
  douban: http://douban.com/people/your-user-name
  zhihu: http://www.zhihu.com/people/your-user-name
  # 等等

创建关于我页面

新建一个 about 页面： hexo new page “about”，菜单显示 about 链接，在主题的 _configy.yml
设置中将 menu 中 about 前面的注释去掉即可。

1
2
3
4
5
menu:
home: /
archives: /archives
tags: /tags
about: /about

设置read more

在每篇文章需要断句的地方加上

1
<!--more-->

即可。

更多

具体看这里：http://theme-next.iissnan.com/getting-started.html

无痛使用图片

参考这里，http://www.tuicool.com/articles/umEBVfI

  1. 把hexo/下的 _config.yml 中的post_asset_folder设置为true，如 
    1
    post_asset_folder: true
  2. 在命令行中执行
    1
    npm install https://github.com/CodeFalling/hexo-asset-image --save
  3. hexo n “hello-world” 会生成一篇文章，同时会生成同名文件夹hello-world，将需要的图片，比如p1.png，直接放到hello-world文件夹下，直接在文章中引用即可
    1
    ![图1](p1.png)

添加搜索

1. 安装插件

1
npm install hexo-generator-search --save

2. 修改站点配置：hexo/_config.yml

在hexo/_config.yml添加如下代码

1
2
3
4
5
6
# Search 
search:
  path: ./public/search.xml
  field: post
  format: html
  limit: 10000

3. 修改主题配置

在hexo/themes/next/_config.xml下找到local_search并将其设置成true

1
2
3
4
local_search:
  enable: true
  trigger: auto
  top_n_per_article: 1

重新hexo clean, hexo g, hexo s即可看到效果。

添加评论 valine

在hexo/themes/next/_config.xml找到valine，把enable改成true，填上leanCloud对应的 appid 和appkey 即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
valine:
  enable: true
  appid:  # Your leancloud application appid
  appkey: # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: Just go go # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail # Custom comment header, nick,mail,link
  pageSize: 10 # Pagination size
  language: # Language, available values: en, zh-cn
  visitor: true # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: false # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

配置gitalk

和valine一样，填上对应参数即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Gitalk
# For more information: https://gitalk.github.io, https://github.com/gitalk/gitalk
gitalk:
  enable: true
  github_id: nancyyihao # GitHub repo owner
  repo: nancyyihao.github.io # Repository name to store issues
  client_id: # GitHub Application Client ID
  client_secret: # GitHub Application Client Secret
  admin_user: nancyyihao # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en | es-ES | fr | ru | zh-CN | zh-TW
  language:

关闭某篇文章评论

添加comments: false即可

1
2
3
4
5
---
title: about
date: 2017-10-04 22:01:42
comments: false
---

添加标签页

  1. 用命令行新建一个页面
    1
    hexo new page "tages"
  2. 打开 /source/tages/index.md，设置其类型 type 值为“tages”
    1
    2
    3
    title: tags
    date: 2019-07-26 00:33:58
    type: "tags"
  3. 打开 /themes/主题/_config.yml，把tages标签那项取消注释即可
    1
    2
    3
    4
    5
    6
    menu:
      主页: /
      #随笔: /tags/随笔/
      #分类: /categories
      #归档: /archives
      标签: /tags
  4. 标签对应关系
page type 内容
tages tages 标签
categories categories 分类
archives archives 归档
about about 关于我(自我介绍)

设置github pages

具体看这里，http://beiyuu.com/github-pages.

生成新ssh key

1
ssh-keygen -t rsa -C "admin@youremail.com"

添加SSH Key到GitHub

用文本编辑工具打开id_rsa.pub文件，如果看不到这个文件，你需要设置显示隐藏文件。准确的复制这个文件的内容，才能保证设置的成功。把key 添加到github的ssh key 中。

测试

1
$ ssh -T git@github.com

如果是下面的情况，则说明添加成功

Hi username! You’ve successfully authenticated, but GitHub does not provide shell access.

修改站配置文件

在hexo/_config.xml中把repo改成ssh的形式

1
2
3
4
deploy:
type: git
repo: git@github.com:nancyyihao/nancyyihao.github.io.git
branch: master

部署到github page

安装git部署插件

1
npm install hexo-deployer-git --save
1
hexo d

问题

上传了整个目录
解决方法：删除掉.git（隐藏文件夹，需要设置打开）和.deploy_git并重新hexo deploy