使用Hexo在Github Pages上部署你的个人主页（Mac版）①

由于网络上大部分这类教程都是基于Win的，作者在Mac上部署时遇到了很多不一样的情况，踩了很多坑，故制作此教程。

一、安装Git

1. 查看是否安装Git，在终端输入：

1
git

如果安装过则会弹出：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
usage: git [--version] [--help] [-C <path>] [-c <name>=<value>]
           [--exec-path[=<path>]] [--html-path] [--man-path] [--info-path]
           [-p | --paginate | -P | --no-pager] [--no-replace-objects] [--bare]
           [--git-dir=<path>] [--work-tree=<path>] [--namespace=<name>]
           <command> [<args>]

These are common Git commands used in various situations:

start a working area (see also: git help tutorial)
   clone             Clone a repository into a new directory
   init              Create an empty Git repository or reinitialize an existing one

work on the current change (see also: git help everyday)
   add               Add file contents to the index
   mv                Move or rename a file, a directory, or a symlink
   restore           Restore working tree files
   rm                Remove files from the working tree and from the index
   sparse-checkout   Initialize and modify the sparse-checkout

examine the history and state (see also: git help revisions)
   bisect            Use binary search to find the commit that introduced a bug
   diff              Show changes between commits, commit and working tree, etc
   grep              Print lines matching a pattern
   log               Show commit logs
   show              Show various types of objects
   status            Show the working tree status

grow, mark and tweak your common history
   branch            List, create, or delete branches
   commit            Record changes to the repository
   merge             Join two or more development histories together
   rebase            Reapply commits on top of another base tip
   reset             Reset current HEAD to the specified state
   switch            Switch branches
   tag               Create, list, delete or verify a tag object signed with GPG

collaborate (see also: git help workflows)
   fetch             Download objects and refs from another repository
   pull              Fetch from and integrate with another repository or a local branch
   push              Update remote refs along with associated objects

'git help -a' and 'git help -g' list available subcommands and some
concept guides. See 'git help <command>' or 'git help <concept>'
to read about a specific subcommand or concept.
See 'git help git' for an overview of the system.

2. 通过Xcode安装Git（推荐）

目前版本的Xcode会自带Git，安装Xcode后就已经完成了Git的安装

3. 通过homebrew安装Git

    1. 若未安装homebrew，需安装homebrew
      1
      /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    1. 安装Git
      1
      brew install git

      二、创建ssh key、配置Git

      1. 设置username和email（Github每次commit都会记录他们）

      1
      2
      git config --global user.name "你的名字（例：Taro）"
      git config --global user.email "你的邮箱（例：xxxxxxxx@gmail.com）"

      2.通过终端命令创建ssh key

      1
      ssh-keygen -t rsa -C "你的邮箱（例：xxxxxxxx@gmail.com）"
      如果没有创建过，会要求你确认路径和输入密码，当然你可以什么都不做一路摁回车就行。如果成功的话会在~/下生成.ssh文件夹（就是你的用户名目录下，你也可以通过访达的前往输入该地址进入），但是这个文件夹是隐藏的，在Mac下，同时按住 “Command + Shift + .” 就可以查看隐藏文件（再按一次就会恢复隐藏）。此时你就能看见这个.shh文件夹，点进去打开id_rsa.pub，复制里面的内容（即key）。
      当然你也可以用cat命令直接查看：
      1
      cat .ssh/id_rsa.pub

      3.登录Github添加ssh key

    1. 点击Setings
    1. 点击New SSH key
    1. 添加key
    1. 链接验证
      1
      ssh -T git@github.com
      终端输出结果：
      1
      Hi TaroPie0224! You've successfully authenticated, but GitHub does not provide shell access.
      说明已经链接成功

      三、创建仓库

      如图进行操作

四、开启Github Pages

进入刚刚创建的仓库，打开设置，如图进行操作：

设置完毕后稍等一会儿你就可以通过username.github.io访问你的博客了。

五、clone该仓库至本地

这里通过Github客户端进行clone

六、安装并配置Hexo

使用Hexo需要Node.js和Git，如果您没有安装Node.js，请前往官网自行安装
https://nodejs.org/zh-cn/

1.选择博客目录，打开终端

选择一个你想要安装Hexo的目录，这里在Github clone的目录下新建了文件夹blog，右键它如图点击新建位于文件夹位置的终端窗口

2.安装Hexo

1
2
3
4
5
npm install hexo-cli -g   
hexo init #初始化网站   
npm install   
hexo g #生成或 hexo generate   
hexo s #启动本地服务器或者hexo server，一步之后就可以通过http://localhost:4000查看了

