基于Github和Hexo的博客搭建踩坑记

发表于 | 分类于

初衷

  • 我为什么要搭建自己的blog？
    • 很早就有搭建博客的想法，但是平时记录一些东西是有道云笔记用的多一点，所以一直都没有行动起来。最近受小伙伴的鼓舞，决定把博客搭建起来并把搭建的过程记录下来，让他们也可以学习一下快速搭建一个blog。
  • 我为什么选择hexo来搭建我的blog？
    • 网上关于hexo的教程很多，可以快速找到搭建资料并解决搭建过程中遇到的问题。个人觉得hexo使用起来比worldpress要好用很多，门槛低好上手。
    • Next主题好看啊！

前期准备

  • brew（自行搜索安装啦）、nodejs、git、github账号以及命名为yourname.github.io的仓库、安装过程中爬梯会更快些，笔者在安装的过程中没有爬梯，简直生不如死QAQ~~~

安装git

1
$ brew install git

在bash中输入该命令行可以自动安装git （mac其实有自带的git ，但是我自己还是安装了）。运行 git --version ,若看到版本号后就代表安装成功了。

安装nodejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
  $ brew install npm
```   
  安装完成后，注意看一下配置文件是否正确，文件路径`~/package.json`
```json
  //这是我的配置文件信息
  {
    "name": "bruce",
    "version": "1.0.0",
    "private": true,
    "description": "bruce",
    "main": "index.js",
    "dependencies": {
      "express": "^4.16.3"  //一个基于nodejs的web开发框架，是我自己装的，不用管
    },
    "devDependencies": {},
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
  }

其中"private":true， "description":"xxx" 两个属性要有，我安装完nodejs时配置文件中这两个字段为空，导致命令行运行 npm -v 时会有2个warn报错信息，虽然不会影响运行，但作为一个tester（其实是强迫症哈哈哈）实在是看不下去，于是找到解决办法解决了。
安装完成后，npm -v 能看到版本信息就代表安装成功了！

安装HEXO

1
2
$ npm install hexo -g
#-g 全局安装

安装时如果出现Error: Permission denied的情况，使用 sudo npm install hexo -g 即可。
安装过程会比较慢，取决于你与github之间的连接速度，安装完成后，使用hexo -v来查看是否安装成功。

初始化hexo

在~目录下，创建一个blog文件夹，并在该文件夹中初始化hexo，命令行如下：

1
2
3
$  mkdir blog
$  cd blog
$  hexo init

初始化成功后，使用ls -l可以看到以下文件：

此时使用 $ hexo server 或者 $ hexo s 就可以在本地启动hexo,打开 http://localhost:4000/就可以看到本地的blog系统了。

到这里，其实已经完成了一大部分了。那么问题来了，怎么讲blog部署到自己的github仓库中 去，并能够在外网访问呢？这里就要用到刚才准备好的github账号了。

配置并部署HEXO

配置hexo与github的连接
打开刚才blog目录中的yaml格式的配置文件_config.yml，需要注意的地方：yaml格式的文件每个冒号后面要加空格，换行时缩进需要严格控制（具体可以百度/谷歌 YAML文件），不然会影响到配置文件结构不对，导致部署失败。可以用vi、sublime 或者其他的文本工具编辑。

其中两个地方配置需要注意，其他的配置可以自己去研究一下哈~

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#site
title: Nowhere            //blog名
subtitle:                 //副标题
description: xxx          //描述
keywords:                 //关键字
author: bruce             //作者
language: zh-Hans         //语言
timezone: Asia/Shanghai   //时区

# Deployment
deploy:
  type: git
  repository: https://github.com/bruce0312/bruce0312.github.io  //刚才前期准备的仓库
  branch: master

设置完成后，保存。

  • hexo部署
    $ hexo generate | $ hexo g
    $ hexo deploy | $ hexo d
    在部署的时候，会让你输入github的账号密码，如果不想输入，也可以自己先配置一下。
    1
    2
    $  git config user.emial github_email
    $  git config user.name github_name

