Hexo+GitHub搭建免费个人博客

1、注册Github账号

打开github的官网:https://github.com
点击右上角【SignUp】按钮开始注册
已有github账号可以直接跳过这一步
英语不好的朋友，可以在浏览器右键，选择【翻译成简体中文】

2、创建仓库

点击github右上角的加号，选择New repository,或者点击左侧Create a repository进行创建
Repository name需要与你的用户名相同
例如我的用户名:homraL
那么这里我要写:homraL.github.io

3、开启GitHub Pages

在打开的仓库页面，点击右上方的Settings按钮，在新打开的页面，向下找到GitHub Pages的部分
可以通过Choose a theme更改主题
可以通过上方绿色框内的地址进行访问
例如我的地址就是: https://homral.github.io
如果有域名可以填入Custom domain
后面会单独讲如何与域名进行绑定，此处不做过多讨论

下图为选择主题页面

下图为访问我的博客页面: https://homral.github.io

4、搭建Hexo准备工作

搭建Hexo需要我们准备如下软件
Node.js: https://nodejs.org/en/download
Git: https://git-scm.com/download
GitHub: https://desktop.github.com

现在我们从官网下载到上述三款软件
首先配置node.js

将node-v10.15.3-win-x64.zip解压到要安装的位置并新建两个目录
node-global:npm 全局安装位置
node-cache:npm 缓存路径

接下来配置node相关的环境变量
在Path中添加如下两条
E:\Learn\Java\Software\Node
E:\Learn\Java\Software\Node\node-global
第一条是你的Node解压后的根路径方便我们在任意目录下使用node命令
第二条是我们刚新建的全局安装位置

接下来可以通过命令行
输入下方两条命令进行检验是否配置成功
node -v
npm -v
如下显示即代表成功了

接下来将node-global和node-cache与npm配置到一起
分别运行如下两条命令路径需要替换为你自己的路径
npm config set prefix “E:\Learn\Java\Software\Node\node-global”
npm config set cache “E:\Learn\Java\Software\Node\node-cache”
执行成功后在运行如下两条命令
npm install webpack -g
npm install -g npm
见到如下说明成功了
需要注意的是这里的WARN不需要在意因为部分功能是给MAC系统使用的
忽略即可只要不是ERROR就可以啦
到这里Node.js的准备告一段落

接下来安装一下Git
这里我们也是根据系统的位数与需要的版本进行安装
同时也会提供ZIP免安装版与EXE安装版
与Node不同 Git我选择了安装版
较免安装版配置上个人觉得更方便一点
安装过程全程一直保持默认下一步即可
安装成功后我们在任意文件夹内空白处点击鼠标右键
如出现下面菜单就说明安装成功了

接下来双击GitHubDesktopSetup.exe
不需要你选择任何东西甚至你都不知道安装到哪里去了
然后它就安装完毕并自动打开了
登录你的github账号
将对应你用户名的仓库克隆到本地的一个目录

等待一下在对应的目录下我们就能看到啦
到这里Hexo的准备工作已经完成
下次我们可以点击桌面上紫色的图标GitHub Desktop来启动它

5、搭建Hexo开始

