基于Hexo和GitHub的博客具有免费、无流量限制、可定制程度高等优点,这篇博客简要说明Mac环境下的搭建方式。欢迎访问本人按照此方法搭建的博客:https://kou-guandong.github.io/
快速开始
0. 预先准备
- 安装Node.js,前端开发者必备
- 安装Git,最常见的版本管理工具
- 登录GitHub账号,创建名为
<github username>.github.io
的代码仓库,<github username>
为该账号用户名
以上工具对大部分程序员而言都很常见,具体方法可到各自官网查看,这里不做展开
1. Hexo博客初始化
1.1 全局安装Hexo命令行工具
$ npm install -g hexo-cli
1.2 使用命令行"cd"到需要创建Hexo博客项目的路径下,执行
$ hexo init
这一操作会从GitHub上的官方Hexo项目拉取用于项目初始化的代码,其中包含名为package.json的描述性文件
1.3 依然在该路径下,执行
npm install
这一操作将根据package.json文件,安装Hexo博客所依赖的工具,完成时项目结构如下所示
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes```
其中,_config.yml为配置描述文件;package.json为前述包管理工具文;scaffolds为文章的"脚手架";source文件夹用于配置博客网站内容;themes文件夹用于文章的样式。
1.4 查看本地博客,执行hexo server
即可在localhost:4000看到本地的Hexo博客网站。
2. 关联GitHub账号
2.1 安装 hexo-deployer-git 工具,用于部署博客到GitHub
$ npm install hexo-deployer-git --save
2.2 配置_config.yml
文件,在底部 deploy部分做如下修改
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 发布博客到线上环境,运行
hexo deploy
即可发布本地项目文件到远程博客"https://username.github.io" , username为GitHub用户名。
3. 发布新文章与个性化配置
3.1 编写新博客
hexo new "blog-title"
其中,"blog-title"为博客标题。
3.2 通过修改_config.yml文件,个性化配置博客。
_config.yml文件中的都很容易看懂,这里以Site模块为例
属性名称 | 对应内容 |
---|---|
title | 博客大标题 |
subtitle | 博客子标题 |
description | 博客描述 |
author | 作者名字 |
language | 博客网站语言 |
timezone | 博客网站所在时区 |
3.3 将本地更新(文章或配置)推到远程生成静态资源文件
hexo generate
部署到 username.github.io
hexo deploy