在这一步作者遇到了npm install hexo-cli -g的报错，可以尝试通过以下方式解决。
https://blog.csdn.net/shahuhu000/article/details/82599157
作者还遇到了权限问题，由于之前npm的报错，导致我尝试在指令前面加上sudo，结果还真的成功了，但是最后遇到了很麻烦的权限问题，比如后续在此目录下的操作都需要加上sudo，无法直接更改目录下的文件内容等，最后无奈重新init。

3.更改主题

    1. 安装yilia主题：
      1
      2
      hexo clean
      git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
    1. 启动主题
      找到目录下的_config.yml 文件,打开找到 theme：属性并设置为yilia
    1. 更新主题
      1
      2
      3
      4
      cd themes/yilia
      git pull
      hexo g
      hexo s
      此时刷新localhost:4000页面就能看到新的主题了：

在这一步作者原先像很多教程推荐的一样安装了next主题，但是在更改_config.yml中的theme: 并重新更新后页面如图所示（目前原因未知）：

七、使用Hexo deploy部署到Github

还是编辑根目录下_config.yml文件

1
2
3
4
deploy:
    type: git
    repo: git@github.com:TaroPie0224/taropie0224.github.io.git  #这里的网址填你自己的
    branch: master

保存后再安装一个扩展

1
npm install hexo-deployer-git --save

安装成功后进行部署

1
hexo deploy

运行结果类似如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
INFO  Validating config
INFO  Deploying: git
INFO  Setting up Git deployment...
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint: 
hint: 	git config --global init.defaultBranch <name>
hint: 
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint: 
hint: 	git branch -m <name>
Initialized empty Git repository in /Users/taropie/Documents/GitHub/blog/.deploy_git/.git/
[master (root-commit) 4f3fd92] First commit
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 placeholder
INFO  Clearing .deploy_git folder...
INFO  Copying files from public folder...
INFO  Copying files from extend dirs...
[master 114fe05] Site updated: 2022-01-06 22:24:51
 19 files changed, 2599 insertions(+)
 create mode 100644 2022/01/06/hello-world/index.html
 create mode 100644 archives/2022/01/index.html
 create mode 100644 archives/2022/index.html
 create mode 100644 archives/index.html
 create mode 100644 fonts/default-skin.b257fa.svg
 create mode 100644 fonts/iconfont.16acc2.ttf
 create mode 100644 fonts/iconfont.45d7ee.svg
 create mode 100644 fonts/iconfont.8c627f.woff
 create mode 100644 fonts/iconfont.b322fa.eot
 create mode 100644 fonts/tooltip.4004ff.svg
 create mode 100644 img/default-skin.png
 create mode 100644 img/preloader.gif
 create mode 100644 img/scrollbar_arrow.png
 create mode 100644 index.html
 create mode 100644 main.0cf68a.css
 create mode 100644 main.0cf68a.js
 create mode 100644 mobile.992cbe.js
 delete mode 100644 placeholder
 create mode 100644 slider.e37972.js
Enumerating objects: 32, done.
Counting objects: 100% (32/32), done.
Delta compression using up to 8 threads
Compressing objects: 100% (25/25), done.
Writing objects: 100% (32/32), 150.37 KiB | 159.00 KiB/s, done.
Total 32 (delta 5), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (5/5), done.
remote: This repository moved. Please use the new location:
remote:   git@github.com:TaroPie0224/TaroPie0224.github.io.git
remote: 
remote: Create a pull request for 'master' on GitHub by visiting:
remote:      https://github.com/TaroPie0224/TaroPie0224.github.io/pull/new/master
remote: 
To github.com:TaroPie0224/taropie0224.github.io.git
 * [new branch]      HEAD -> master
Branch 'master' set up to track remote branch 'master' from 'git@github.com:TaroPie0224/taropie0224.github.io.git'.
INFO  Deploy done: git

此时回到刚刚仓库的设置界面，做以下更改：

OK稍等1分钟左右（并不会立刻完成），再打开https://username.github.io/ 此时你会发现页面已经同步更新完成了。

八、配置站点信息

修改根目录下的 _config.yml 文件，找到 Site 区域，这里面可以配置站点标题 title、副标题 subtitle 等内容、关键字 keywords 等内容，比如我的就修改为如下内容：

1
2
3
4
5
6
7
8
# Site
title: 香芋派Taro
subtitle: 
description: 
keywords: 
author: 　
language: zh-CN
timezone:

九、新建一篇文章

进入到博客的根目录下打开终端，输入以下指令：

1
hexo new "文章名"

然后打开根目录下的source文件夹，再点开_posts文件夹，你会看到有文件名.md的Markdown文件已经自动生成，直接修改其内容即可，然后再次

1
2
hexo g
hexo s

重新回到localhost:4000，你就能看到你的主页上多出来了刚刚新建的文章。
至此你已经完成了在Github Pages上用Hexo部署个人博客，同时学会了一些Hexo的基本操作，下一篇教程我将以butterfly主题为例子继续深入讲解如何配置和优化主题，同时增加自定义内容。