Github+Hexo To Build Blog (forMac)

Posted on | In

Github+Hexo建立个人博客（forMac）

在PM的学习道路上，最重要的是知识输出，因此我考虑建立一个个人博客，记录自己的PM学习历程。在网上查询资料后发现利用Hexo+Github可以轻松建立个人博客，因此，本文记录了本人建站时的过程以及踩的一些坑。

准备工作

1、Github账号+个人仓库

2、本地Git环境

3、安装Node.js

4、安装Hexo

5、本地试运行

6、部署到Github

7、配置网站

一、Github账号

1、创建Github账号

请移步至Github官网创建属于自己的Github账号：https://github.com/

ps：请谨慎填写账号名（用户名），因为创建的仓库名必须与账号名相同，且创建的个人博客的域名也为仓库名，良心建议取一个自己中意酷炫的名字！

2、创建个人仓库

(1)、创建完Github账号后，请登录，随后点击右上角的”+”,选择New repository（新建仓库）

（2）、进入Create a new repository界面后，记住，Repository name需要和账号名一致，创建一个和你用户名相同的仓库，后面加.github.io，将来要部署到GitHub page的时候，才会被识别，即：用户名.github.io，然后点击生成create repository。

二、本地Git环境

1、下载安装Github软件

在本地下载属于你系统的Github，并安装

Mac下载地址： https://mac.github.com/

一路按照提示傻瓜安装，安装成功后，通过Mac终端命令行可以查看Git版本，从而判断是否安装成功：

输入git —version

1
2
bogon:~ vicky$ git --version
git version 2.21.0

显示git版本即为安装成功

2、创建SSH链接Github

（1）打开终端，输入 cd~/.ssh，进入目录后，创建ssh密钥，作为github验证

bogon:~ vicky$ cd ~/.ssh

（2）在该目录下，输入ssh-keygen -t rsa -C xxx@163.com(你的Github注册邮箱，我用的是163)

bogon:.ssh vicky$ ssh-keygen -t rsa -C xxx@163.com

随后一路回车即可

（3）输入完成后，输入ls指令，可以看到生成下列四个文件

1
2
bogon:.ssh vicky$ ls
config		id_rsa		id_rsa.pub	known_hosts

打开文件id_rsa.pub

bogon:.ssh vicky$ vi id_rsa.pub

将文件中生成的密钥复制下来

3、在GitHub上添加SSH功能

（1）点击右上方按钮，选择Setting

（2）进入后，点击左侧导航栏中SSH and GPG Keys，随后点击New SSH key按钮

（3）Title取一个你喜欢的名字就好了（不重要），然后将你从终端文件id_rsa.pub中复制的密钥粘贴到Key中，然后点击Add SSH key按钮即可

（4）测试ssh是否添加成功

在终端输入ssh -T git@github.com测试是否成功，若如下图所示，显示successfully字段，则成功

1
2
bogon:~ vicky$ ssh -T git@github.com
Hi VickyDYY! You've successfully authenticated, but GitHub does not provide shell access.

三、安装Node.js

Hexo是基于Node.js的，因此电脑需要安装Node.js

下载地址：https://nodejs.org/en/download/

一路如火花似闪电地安装即可，安装完成后，在终端命令行中输入以下指令看看是否安装成功：

1
2
3
4
bogon:~ vicky$ node -v
v10.15.3
bogon:~ vicky$ npm -v
6.4.1

若出现了node和npm的版本，则成功安装node和npm，Hexo需要的环境搭建完成

四、安装Hexo

前面的git和nodejs安装完成后，我们就可以安装hexo了，步骤如下：

（1）在电脑上的某个位置，创建一个blog文件夹（叫什么名字都可以，你喜欢就好啦），我创建在了文稿中

（2）在终端中cd到这个文件夹中，例：

1
cd Documents/blog/

（3）输入命令，耐心等待hexo安装

1
npm install -g hexo-cli

用hexo -v查看版本，若正常显示版本，未报错，则hexo安装成功

（4）初始化hexo

1
hexo init myblog //myblog可以随便取名

（5）进入myblog，即cd myblog，然后输入：

1
npm install

耐性等待ing……

新建完成后，制定文件夹目录下面有：

  • node_modules: 依赖包
  • public：存放生成的页面
  • scaffolds：生成文章的一些模板
  • source：用来存放你的文章
  • themes：主题
  • _config.yml: 博客的配置文件

五、本地试运行

在本机查看你生成的博客，终端输入：

1
2
hexo generate
hexo server

出现了下面的提示后：

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

在你的浏览器中地址栏输入 localhost:4000，即可查看你的初始博客界面，大约长这样：

哇，好开心，就这么轻松的建立了个人博客呢！（鼓掌，撒花～～～～～～）

六、部署到Github上

已经走到了这一步，我们就可以将本地的Hexo和Github关联起来，也就是将hexo生成的文章部署到Github上

（1）还记得你在前面建立的blog文件夹吗？打开blog，里面存放着站点配置文件_config.yml，

请你打开它vi _config.yml，翻到最后，找到deploy部分，然后按照下图方式填写：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

（ps：YourgithubName就是你的GitHub账户）

注意，这个时候需要先安装部署的命令，终端输入：

1
npm install hexo-deployer-git --save

然后，输入：

1
2
3
hexo clean
hexo generate
hexo deploy

然后静待一会，打开你的http://yourname.github.io，要是可以看到 localhost:4000之前显示的界面，那就说明你成功啦！

七、配置网站

hexo给出的默认网站没有个人特色，作为个人博客，我们怎么能少了配置网站这一步操作呢

打开站点配置文件_config.yml，我们可以在里面修改大部分的配置，这里具体参考hexo官方文档进行配置即可：https://hexo.io/zh-cn/docs/configuration

未完待续……