前言
想要有一个自己的博客,拿来记平时的笔记。但是又不想去博客平台注册账号,平台那么多,选择也是件让人头大的事情。又不想自己买服务器专门搭建一个博客服务。怎么办呢,用Hexo + Github Pages,就可以很容易的拥有一个自己的博客了。
简介
Hexo是一款Node.js开发的博客框架。它快速、简洁、高效,支持Markdown语法,是一款简单易用的博客框架。既可以部署到自己的服务器,又可以生成静态资源文件,放在Github Pages当作个人博客使用,无需自己买服务器部署。
Github Pages支持创建自己的静态页面,并提供Github的二级域名访问。
安装和使用
Node.js + npm
安装Node.js和npm请详见Node.js官网,Hexo官网也有相关的介绍说明。这里我们从Hexo的安装开始介绍。
Git
因为我们使用 Github Pages 服务做博客,所以 git 是必须安装的。
如果没有安装的话,去 git 官网下载安装即可。
mac 可以直接用 brew install git
命令安装。
Git 的使用教程不再此文范围内,所以不做介绍。推荐官网手册和廖雪峰的Git学习教程。廖大神写了对Git的介绍到安装到使用详细且易懂的教程。
Hexo
安装Hexo
$ sudo npm install hexo-cli -g
用Hexo创建一个博客项目
$ hexo init <blog-folder>
启动博客服务
用hexo init
创建好项目之后,进入项目目录cd <blog-folder>
然后输入命令hexo server
或者 hexo s
便可以启动博客服务。
$ hexo server
启动成功后有提示:
INFO Start processing
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
浏览器访问 http://localhost:4000
便可以看到博客页面了。
创建一篇文章
$ hexo new <filename>
此命令执行完之后,会在生成 source/_posts/filename.md
文件。用编辑器打开文件,开始编辑文档内容,这便是博客文档的编辑了。推荐使用 Markdown 语法。
创建一个页面
$ hexo new page <page-folder-name>
此命令执行完之后,会在生成 source/<page-folder-name>/index.md
文件。
Next主题安装
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
关于博客主题,博主选了很久决定用 Next,简洁大方不花哨。
这里给一个其他主题介绍的传送门:
配置
Hexo 配置
Hexo的配置文档为 _config.yml
这里介绍几个主要的配置项:
Site基本信息配置:
# Site
title: 你的博客的名字
subtitle: 你的博客的subtitle
description: 你的博客的描述
author: 你的名字
language: zh-Hans # 语言,默认是en。这个是简体中文
timezone: 时区 # 默认是电脑的时区
favicon: /favicon.ico # 把favicon.ico文件拷贝至source下,这个默认的路径。
avatar: /avatar.jpg # 把你的头像图片拷贝到source目录下。名字你自己定。
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 你的 Github Pages 访问地址。
博客主题配置:
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next # 配置你的主题为 next
博客部署配置项:
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git # 我们要用 Github Pages,所以这里 type 为 git
repo: 你的 github repository 的地址 # 查看code,有一个绿色的 clone or download, 我选的是https
branch: master
Next 配置
Next的配置文档为 themes/next/_config.yml
同样这里只介绍介个主要的配置项:
menu 设置
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------
# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
menu:
home: /
categories: /categories/ # 启用分类
tags: /tags/ # 启用标签
archives: /archives/ # 启用归档, hexo 按时间归档
about: /about/ # 启用关于
要启用这些 menu,需要 hexo 创建好这几个 page:
$ hexo new page categories # 生成 source/categories/index.md
$ hexo new page tags # 生成 source/tags/index.md
$ hexo new page about # 生成 source/about/index.md
archives
是 hexo 会默认有的
创建好之后这些page后,需要对tags和categories下的index.md稍作修改
source/categories/index.md:
---
title: categories
date: 2017-08-11 16:49:50
type: "categories"
comments: false
---
source/tags/index.md:
---
title: tags
date: 2017-08-11 16:49:50
type: "tags"
comments: false
---
修改scaffolds/post.md, 添加上
tags:
categories:
这两项,然后用 hexo new
创建文章后,在tags: 后添加 tag,在 categories: 后添加分类,就行了。单个 tag 或 分类,可以直接写,如果是多个的话,写成[a,b,c]这种形式。
博客样式设置
# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini
Next官方给出了四种可选方案,博主把这四个都试了一遍,决定用第四个,Gemini。启用的方式就是去掉注释,把不要的注释掉。
文章折叠
# Automatically Excerpt. Not recommend.
# Please use <!-- more --> in the post to control excerpt accurately.
auto_excerpt:
enable: false
length: 150
默认是显示全文的。官方给出两个解决方案,一个是将 auto_excerpt
里的 enable
设置为 true
。但是这种方式不推荐,会将你文章的格式去掉。官方推荐的做法是,在你文档中想要折叠提示"阅读全文"的地方加上
<!--more-->
开启文章版权声明
# Declare license on posts
post_copyright:
enable: true # 把这个项设置为true
license: CC BY-NC-SA 3.0
license_url: https://creativecommons.org/licenses/by-nc-sa/3.0/
开启之后,会在每一篇文章中显示版权声明。
开启social network links
# Social Links
# Key is the link label showing to end users.
# Value is the target link (E.g. GitHub: https://github.com/iissnan)
social: # 去掉这里的注释
#LinkLabel: Link
GitHub: 你的github主页地址
博主只加了github主页地址。其他的参见配置文档的说明。
创建 Github Pages
首先要有一个 Github 账号。然后创建一个 repository。你可以在 Github 上看到 绿色的 new repository
。
点击之后进入创建页面:
取一个名字,勾选 Initialize this repository with a README,然后点击绿色的创建。
创建完之后,到 Settings 选项:
到 Github Pages 那一项去:
选择 master branch
,然后点击 save
。然后你会看到一个你 Pages 主页的地址。这就是你以后的博客访问地址了。
部署至 Github Pages
前面配置章节讲了如何配置 Hexo 的 repo,所以这时候,当我们准备好时,先执行 hexo clean
清掉之前的数据和页面,再执行 hexo generate
生产新的页面, 最后执行部署命令 hexo deploy
,便成功部署到了 Github Pages。
即:
$ hexo clean
$ hexo generate
$ hexo deploy
Github Pages 有短时间的缓存,所以稍等片刻,访问我们的 Github Pages 页面,就可以看到博客页面啦。
尾声
至此,我们便成功拥有了一个属于自己的博客。
可以将博客项目提交到 Github 管理,作为自己的博客备份,这样在可以使用网络和电脑的地方我们都可以方便的写博客了。
此外,除了 Github 提供 Pages 这样的服务,国内的 Coding 也提供有 Coding Pages 可以用哦。