Hexo + Github Pages, 创建个人博客

前言

想要有一个自己的博客,拿来记平时的笔记。但是又不想去博客平台注册账号,平台那么多,选择也是件让人头大的事情。又不想自己买服务器专门搭建一个博客服务。怎么办呢,用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,简洁大方不花哨。
这里给一个其他主题介绍的传送门:

  1. 我是知乎的传送门,请点我
  2. 我是 github 的传送门,请点我

配置

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

点击这里可以带你去Hexo官方的配置文件介绍

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主页地址。其他的参见配置文档的说明。

点击这里可以带你去Next官方的主题设置教程

创建 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 可以用哦。

点此查看我的个人博客

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,222评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,455评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,720评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,568评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,696评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,879评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,028评论 3 409
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,773评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,220评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,360评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,002评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2 350

推荐阅读更多精彩内容