(更新中)(极全面的)在GitHub上搭建Hexo博客教程

前言

这是一篇介绍搭建Hexo博客的文章,我一年前花了一两天搭好了博客,但是没多久Windows炸了然后重装了,也没搞个备份,当时只知道博客文章放在了GitHub上,但Hexo的那些配置文件全没了。

踩了这么多坑,实习又忙就一直搁置了,现在有时间来重新整理一遍,希望能帮到大吧。

环境配置

node.js

直接在官网下载即可:node.js

安装好之后可以直接查看版本号,可以看到npm也会一起安装好了:

1
2
3
4
MacBook-Pro:~ nomasp$ node -v
v6.10.3
MacBook-Pro:~ nomasp$ npm -v
3.10.10

git

mac上自带了git:

1
2
MacBook-Pro:~ nomasp$ git --version
git version 2.11.0 (Apple Git-81)

如果是ubuntu等系统可以自行安装:

1
sudo apt-get install git-core

下面是一些我推荐使用的git别名,也可以说是快捷键吧,以Mac为例:

1
emacs -nw ~/.gitconfig

添加以下内容,同时在下文中我也是直接使用这些别名的:

1
2
3
4
5
6
7
8
9
10
11
12
13
[alias]
cm = commit
cs = commit -s
ca = commit --amend
can = commit --amend --no-edit
gsta = git stash
cp = cherry-pick
co = checkout
br = branch
rssoft = reset --soft
rsmix = reset --mixed
rshard = reset --hard
st = status

hexo

使用npm直接进行安装:

1
npm install -g hexo-cli
1
2
3
4
5
6
7
8
9
10
11
12
MacBook-Pro:~ nomasp$ hexo -v
hexo-cli: 1.0.2
os: Darwin 16.5.0 darwin x64
http_parser: 2.7.0
node: 6.10.3
v8: 5.1.281.101
uv: 1.9.1
zlib: 1.2.11
ares: 1.10.1-DEV
icu: 58.2
modules: 48
openssl: 1.0.2k

GitHub的使用

大家自己到GitHub上找New repository来创建新的项目仓库。

在仓库的Clone and download里可以复制到链接,然后使用git clone加链接来下载到本地。

我创建了3个分支,master分支目前还没用,hexo-config是hexo的相关文件,gh-pages是hexo生成的博客内容,后面会讲到。

1
2
3
4
5
6
7
8
MacBook-Pro:nomasp-blog nomasp$ git br --all
gh-pages
* hexo
master
remotes/origin/HEAD -> origin/master
remotes/origin/gh-pages
remotes/origin/hexo
remotes/origin/master

安装Hexo

安装

首先需要完成上面的准备工作:Git和Node.js,然后在终端使用npm进行Hexo的安装:

1
$ npm install -g hexo-cli

然后可以来看看是否安装成功:

1
$ hexo -v

初始化

根据上文GitHub的使用一节,我们在hexo分支下面来初始化hexo,我的文件夹是nomasp-blog。

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

可以看到目录结构如下所示,其中_config.yml是hexo的配置文件,scaffolds下面放着博客内容的模版,source下面是博客的md文件,themes下面是博客主题。

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

调试

这个时候可能你已经等不及想要看看博客的模样了。

1
2
$ hexo generate
$ hexo server

还有“hexo deploy“是用来部署到网络上的,这个后面再讲,这些命令分别可以简化成:“hexo g, hexo s, hexo d“。

输入上面两个命令后,应该就会给你一个地址然后在浏览器打开即可。

在本地调试也挺麻烦的,我们直接将其发布到网上吧!😯那就少不了域名了,接着往下看。

使用域名

购买域名

域名可以在万网买,我是在传说中的”去他爹“买的,官网是:GoDaddy.

在首页的搜索框输入你想要的域名后,点击“Search Domain”会查看该域名能不能购买,能的话就一路确认然后付款就好了。

域名解析

域名解析可以使用腾讯的DNSPOD,其官网是:DNSPOD

如果不清楚具体怎么弄的话请继续往下看,点击:域名解析,然后点击“添加域名”。输入域名后,点击该域名进入其管理页面。然后点击“添加记录“,具体各项的请看:
1)主机记录为“@”,表示直接解析主域名;记录类型为“NS”,表示需要把子域名交给其他DNS服务商解析;记录值填你在GoDaddy获取到的“Nameservers“(在DNS Management中);其他均为默认值。
2)还需要添加两条,主机记录分别为“@”和“www”;记录类型均为为“CNAME”,记录值均为“yourname.github.io“。

域名绑定

在你的hexo文件夹下会有一个public,这个目录是hexo根据markdown文件生成的html文件等,包括域名绑定的CNAME文件也得放在这里。创建一个叫做“CNAME”(注意是没有后缀的)的文件,内容就是域名地址,比如我的CNAME文件是“nomasp.com“。

配置与使用

Hexo配置

既然博客是自己的,当然要进行一些自定义的配置了,其实根据单词大家都能看出来意思。

1
2
3
4
5
6
7
# Site
title: 标题
subtitle: 子标题
description: 描述
author: 作者
language: 语言
timezone: 时区

来看看部署相关的配置吧:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repository: git@github.com:<your-user-id>/<your-repository-id>.git
branch: gh-pages

博客发表

回到我们前面说的scaffolds文件夹,打开它可以看到post等md文件,以它为例:

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

上面这个以后初始化的每一篇文章的默认的内容,categories是归类,tags是标签,这个应该不用说。

你还可以在上述内容之后继续添加你的自定义内容。

博文的创建我们可以通过hexo命令,我刚刚就创建一个标题为“Kindle书单”的文章:

1
2
MacBook-Pro:nomasp-blog nomasp$ hexo new post Kindle书单
INFO Created: ~/workspaces/github/nomasp-blog/source/_posts/Kindle书单.md

博客主题

我使用的主题是iissnan的next,可以在 这里 下载源码,解压好后放在上面所说的themes目录下。

将你解压后的文件夹名字记好,然后放到hexo的_config配置文件中:

1
theme: hexo-theme-next-master

关于next的配置,可以直接看官方的文档,非常详细。


未完待续,欢迎补充。



年龄在18、智商在80以上,除非征得同意,本站所有文章严禁以任何形式转载。当然了,提前联系的话一般都是允许的……😶

本站地址:http://nomasp.com/,欢迎留言、邮件


坚持原创,坚持分享✊,想要请我吃包辣条吗?🍻