Mac + Hexo + GitHub + Next 搭建博客

发表于 分类于 阅读次数：
1. 安装node.js 和 git

mac上使用brew安装node 和 git
测试安装是否成功：

1
2
3
4
5
node -v
npm -v   
# 同时可以配置下npm镜像：npm config set registry https://registry.npm.taobao.org
# 配置后可通过下面方式来验证是否成功 npm config get registry 或 npm info express
git --versoin
2. 安装Hexo

安装时注意权限问题，加上sudo，其中-g表示全局安装

1
sudo npm install -g hexo-cli

npm全局安装的包的存储路径是/usr/local/lib/node_modules/

3. 博客初始化

创建博客的文件夹，并进入

1
2
sudo mkdir blog
cd blog

初始化博客

1
sudo hexo init

安装依赖

1
2
## 安装时 node-pre-gyp 报错，执行如下命令可以解决
sudo npm install --unsafe-perm

执行下述命令生成本地网页文件并开启服务器，然后通过http://localhost:4000查看本地博客

1
2
sudo hexo g
sudo hexo s  或者 sudo hexo s -p 4000
4. 上传github

在github中新建仓库，名称必须为 user.github.io，如：Liwen-Git.github.io

配置hexo的_config.yml文件

1
2
cd  blog
sudo vim _config.yml

在文档的最后部分，将deploy配置如下

1
2
3
4
deploy:
  type: git
  repository: https://github.com/Liwen-Git/Liwen-Git.github.io.git
  branch: master

注意type、repository、branch后均有空格。通过如下命令在blog下生成静态文件并上传到服务器

1
2
3
4
sudo hexo g
# 出错执行 sudo npm install hexo --save
sudo hexo d
# 出错执行 sudo npm install hexo-deployer-git --save

执行hexo d 时会提示输入GitHub账号用户名和密码，执行成功之后通过 https://liwen-git.github.io/ 访问博客

5. 更换Next主题

推荐使用hexo-theme-next主题
在blog目录下执行：

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

修改blog目录下_config.yml里的theme名称为：next
其他的，如title: 李子园、language: zh-CN、都可以自己配置

执行如下命令（每次部署文章的步骤）

1
2
sudo hexo g  //生成缓存和静态文件
sudo hexo d  //重新部署到服务器

当本地博客部署到服务器后，网页端无变化时可以采用下述命令

1
sudo hexo clean  //清楚缓存文件(db.json)和已生成的静态文件(public)
6. 配置next主题

修改next主题的配置文件_config.yml主题为：Gemini（打开注释）

修改next主题配置文件，在menu处，打开tags和categories的注释

  • 创建tag页面
    1
    sudo hexo new page "tags"

然后再blog/sources中会多了一个tags文件夹，修改其中的index.md文件，type修改为tags

1
2
3
4
5
---
title: tags
date: 2019-07-08 23:15:25
type: "tags"
---
  • 创建categories页面
    1
    sudo hexo new page "categories"

然后再blog/sources中会多了一个categories文件夹，修改其中的index.md文件，type修改为categories

1
2
3
4
5
---
title: categories
date: 2019-07-08 23:15:25
type: "categories"
---

在next的_config.yml文件中修改Local Search的enable: true
在根目录下执行以下命令：

1
2
sudo npm install hexo-generator-search --save
sudo npm install hexo-generator-searchdb --save

在根目录的_config.yml文件中添加

1
2
3
4
5
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
8. 新建文章

命令：

1
sudo hexo new post 文件名可以不是文章名

给文章添加属性

1
2
3
4
5
6
7
8
9
10
---
title: Mac + Hexo + GitHub + Next 搭建博客
date: 2019-07-08 12:12:57
categories: 
- mac
tags:
- hexo
- next
- 表单验证
---

站点首页不显示文章全文，文章摘要设置
这里我们可以通过在文章使用<!-- more -->标志来精确控制文章的摘要预览