从零开始的Hexo博客搭建（一）—— 搭建博客并部署到github

本文最后更新于：1 年前

事情的起因是这样的，在上网查东西的时候经常看见一些文章在个人博客网站发布，于是决定自己也捣鼓个博客装装逼，然后就在网上搜了一圈，发现现在市面上的博客平台还是有不少的，比方说博客园、简书、CSDN啥的，这些平台功能完善，注册给账号就能开始写文章，也不用去进行什么复杂的配置，简单点说就是你只管写文章就行，剩下的平台帮你处理。而且这些平台基本上都有社区论坛之类的，用户交流也很方便。

这么一看，好像在这几个平台直接注册账号开始写文章就挺八错了，但是呢，前面提到的这几个平台，博客园我有用过，CSDN注册了账号就没有以后了，简书虽然没用过，但是经常会看上面的文章，然后就发现这些平台都或多或少有一些限制，比方说想自己放点奇奇怪怪的东西上去就不太行了，而且除了博客园以外，其他的平台不能自定义网站的外观，最多可以换换主题。所以思来想去还是自己搭一个博客网站吧，但是又一想自己搭网站不仅要买服务器买域名还有备案，而且还要自己设计制作网站，网站上线以后还要定期进行维护，像我这么懒得人说不定过几天就扔一边了，这样一想不行太亏，只能再考虑考虑别的方式。然后机智如我又想到了一个办法，就是把网站放到GitHub page上面，套上Hexo这个博客框架，前期设置好了后期基本上不太需要维护，所以用这个方法很容易就能做出一个好看又装逼的博客网站了，啰嗦了这么多下面就来说说具体怎么操作吧。

Hexo简介

Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。官网对Hexo的介绍是快速、简洁且高效的博客框架。

环境搭建

安装Node.js

Node.js 为大多数平台提供了官方的安装程序。可以去官网下载 | Node.js下载

安装完成后打开命令行查看是否安装成功：

1 2	`node -v npm -v`

安装Git

Git是目前世界上最先进的分布式版本控制系统，我们用它来管理Hexo博客文章，上传到GitHub。去官网下载对应系统的Git安装程序或者通过命令行的方式安装。

安装Hexo

在Node.js和Git都安装完成之后，安装Hexo，用命令行运行以下命令 npm install -g hexo-cli，之后可以用hexo -v查看版本来检查是否安装成功。

初始化Hexo并设置主题

初始化Hexo

Hexo 安装完成后，用命令行依次执行以下命令，Hexo 将会在指定文件夹中新建所需要的文件，其中<folder>就是你想要作为博客初始化的文件夹。

1	`hexo init <folder>`

或者通过git bash操作，在你想新建博客的空文件夹中右键，选择git bash here，然后在打开的命令窗口直接输入hexo init就能初始化。

其中，hexo init <folder> 的<folder>是可选项，代表你想要初始化的文件夹，如果不写则默认在你当前打开的文件夹内初始化，比如你在blog文件夹内用Git bash here 打开命令行，再运行hexo init 这个命令，就会直接在blog这个文件夹内初始化，如果加上参数hexo init hexo 则会在blog文件夹内新建一个名为hexo的文件夹，然后在hexo这个文件夹内初始化。另外不管在哪个位置初始化，都要求你初始化的文件夹是空文件夹，否则初始化失败，命令行会打印错误提示文件夹不为空。

还要注意的一点是：如果使用cmd命令行操作，会直接在我的文档（如Administrator）下新建文件夹进行初始化，如果不想新建在我的文档内，需要先用命令行切换到你想新建的位置下然后再初始化，如：

1
2
3

d:
cd hexo-blog
hexo init

新建完成后，指定文件夹的目录如下：

.
├── .gitignore
├── _config.yml
├── package.json
├── package-lock.json
├── node_modules
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

这时你可以在这个文件夹下使用命令hexo server来运行博客，在浏览器中访问http://localhost:4000/查看效果。

默认显示页面如下：

更多关于hexo的命令和设置可以去官网查看。

设置主题

Hexo默认的主题是landscape，更多主题可以去官网查看挑选。

主题的安装方式通常有两种：

一种是去主题的GitHub项目上下载到本地，然后将主题文件夹复制到站点目录的themes文件夹下。
另一种方式是用命令行安装：

1 2	`cd <your-hexo-folder> git clone https://github.com/iissnan/hexo-theme-next themes/next`

虽然两种安装方式不同，但主题的配置方式是一样的，都是在博客的站点目录下的配置文件_config.yml中修改：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: <主题文件夹的名称>

重点：这里需要注意的是，站点配置文件和主题配置文件是两个不同的配置文件。假设你的博客站点文件夹名字是blog，那么你的站点配置文件路径就是blog\_config.yml，而主题配置文件的路径则是blog\themes\主题文件夹名\_config.yml，修改配置时要注意区分。

部署博客到GithubPages

创建GitHub仓库并添加SHH key

创建仓库

创建仓库之前，你要有一个GitHub账号，如果没有先去注册一个，之后在你的<Github账号名称>.github.io页面右上角头像点开下拉菜单，找到Your repository点开，然后点new按钮创建一个名为<你的Github账号名称>.github.io的仓库，并且设置为公开（public），再进行下一步。

添加SSH key

创建SSH key是为了将博客推送到GitHub上，在命令行运行以下命令，创建过程中需要根据提示按三下回车：

1	`ssh-keygen -t rsa -C "你的邮箱地址"`

创建完成后在电脑上找到生成的秘钥，比如C:\Users\Administrator\.ssh\id_rsa.pub，打开这个文件，注意是带pub后缀名的这个文件，将里面内容复制出来，然后打开GitHub，点击你的头像，在setting中找到SSH and GPG keys 这个选项，然后点击New SSH key把你刚刚复制的内容放进去，可以给这个SSH Key起一个名字方便知道是做什么用途的。（操作中更具体的内容可以在另一篇文章中查看。）

测试是否添加成功。在命令行中依次输入以下命令：

1 2	`ssh -T git@github.com yes`

当看到返回You’ve successfully authenticated即为成功。

将本地博客推送到GitHub仓库

安装hexo-deployer-git插件。在命令行运行以下命令：

1	`npm install -g hexo-deployer-git --save`

然后打开站点配置文件_config.yml，把文件的最后修改为如下内容：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:<你的Github用户名>/<你的Github用户名>.github.io.git
  branch: master

接下来就可以把博客推送到GitHub Pages了，在命令行（位置已经跳转到博客目录下）输入以下命令：