HEXO+Github搭建个人Blog

发表于 | 分类于
字数统计: 738 | 阅读时长 ≈ 2

HEXO背景

hexo是基于NodeJS的静态博客框架，简单，轻量，其生成的静态页面可以托管在Github或者Heroku上面

  • 超快部署
  • 支持MarkDown
  • 一键部署
  • 丰富的插件

下面以我的Blog为例，记录搭建过程。

环境准备

  • 安装NodeJs
1
2
3
4
5
6
7
8
9
//mac下安装node很简单，使用mac下的包管理工具brew命令就可以了

$ brew install node
$ brew install npm

//brew一般被安装在/usr/local/bin 目录下面

//验证是否安装成功
$ node -v
  • 安装HEXO
1
$ npm install hexo-cli -g
  • 运行

装上Hexo后就可以在本地跑服务了，执行一下命令（HEXO的常见命令）

1
2
3
4
5
6
7
$ hexo clean
// 生成静态网页
$ hexo g / hexo generator
// 开启服务
$ hexo s / hexo server

运行：localhost：4000

托管

托管就是将你生成的静态网页保存在服务器上，别人可以通过域名去访问（当然需要在hexo上去配置）.

一般是在github上免费托管，也可以自己去买个小鸡，既可以搭个小机场，也可以托管博客.

如果要部署到github上，首先要有GitHub账号（没有的可以不用看了），然后在仓库建一个”github账号.github.io” 名字一定要一样

1
$ npm install hexo-deployer-git --save
  • 添加git源
1
2
3
4
5
6
7
// 编辑根目录.config.yml
vim .config.yml

deploy:
  type: git
  repo: <repository url>
  branch: [branch]

branch为分支，默认为master,可以不配置 repo为仓库地址，在github上新建仓库后，可复制此地址

  • 添加源后就可以部署了
1
$ hexo d

配置

全局配置

关于hexo的配置都在根目录下的.config_yml下面，而关于主题的配置都在/theme/**/.config_yml下面，详细配置可以查看官方文档

  • title -> 网站标题
  • subtitle -> 网站副标题
  • description -> 网站描述
  • author -> 您的名字
  • language -> 网站使用的语言
  • theme -> 主题配置（主题名字 /theme目录下）

坑：进行配置时，需要在冒号:后加一个英文空格

主题配置

Hexo 中有很多主题，可以在官网查看。主题现在比较流行的是Next — hexo-theme-next。

  • 下载：
    推荐去官方看最新下载。
1
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
  • 设置
    主要是在theme/next/_config.yml文件。然后去找官方或者别人的方案修改即可。
  • 发布文章
  1. 使用命令：
    1
    $ hexo new test

此时会在source/_posts目录下生成test.md文件，输入些许内容，然后保存.

  1. 直接将写好的markdown文件放在_posts文件下面即可，在markdown下添加头部
1
2
3
4
---
title: 
categories: []
---
  1. 使用命令查看效果
1
2
$ hexo g
$ hexo s

主题美化

主题美化借鉴了一些前人的集思广益，参考了网上许多文章教程，本博客就是实践出来的，感谢！

这里mark一些借鉴连接，供大家详参！

Hexo主题美化

干货

Hexo官网