Hexo博客搭建

发表于 分类于 评论数： 阅读次数：
本文字数： 3.5k 阅读时长 ≈ 6 分钟
hexo博客搭建及next主题设置

安装 Git

已安装过的用户略过

  • windows：下载并安装 Git

安装 Node.js

GitHub仓库配置

创建仓库

GitHub仓库名称必须是.github.io

配置SSH

  1. 打开GitBash终端，设置user.name和user.email
1
2
$ git config --global user.name "你的GitHub用户名"
$ git config --global user.email "你的GitHub注册邮箱"
  1. 生成ssh密钥：
1
$ ssh-keygen -t rsa -C "你的GitHub注册邮箱"

一路回车，创建的文件windows 10系统在C:\Users\windows用户\.ssh，里面有新创建的私钥：id_rsa和公钥：id_rsa.pub。

  1. 点击GitHub用户头像–>Setting–>SSH and GPG keys–>New SSH key，将公钥 id_rsa.pub 中的内容复制到key文本框中点击保存。
  2. 测试SSH：
1
$ ssh -T [email protected]

会出现确认信息，确认无误输入yes后回车。配置完成。

Hexo安装及配置

创建博客文件夹

  1. 创建博客文件夹，命名为blog
1
> mkdir blog
  1. 进入blog文件夹
1
> cd blog

以下操作全部在blog文件夹内执行

安装Hexo

1
> npm install -g hexo-cli

初始化Hexo

1
> hexo init

安装依赖

1
> npm install

生成静态页

1
> hexo generate

启动服务

1
> hexo server

启动成功，可以通过浏览器地址栏输入：http://localhost:4000/ ，看到Hexo的示例页。使用Ctrl+c停止预览服务。

部署Hexo

  1. 编辑Hexo配置文件_config.yml，找到下面内容：
1
2
3
4
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type:

添加GitHub仓库信息：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: [email protected]:/.github.io.git #github仓库地址
  branch: master #github分支
  1. 安装Git插件
1
> npm install hexo-deployer-git --save
  1. 部署
1
> hexo deploy

部署成功，通过http://.github.io访问。

Hexo常用命令

1
2
3
4
5
6
> hexo new  #新建文章
> hexo generate #生成静态页面 hexo g
> hexo clean #清除生成内容
> hexo server #启动服务 hexo s
> hexo deploy #部署 hexo d
> hexo clean && hexo g -d #清除、生成、部署

Hexo插件

文章置顶

安装node插件

1
2
$ npm uninstall hexo-generator-index --save
$ npm install hexo-generator-index-pin-top --save

在需要顶置的文章的Front-matter中加top: true。

显示版权信息

修改主题配置文件中enable: false为enable: true。

修改站点配置文件中url:为url: http://。

1
2
3
4
5
# Declare license on posts
post_copyright:
  enable: false
  license: CC BY-NC-SA 3.0
  license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/

访问统计功能

修改主题配置文件中busuanzi_count: 部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 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
  # 页面底部显示站点的UV值
  site_uv: true
  site_uv_header: 访客数  class="fa fa-user">
  site_uv_footer: 人次
  # custom pv span for the whole site
  # 页面底部显示站点的PV值
  site_pv: true
  site_pv_header: 访问量  class="fa fa-eye">
  site_pv_footer: 次
  # custom pv span for one page only
  # 文章页面的标题下显示该页面的PV值
  page_pv: true
  page_pv_header: 阅读量  class="fa fa-file-o">
  page_pv_footer: 次

显示文章更新时间

修改主题配置文件中post_meta部分的updated_at: false为updated_at: true。

1
2
3
4
5
6
# Post meta display settings
post_meta:
  item_text: true
  created_at: true
  updated_at: false
  categories: tru

在需要顶置的文章的Front-matter中加updated:。

添加文章字数统计

安装插件：

1
$ npm i hexo-wordcount --save

修改主题配置文件中post_wordcount部分：

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
  item_text: true   //底部是否显示“总字数”字样
  wordcount: true  //文章字数统计 默认false
  min2read: false  //文章预计阅读时长（分钟）
  totalcount: true  //网站总字数，位于底部 默认false
  separated_meta: true //是否将文章的字数统计信息换行显示

更多插件可以查阅官方插件页

Next安装及配置

Next主题安装

下载稳定版本：Next发布页面

解压出文件夹，重命名文件夹名称为next，放在blog/themes内。

Next主题配置

Hexo根目录中_config.yml为站点配置文件，主题包内_config.yml为主题配置文件。

在站点配置文件中找到theme修改值为next。

1
2
## Themes: https://hexo.io/themes/ #主题
theme: next #主题名称 默认landscape

详细配置说明：Next主题设定

相关参考

0%