Hexo 搭建个人博客教程 | 刘广睿的思维实验室
0%

Hexo 搭建个人博客教程

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

1 准备工作

1.1 注册 GitHub 账号

访问 GitHub 官网注册 GitHub 账号并进行邮箱验证。
图 1

1.2 安装 Node.js 和 nmp

访问 Node.js 官网安装 Node.js,nmp 是随同 Node.js 一起安装的包管理工具。
图 2

1.3 安装 Git for Windows

访问 Git 官网安装 Git for Windows。
图 3

2 搭建 GitHub 博客

2.1 创建 GitHub 仓库

新建一个 Repositories, 存放博客项目文件。
图 4
新建一个名为“你的用户名.github.io”的仓库。如果你的GIthub用户名是 test,那么就新建 test.github.io的仓库(必须是你的用户名,其它名称无效),由此可见,每一个 GitHub 账户最多只能创建一个这样可以直接使用域名访问的仓库。
图 5
跳转到该库界面,选择 Settings。
图 6
进入 Settings 后,下拉找到 GitHub pages 设置界面,点击 Choose a theme。
图 7
选择一个博客主题,然后点击 Select theme。
图片 8
到这一步就已经可以访问自己的博客了。在地址栏输入:用户名.github.io 就可以访问页面了。
图 9

2.2 配置 SSH Key

在 Windows 菜单里搜索启动 Git Bash,设置 user.name 和 user.email 的配置信息:

1
2
git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的 GitHub 注册邮箱"

生产SSH秘钥文件:

1
ssh-keygen -t rsa -C "你的 GitHub 注册邮箱"

然后直接三个回车即可,默认不需要设置密码。
找到生成的 .ssh 的文件夹中的 id_rsa.pub 密钥,用记事本打开并复制里面的内容。
图 10
打开GitHub主页,进入个人设置 –> SSH and GPG keys –> New SSH key:
新建 New SSH key,将复制的内容粘贴到key中,title随便填,保存。
图 11
启动 Git Bash 输入:

1
ssh -T git@github.com # 注意邮箱地址不用改

如果提示:

1
Are you sure you want to continue connnecting (yes/no)?

输入 yes,然后会看到:

1
Hi XXX! You’ve successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明 SSH 已配置成功!

3 使用Hexo写博客

3.1 安装Hexo

在自己认为合适的地方创建博客文件夹,然后在该目录下右键点击 Git Bash Here,打开 Git 的控制台窗口,之后的所有操作都在 Git 控制台中进行,不要再使用 Windows 的控制台了。

1
npm install -g hexo # 安装Hexo

3.2 初始化Hexo

仍在该目录下右键 Git Bash Here,输入:

1
hexo init

输入以上命令后,hexo 会自动下载一些文件到这个目录,包括 node_modules,其中比较重要的几个文件的目录结构如下:

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

输入:

1
2
hexo g # 生成
hexo s # 开启本地预览服务

执行以上命令后,Hexo 就会在 public 文件夹生成相关 html 文件,这些文件将来都会提交到 GitHub 中。
打开浏览器访问 http://localhost:4000 即可看到博客内容,第一次初始化时Hexo已经自动生成了一篇名为 Hello World 的文章。
图 12

3.3 配置 Hexo

在 Hexo 中有两种主要配置文件,其名称都是 _config.yml。其中,一种位于站点根目录下,主要包含 Hexo 本身的配置;另一种位于主题目录下,这种配置文件由主题坐着提供,主要用于配置主题相关选项。为了描述方便,在以下说明中,将前者称为站点配置文件,后者称为主题配置文件
修改站点配置文件中有关 deploy 的部分,注意将 username 修改为你的 GitHub 用户名:

1
2
3
4
deploy:
type: git
repository: git@github.com:username/username.github.io.git
branch: master

并安装插件:

1
npm install hexo-deployer-git –save

打开 Git Bash,输入 hexo d 就会将本次所有改动的代码全部提交,没有改动的不会提交。
此时访问博客地址就和本地预览服务一样了。
图 13

3.4 写第一篇博文

定位到 Hexo 根目录,执行命令:

1
hexo new 'my-first-blog'

Hexo 会在 _posts 下生成相关 md 文件。我们只需打开这个文件就可以编写博客了,一般完整格式如下:

1
2
3
4
5
6
7
8
9
---
title: postName #文章页面上的显示名称,一般是中文
date: 2013-12-02 15:30:16 #文章生成时间,一般不改,但可以修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签,可空缺
description: 附加一段文章摘要,字数最好在140字以内,会出现在meta的description里面
---

以下是正文

#4 美化主题

4.1 下载 Next 主题

以 Next 主题为例,如果你熟悉 Git,建议使用克隆最新版本的方式,之后的更新可以通过 git pull 来快速更新,而不用再下载压缩包替换。
使用 Git Bash 定位到 Hexo 站点目录下。使用 Git checkout 代码:

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

4.2 启用主题

打开站点配置文件,找到 theme 字段,并将其值改为 next。

1
theme: next

至此,Next 主题安装完成。下一步我们验证主题是否正确启用。在切换主题之后、验证之前,我们最好使用 hexo clean 命令来清除 Hexo 缓存。然后输入命令 hexo d 开启本地预览服务,当命令行输出中提示:

1
INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

使用浏览器访问 http://localhost:4000 ,检查站点是否正确运行。
当你看到站点的外观与下图所示类似时,说明已经成功安装 Next 主题。这是 Next 默认的 Scheme–Muse。
图 14
执行 hexo d 提交代码。终于,我们的博客已经搭建完毕,后续可以进一步美化博客主题,并不断充实博客内容。您可以通过以下连个网址查询具体的网站与主题配置以进一步完善您的网站。

开始耕耘你的网上花园吧!


参考


- - - - - - - - - - - - - - - - 本 文 结 束 啦 感 谢 您 阅 读 - - - - - - - - - - - - - - - -