搭建基于Hexo和GitHub的博客

快速开始

0. 预先准备

  • 安装Node.js，前端开发者必备
  • 安装Git，最常见的版本管理工具
  • 登录GitHub账号，创建名为<github username>.github.io的代码仓库，<github username>为该账号用户名

    以上工具对大部分程序员而言都很常见，具体方法可到各自官网查看，这里不做展开

1. Hexo博客初始化

1.1 全局安装Hexo命令行工具 

1
$ npm install -g hexo-cli

1.2 使用命令行”cd”到需要创建Hexo博客项目的路径下，执行

1
$ hexo init

这一操作会从GitHub上的官方Hexo项目拉取用于项目初始化的代码，其中包含名为package.json的描述性文件

1.3 依然在该路径下，执行

1
npm install

这一操作将根据package.json文件，安装Hexo博客所依赖的工具，完成时项目结构如下所示

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

其中，_config.yml为配置描述文件；package.json为前述包管理工具文；scaffolds为文章的”脚手架”；source文件夹用于配置博客网站内容；themes文件夹用于文章的样式。

1.4 查看本地博客，执行

1
hexo server

即可在localhost:4000看到本地的Hexo博客网站。

2. 关联GitHub账号

2.1 安装 hexo-deployer-git 工具，用于部署博客到GitHub

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

2.2 配置_config.yml文件，在底部 deploy部分做如下修改

1
2
3
4
5
deploy
  type: git
  repo: 代码仓库路径，可在settings部分点击"clone or download"看到，如：https://github.com/Kou-Guandong/kou-guandong.github.io.git
  branch: master
  message: 任意字符串信息，如 "deploy finished"

2.3 发布博客到线上环境，运行

1
hexo deploy

即可发布本地项目文件到远程博客”https://username.github.io"，username为GitHub用户名。

3. 发布新文章与个性化配置

3.1 编写新博客

1
hexo new "blog-title"

其中，”blog-title”为博客标题。

3.2 通过修改_config.yml文件，个性化配置博客。

_config.yml文件中的都很容易看懂，这里以Site模块为例

属性名称 对应内容
title 博客大标题
subtitle 博客子标题
description 博客描述
author 作者名字
language 博客网站语言
timezone 博客网站所在时区

3.3 将本地更新(文章或配置)推到远程

生成静态资源文件

1
hexo generate

部署到 username.github.io

1
hexo deploy

更多信息可查看Hexo官方文档