Github Pages + Hexo搭建博客填坑实记

Posted on | In | | 阅读数 次

背景

从实习结束，开始正儿八经看论文的时候，开始萌生了写博的想法。研一寒假在家不想看论文刷LeetCode的时候，学习了很多大神优秀的解法，却奈何下次遇到类似的方法还是困惑，便想找个地儿记录下来。
一开始选择了博客网站——类似博客园或者CSDN之类的，图形界面，操作简便，但存在广告，排版杂乱的问题。无疑之间发现了Markdown——写博利器，简洁明了，兼容Jupyter Notebook，同时显示代码和文字说明，非常适合数据分析工作。
这是我的博客成品：https://sunflowerjy.github.io/ 搭建此博客步骤很简单，顺利的话最快半小时就能搭建成功。然而标题是填坑实记，一看就是有故事的人😑故事听我娓娓道来~

环境

  • 系统：Win10 64位
  • Git: 2.17.0.windows.1
  • Node.js: 8.11.1
  • npm: 5.6.0
  • Hexo: 3.7.1

30分钟搭建最基础博客

写在最前面，提示：此步骤只适合环境与我一样，因为之前我也是参考别人分享的博文，然而由于各种软件的更新导致很多步骤都会报错，所以后期有可能由于软件更新而导致按照本文的方法安装配置出现错误。

安装Git

Git的下载地址(Windows版本)：https://git-scm.com/download/win 选择适合自己系统的版本。
除了以下两个步骤以外，都可以默认选择Next(下一步):

如何使用Git?

标注 1：仅使用 Git Bash 进行操作；
标注 2：在选择使用 Git Bash 进行操作的同时，也可以使用 Windows 命令行操作，建议选择此项；
标注 3：在选择使用 Git 的同时，也把 Unix 工具加入到了我们的配置之中，而且此操作会覆盖 Windows 的一些工具，强烈不建议选择此项。

关于回车换行的问题

Dos和Windows采用回车+换行CRLF表示下一行，而Unix/Linux采用换行符LF表示下一行。
第一个选项是默认检查Windows风格的文件，并在提交时转换为Unix风格。  
请选择第三项。如果默认选择第一项，在git中提交代码可能会报错。不过可以安装好之后再更改相关配置。若后续commit报错请参考搭建博客遇到的各种坑的详细介绍。

检验Git是否安装成功。

安装成功后，可以在桌面鼠标右键找到Git bash。

安装Node.js

Node.js下载地址：https://nodejs.org/en/download/ 选择自己对应系统的版本。一路默认Next安装。
新版本的Node.js中集成了npm工具，故不需要再另外安装。
检验Node.js和npm是否安装成功。

安装Hexo

1
npm install hexo-cli -g

检验Hexo是否安装成功。

本地搭建博客

在本地计算机新建一个文件夹存放博客代码：

1
hexo init sunflowerJY.github.io

我存放博客代码的文件夹名：sunflowerJY.github.io
生成静态文件：

1
hexo g # 或者hexo generate

在sunflowerJY.github.io文件夹下生成public文件夹存放静态文件。
启动本地Web服务：

1
hexo s # 或者hexo server

现在可以在本地查看自己搭建的博客啦😃http://localhost:4000

关联Github

注册Github账号

Github官网：https://github.com/ 注册过程跟大部分网站相似，尤其注意注册邮箱user.email和用户名user.name,后期部署博客要用到并且必须一字不差，这也是遇到的坑之一😂

创建Github仓库

创建Github仓库来远程保存备份本地的博客代码。

这里再强调下，仓库名必须命名为用户名.github.io，之前由于我没有严格遵守用户名这一点，导致部署到Github的博客css等文件无法识别😩折腾了好久还是别人帮我检查到的😂

由于我的博客仓库已经搭建过所以提示报错已存在该仓库，新创建的不会报错。

开启Github Pages功能

打开博客仓库的Setting页面。

拉至Github Pages选项，将Source选择master分支。

可能会提示仓库为空，要先添加文件，请将本地的博客push到该远程仓库。熟悉Git命令的请跳过，否则参考上传本地博客仓库至远程仓库

配置Git账号信息

设置git的全局账号信息，user.name为Github用户名，user.email为Github注册邮箱。

1
2
git config --global user.name "sunflowerJY"
git config --global user.email "sunflower_jy@icloud.com"

查看Git的所配置信息：

1
git config --list

配置SSH

查看本地的SSH Key，桌面右键进入Git bash：

1
ls -al ~/.ssh

若有id_rsa和id_rsa.pub两个文件，则复制id_rsa.pub中内容至Github设置中。
New SSH Key

将id_rsa.pub中的内容复制到Key中。

验证SSH是否配置成功：

1
ssh -T git@github.com

成功的话会显示以下的大致内容：

1
2
3
4
5
6
The authenticity of host 'github.com (192.30.252.128)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)? yes
Warning: Permanently added 'github.com,192.30.252.128' (RSA) to the list of known hosts.
Hi sunflowerJY! You've successfully authenticated, but GitHub does not provide shell access.
Connection to github.com closed.

上传本地博客仓库至远程仓库

在Git bash中cd到本地博客文件夹sunflowerJY.github.io：

1
2
3
git init
git add .
git commit -m "first commit blog"

修改配置文件部署部分

修改本地博客文件夹sunflowerJY.github.io中的_config.yml。

其中，repo填写自己的仓库地址，主要修改对应的用户名位置。

安装Deploy工具

1
npm install hexo-deployer-git --save

部署至Github

1
hexo d#或hexo deploy

至此已经成功搭建了自己的博客，快去查看自己的专属博客吧💕https://用户名.github.io

搭建博客遇到的各种坑

其实在上一节30分钟搭建最基础博客中基本都已经提及了，现在来总结下吧

关于回车换行的问题

上一节在安装Git中提到过，由于Windows和Linux的换行规则不一样，所以为了确保在将Windows平台上的文件commit至Github时能正常使用，Git给出了自动转换文件格式的服务，即下图中的第一个选项。若默认选择了这项Next,后序在使用Git的过程中可能会报crlf与lf文件转换的WARN。

解决方案：
如果你是Windows程序员，且正在开发仅运行在Windows上的项目，可以设置false取消此功能，把回车符记录在库中：

1
git config --global core.autocrlf false

Github仓库名

Github仓库名必须以用户名.github.io的形式命名，用户名那里要一字不差，不然后期的css等文件渲染会有问题，一开始我没注意到这个问题导致博客打开傻眼了，白花花的一片只有字😱💥😢

开启Github Pages功能

如果仓库内没有文件，页面上会提示无法开启Github Pages功能，可以参照上传本地博客仓库至远程仓库。随即仓库中有文件后，便可开启Github Pages功能。


搭建博客遇到的各种坑这块内容我会一直保持更新。随时记录，方便有需要的人，也方便自己备忘😂


关于博客的内容后续还会更新，例如打造个性化的博客,如有需要请关注教程标签。

无法使用hexo命令

不小心卸载node.js之后，无法写博客了，一慌😟赶紧重新下载node.js，重新下载了相同版本，连同默认下载了npm，安装hexo结束之后，竟然报错'hexo' 不是内部或外部命令  
原来是没有配置环境变量导致的，参考李学凯的思路完美解决😜