其中遇到一个坑，在deploy的时候提示我 ERROR Deployer not found: git；
这个问题需要安装hexo-deployer-git来解决，命令为：
$ npm install hexo-deployer-git --save

好了，到这里部署成功后，blog基本搭建完成了，可以去yourname.github.io中查看的你成果啦~

1
2
3
4
5
6
7
8
9
$ hexo 常用的命令
$ hexo new "postName"       #新建文章 
$ hexo new page "pageName"  #新建页面 
$ hexo generate             #生成静态页面至public目录 
$ hexo server               #开启预览访问端口（默认端口4000，'ctrl + c'关闭server） 
$ hexo deploy               #将.deploy目录部署到GitHub 
$ hexo help                 #查看帮助 
$ hexo version              #查看Hexo的版本
$ hexo clean                #清除hexo的缓存

安装next主题

1
2
3
$  cd blog/
$  git clone https://github.com/theme-next/hexo-theme-next themes/next    #新地址
$  git clone https://github.com/iissnan/hexo-theme-next themes/next       #旧地址（我用的是这个）

下载完成后， $ vi _config.yml 修改hexo的配置文件中的theme字段，修改为theme: next后保存，运行$ hexo s 就可以重新加载在本地预览了~next主题自带四种风格的样式，可以进入/blog/themes/next中打开_config.yml配置文件，在Schemes中可以修改，笔者用的是Pisces啦，感觉还不错。其他的自定义配置都可以在这个配置文件中修改，感兴趣的可以自己去折腾哈！

PS.Github账号创建ssh密钥

Q: 为什么要使用ssh密钥？
A: 使用ssh密钥来和github通信更加方便快捷安全，省去输入账号密码的时间。

a.生成本地电脑上的SSH Key

首先要检查本地电脑上是否存在SSH key
$ ls -al ~/.ssh 如果没有存在，会显示No such file or directory；如果已经存在，会显示id_rsa和id_rsa.pub两个文件。
如果我们没有生成过SSH key，那么我们需要先生成本机的SSH key

1
2
3
$  ssh-keygen -t rsa -C "your_email@example.com"
#-t 秘钥类型
#-C Comment 这里可以填写你自己的github邮箱账号，主要是为了记录密钥的用途

  • 生成成功后，终端中会显示：

    Generating public/private rsa key pair.
    Enter file in which to save the key (/Users/xxx/.ssh/id_rsa): //提示你密钥保存的路径，直接默认ENTER即可。

  • 回车后提示：

Created directory ‘/Users/xxx/.ssh’.
Enter passphrase (empty for no passphrase): //提示输入 passphrase，每次与 GitHub 通信都会要求输入 passphrase，以避免某些「失误」，这里我怕麻烦直接ENTER了，因为输了以后，每次通信都需要输入passphrase。

  • 回车后提示：

Your identification has been saved in /Users/xxx/.ssh/id_rsa.
Your public key has been saved in /Users/xxx/.ssh/id_rsa.pub.
The key fingerprint is:
xxxxxx your_email@example.com
The key’s randomart image is:（后面图形省略）

此时，将id_rsa.pub中的密钥信息copy出来，方法有多种，比如最方便的如：

1
$  pbcopy < ~/.ssh/id_rsa.pub

或者用cat命令查看，手动copy。

b.在github中设置Deploy Key

接下来，去github中设置你的deploy key，进入刚才准备好的yourname.github.io仓库，进入Settings - > Deploy keys - > Add deploy key

title：一般写用途
Key：粘贴刚才复制的秘钥信息
Allow write access：true
点击Add Key就可以保存成功了。
测试key能否正常使用：

1
$  ssh -T git@github.com

如果看到如下的提示，就说明配置成功了。

Thanks For Watching!