使用hexo在github上搭建自己的博客

0x01 简介

hexo是node.js提供的一个强大的,并且简单快速搭建自己博客的工具,通过该工具可以快速的搭建起自己的博客,该工具还提供了一系列的主题,可以快捷的设置不同主题。通过修改几个命令就可以将搭建好的博客部署到github上。
下面将会讲解如何1.通过hexo搭建自己的博客 2.如何设置博客的主题 3.如何应用到github 4.域名关联,通过自己的域名访问博客

0x02 准备工作

在开始工作之前你需要做一些准备工作

  • 创建一个github账号,如果没有的话
  • 安装node.js
  • 安装npm

0x03 LET’S DO IT

1、 首先在登录你的github账号,并且创建一个仓库,这个仓库的名字一定要按照特定的格式来写:也就是你的 用户名.github.io,如下图所示:

由于我之前已经创建过相同命名的仓库,所以会提示我已经重复了,以上的截图只是用于做仓库命名的示例,切记仓库的名字一定是 用户名.github.io

2、 如果github上面没有配置SSH的话需要在本地生成一个公钥,然后配置到github上面。(如果已经配置的可以直接看第三步)
使用以下命令创建一对公私秘钥

1
2
$ ssh-keygen -t rsa -C "your_email@youremail.com" //创建秘钥,执行该命令后一直回车即可
$ cat ~/.ssh/id_rsa.pub //创建完成后查看创建好的公钥

将上面创建好的公钥复制,然后登录github, 按照Settings -> 左栏点击 SSH and GPG keys -> 点击 New SSH key的步骤,粘贴公钥即可。

3、 安装hexo

1
$ npm install -g hexo

4、 初始化目录在本地创建一个文件夹,可以随便起一个名字, 然后进入到该文件夹里面,通过hexo init初始化,初始化完成后会在该文件夹里面生成一些文件。

1
2
3
Lemons-MacBookPro:~ lemon$ mkdir hexo
Lemons-MacBookPro:~ lemon$ cd hexo/
Lemons-MacBookPro:hexo lemon$ hexo init

生成的目录如下所示:

5、 修改 _config.yml: 配置文件,可以在里面配置博客的名字,描述,主题,部署到哪里等等,下面来看一下里面主要需要修改的地方。
设置博客网站的标题,副标题,描述,作者的名字,语言,时区

1
2
3
4
5
6
7
8
  # Site
title: Lemon's blog
subtitle: Talk is cheap show me the code
description: iOS Developer | 拥抱变化 | 🍋😊
keywords:
author: lemon
language: zh-CN
timezone: Asia/Shanghai

需要部署到哪个平台,你需要修改的地方是repo,将仓库的地址换成在第一步创建的仓库地址

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:codemonkeybulucck/codemonkeybulucck.github.io.git
branch: master

6、在本地浏览器查看博客的效果

1
2
3
4
5
6
7
8
9
10
11
$ hexo generate # 生成,可以用简写 hexo g
$ hexo server # 启动服务,可以用简写 hexo s
INFO Start processing
WARN ===============================================================
WARN ========================= ATTENTION! ==========================
WARN ===============================================================
WARN NexT repository is moving here: https://github.com/theme-next
WARN ===============================================================
WARN It's rebase to v6.0.0 and future maintenance will resume there
WARN ===============================================================
INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

这样就会将博客部署到本地,在浏览器打开http://localhost:4000/ 即可访问

7、在第六步中我们看到的生成默认主题的博客,我们也许想换成更加符合我们审美的主题。 我们可以在 hexo有哪些好看的主题这里找到我们自己喜欢的主题,下面以 hexo-theme-next 为例。 还是在我们的博客目录,下载主题到该目录下的theme文件夹

1
$ git clone https://github.com/iissnan/hexo-theme-next.git themes/next

下载完成之后,打开_config.yml文件修改以下地方

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

将原来的默认的主题改为next,然后执行hexo server 来重新生成本地博客,这个时候在浏览器查看会发现主题和之前的不一样了。你还可以在theme->next->_config.yml文件夹里面修改布局,可以设置下面四个中任意的一个

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
scheme: Pisces
#scheme: Gemini

8、 到此为止我们已经搭建好博客并且设置了相应的主题,下面我们来试一下写一篇博客。博客的类型是markdown格式,可以下载一个Mweb来提前写好文章然后复制到source->_posts文件夹里面,也通过通过 hexo new post “博客名字”来生成一个markdown类型的博客

9、上传到github,由于我们在第5点已经设置了github的地址,因此我们直使用 hexo deploy来上传即可。
如果发现执行以上命令后有如下错误
Deployer not found: github 或者 Deployer not found: git
则需要先安装一个插件

npm install hexo-deployer-git --save
安装完该插件之后继续执行 hexo deploy 即可通过 你的用户名.github.io来访问你的博客。下面是我的博客 codemonkeybulucck

10、绑定域名,如果没有域名的可以到阿里万网 购买一个域名,
购买完成后到控制台找到对应的域名,添加解析,域名配置最常见有2种方式,CNAME和A记录,CNAME填写域名,A记录填写IP,由于不带www方式只能采用A记录,所以必须先ping一下你的用户名.github.io的IP,然后到你的域名DNS设置页,将A记录指向你ping出来的IP,将CNAME指向你的用户名.github.io,这样可以保证无论是否添加www都可以访问
按照我下面的设置即可

设置完成之后还不可以立刻使用域名访问,需要到本地的博客的目录下的source文件夹里面创建一个CNAME文件,里面填写购买的域名
然后重新 hexo deploy之后就可以通过域名来访问你的博客了。

0x04 以上,希望能帮助到你。

-------评论系统采用disqus,如果看不到需要翻墙-------------