Hexo
0%

hexo_github_MacOS

Posted on Edited on In

全文纲要

这是我新建立博客的第一篇自己用Markdown语法上传的博客，并不关心关注度与点击量，仅仅是记录自己生活与学习上的一些经历罢了。经验的重复提示着我人类的记忆系统是有限的，计算机与互联网不得不成为我的“外接硬盘”，否则我的大脑将会在记忆的效果好坏的泥潭里无法出来。

这篇博客简单介绍自己通过hexo利用Git Pages静态网页模版开始前的环境配置以及准备工作。其中包括遇到的bug等，相信对于和我一样的电脑小白会有启发和帮助。

如有谬误，烦请指正。

A BRIEF INTRO

系统配置

MacBook Pro(13-inch, 2019, Four Thunderbelt 3 ports, 8 GB Memory)

macOS Bug Sur Version 11.2.3

正文

在流程介绍中，随时出现的bug我会随时解决，请适应这种行文格式。整个流程共分为以下步骤：

  1. node与npm的安装
  2. hexo的安装与准备
  3. hexo与git间的交互准备
  4. 如何用hexo编辑属于你个人的博客

1. node.js与npm的安装

关于node.js与npm，简而言之，node.js以JavaScript为基础提供了前端渲染与网页制作的便捷，与此同时，npm作为包管理器能够良好地为node.js提供与前端的共享等服务。
具体详情请参考npm 是干什么的？（非教程）

安装nvm

nvm是node.js version management，也就是不同版本的node.js以及npm的包管理工具，我就是通过安装这个来实现的。

Steps

  1. 检查mac是否安装homebrew
    1
    $ brew -v
  2. homebrew已安装的条件下，在终端输入
    1
    $ brew install nvm
  3. 显示安装成功后，在终端输入
    1
    $ brew install nvm

出现下图则表示nvm安装成功。
！图片提示语

此时在终端分别输入

1
$ node -v
1
$ npm -v

应该会出现相应的版本号

Bug1：command not found: nvm

我在终端输入nvm时显示

1
$ command not found: nvm

之前遇见过几次，可能问题出在新的zsh上，我的解决方法如下（参考Mac OS 下 NVM 的安装与使用）：

  1. 在终端运行
1
2
3
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
  1. 在 .zshrc 文件内添加以上配置信息（即上方代码）

我的.zshrc文件在我个人用户名folder内(即～)。通过在finder点击**command+shift+.**来显示隐藏文件，找到.zshrc后用TextEdit打开并添加保存即可。

接下来按照上方要求，检验是否有nvm命令。

[注]同样有其他安装nvm以及node.js、npm的方式，我在尝试过程中遇到没有解决的问题，进而选用了如上流程

2. hexo的安装与准备

Followhexo官网的instructions就可以使用了，就在首页。
hexo安装的位置因人而异，我直接在～下在终端运行该段代码。

1
2
3
4
5
6
$ npm install hexo-cli -g # 安装hexo
$ hexo init blog # 在当前folder下新生成一个hexo文件，文件名为blog（应该可以自定义）
# 注意要根据你自己想要存放hexo博客内容的地方在运行第二行代码
$ cd blog # 这里是进入blog folder
$ npm install
$ hexo server # 此处等同于hexo s

运行hexo s后会出现如下内容，你可以通过复制临时链接预览你的网页，按ctrl+c退出。

3. hexo与git间的交互准备

ssh密匙创建

  1. 在终端输入

    1
    $ ssh-keygen -t rsa -C "username" # username一般指你的邮箱地址

    点击enter，出现更改id_rsa路径的提示，我选择默认，即直接enter

  2. 接下来，会出现Enter passphrase (empty for no passphrase):
    这里是让你输入进入的密码，你也可以选择不输入。我在此选择不设置密码直接点击enter，在确认密码时也同样点击enter。

如此我们就创建好了一个ssh密匙

git 添加 ssh密匙

  1. 在你刚才添加ssh密匙的路finder径下点击command+shift+.，显示隐藏文件，会出现.ssh的folder，进入后找到id_rsa.pub文件，用TextEdit打开并全部复制到剪切板。

  2. 打开你的github网页（这里默认你已经注册并登录）
    如下图，点击Settings，点击SSH and GPG keys

    进入后选择New SSH key，Title自己命名，Keys处粘贴复制的文件内容，然后增加密匙就好啦。

  3. 在github上新创建一个repository，注意命名格式必须为xxx.github.io，其中xxx为你的用户名。

4. 如何用hexo编辑属于你个人的博客

配置_config.yml文件

我们在终端回到2中的blog的路径，用编辑器打开config.yml文件，进行修改，如下图所示。

在deploy 内分别加入并编辑type、repo、branch三个关键字。注意，冒号后要空一格。
完成如下修改

1
2
3
type: git
repo: # 这里对应你的xxx.github.io这一repository对应的SSH地址，可以在github该repository中找到
branch: master

修改结束之后保存。

同步hexo到github与网站

在终端（此时你的位置应该为blog）运行

1
$ hexo s

复制并打开临时网页查看无误后，输入ctrl+c退出
接下来运行

1
$ hexo d

运行成功的如下

Bug2: hexo d运行成功，但是网站没有改变

问题原因：github的repository内出现了新的branch，名为master，但是并非default branch name

查询后发现，github因为歧视等缘故，将新的repository的default branch name更改为main，而不是原来的master。这一点使得我更改_config.yml文件时没有注意。

解决方案：将你的repository的default branch name改为master（留着一个branch就好），然后重新运行

1
$ hexo d

应该就没有问题了。

问题解决后，我们应该能够在github上看到，并且在浏览器输入你的网站网址（xxx.github.io），应该是能够看到已经生成的界面。到这一步，最初的配置就完成了。