我们可以先创建一个Hexo文件夹(名字随意下文中myblog同样）
进入到文件夹后右键选择Git Bash Here
依次输入下方四条命令
npm install -g hexo-cli
hexo init myblog
cd myblog
npm install

生成静态文件：hexo g
启动服务器：hexo s
注意：这里会有一个弹框记得允许访问
上述两条命令后我们就可以访问啦

默认情况下访问网址为：http://localhost:4000

6、如何创建一篇新文章

首先我们使用CTRL + C可以关掉服务
新建文章：hexo new “文章名”
之后会在Hexo\myblog\source_posts下创建一个md文件
我们可以复制该文件修改标题或者文件名
然后重新使用
hexo g
hexo s
刷新http://localhost:4000就能看到了

7、更换Hexo的主题

打开Hexo官方主题页：https://hexo.io/themes
挑选自己喜欢的主题
这里楼主选择的是MiccallTheme

首先进入theme文件夹下右键选择Git Bash Here
或者通过cd命令进入该文件夹
然后将打开的主题github路径复制下来请自行替换下方路径
git clone https://github.com/miccall/hexo-theme-Mic_Theme
之后我们就可以在themes下看到下载好的主题文件
可以将名字改的短一点方便使用

然后打开Hexo的配置文件
翻到最后找到theme属性
将默认主题修改为你刚刚下载的文件夹名称
这里我改成了Miccall

之后保存再次执行
hexo g
hexo s
就可以看到新的主题了
没有效果的可以先清理下在启动
hexo clean

8、生成SSH密钥添加到GitHub

只有配置好SSH密钥后我们才可以通过git操作实现本地代码库与Github代码库同步
在myblog文件夹下输入命令
yourname输入你的GitHub用户名
youremail输入你GitHub的邮箱
之后一直回车即可
可在用户名文件夹下生成key
C:\Users\用户名.ssh

1
2
3

git config --global user.name "yourname"
git config --global user.email "youremail"
ssh-keygen -t rsa -C "youremail"

id_rsa是你这台电脑的私人秘钥不能给别人看的
id_rsa.pub是公共秘钥可以随便给别人看
我们要把公钥放在GitHub上这样当你链接GitHub自己的账户时
它就会根据公钥匹配你的私钥当能够相互匹配时
才能够顺利的通过git上传你的文件到GitHub上
我们打开github官网
找到右上角头像下的settings
选择SSH and GPG keys
点击New SSH key创建新的SSHkey

在新弹出的页面中
随便输如一个title名字
将id_rsa.pub文件中的内容全选复制到下方框内
点击add ssh key
之后会让你输入一次github的密码进行确认

之后打开Hexo的配置文件
拉到最下面将内容修改为如下
homraL替换成你自己的github名字

deploy:
  type: git
  repository: git@github.com:homraL/homraL.github.io.git
  branch: master

仓库地址可以在你的github仓库主页找到
点击Clone or download
因为我们选用的是SSH方式所以选择use SSH
然后复制下方地址到repository后面即可
注意：每一个属性后面的空格不可删掉

在git中输入命令安装deploy-git
这样我们才能用命令部署到GitHub
npm install hexo-deployer-git –save
接下来我们重新部署一下即可
hexo clean 清除了你之前生成的东西也可以不加
hexo generate 生成静态文章可以用hexo g缩写
hexo deploy 部署文章可以用hexo d缩写

注意：deploy时可能要你输入username和password
这个时候我们再次访问https://homral.github.io
就可以看到更换成hexo了

9、绑定个人域名(非必须内容)

现在我们已经可以通过homral.github.io访问了
但是看起来不够”厉害”
所以我们可以买一个自己的域名绑定到上面
楼主是在阿里云买的域名 https://wanwang.aliyun.com

好了到这一步假装我们有了一个域名
就假装是楼主的那个吧
homra.cn
然后我们打开 https://dc.console.aliyun.com/next/#/domain/list/all-domain
找到域名右侧的解析按钮

点击添加纪录按照楼主的记录创建两条记录

然后我们打开github 找到最开始说的Custom domain
将申请好的域名填写到这里

然后打开博客的source目录
创建一个无后缀名的CNAME文件
里面输入你的域名

最后在你懂得
hexo clean
hexo g
hexo d

很久很久之后
如果不能访问不要着急
因为需要解析的
几分钟到几小时不等
最终你发现你的域名终于可以访问了
如果更换了新电脑该怎么继续写博客呢？
只需要备份Hexo下的这些文件即可
_config.yml
package.json
scaffolds目录
source目录
themes目录
之后覆盖到新电脑中的相同位置
最后执行上方三条命令重新生成发布即可

本文写于2019年4月11日上海
转载请注明出处

参考链接感谢
https://www.cnblogs.com/jackyroc/p/7681938.html
https://www.cnblogs.com/lxg0/p/9472851.html
https://blog.csdn.net/sinat_37781304/article/details/82729029