Hexo + Git pages 免费搭建个人博客详解

前言

经常看到别人搭建自己的博客，本文就基于Hexo和Git 搭建一个属于自己的博客。

创建一个github仓库

填写仓库的信息

安装Hexo

首先需要在电脑中安装Node.js和git:

• node:直接下载安装 Node.js
• git:安装教程

安装hexo

sudo npm install -g hexo

初始化hexo

cd 到博客文件夹

cd /Users/BruceLv/GithubBlog/hexo 

初始化

hexo init

初始化目录结构

启动 Hexo

开启本地服务

hexo s

配置Hexo

打开_config.yml,修改配置如下：

修改deploy

repository的值 对应此处的值

deploy:
  type: git
  repository: https://github.com/lvchenqiang/lvchenqiang.github.io
  branch: master

生成静态页面

hexo g
// 或者
hexo generate

上传到github

hexo deploy
// 或者
hexo d

如果执行后报错

Deployer not found: github 或者 Deployer not found: git

则执行

npm install hexo-deployer-git --save

完成后执行

hexo d

编写新的文章

cd 到 博客的文件夹

cd /Users/BruceLv/GithubBlog/hexo 

新建文档

hexo new "文档名"

创建的”文档名.md” 会放在source/_posts 下。

编辑文档

推荐一款软件:MacDown

文章编辑完成后，我们可以执行下面的命令。

hexo g            //生成静态页面
hexo d             //将文章部署到Github

编写新的页面

hexo new page "页签名称"

新建菜单 标签页面

menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

hexo new page tags

分类、关于

参照创建标签页面

文章设置 tags和 categories

打开 tags/index.md 内容输入如下：

title: 标签
date: 日期
type: "tags"
comments: false

示例图:

打开category/index.md 内容输入如下

title: 分类
date: 日期
type: "categories"
comments: false

然后在编辑文章的时候 添加一下内容

tags: 
- better-scroll
- hexo
categories: 
- Vue.js

示例图：

主页面的文章列表，文章段落过长

可能你也会遇到这样的问题，打开主页后，文章是全部显示的，显示首页 冗余。解决方式其实很简单
我们在合适的地方加上

文章就会出现 阅读全文的按钮

安装主题

安装自己的主题,这里以NexT.Mist为例。

// 将hexo-theme-next这个主题克隆到 ./themes目录下，并修改文件夹名字为next
git clone https://github.com/iissnan/hexo-theme-next themes/next

将博客文件夹下_config.yml 里theme的名称 landscape 修改为 next

将themes/next/ 下的_config.yml

sidebar设置

更多的个性化设置，可参考 NexT文档
最后博客的效果 参见：我的博客