利用hexo+GitHub搭建属于自己的blog

写在前面

去年下半年的时候，我终于搭建好了自己的博客，当然，不总是一帆风顺。之前还有过因为换用tx云太难用气到删了博客。再次总结一下使用经验，警示后人。
注意：本文仅针对使用MacOS的用户！因为我不使用Windows系统所以不知道Windows上应该如何操作！虽然大致操作基本上是一样的但是也有一定的区别！！！

所需材料

硬件

• 一台装有MacOS的电脑

软件

• node.js
• git
• 终端（MacOS自带） 以下涉及的命令均需要在终端中完成
  首先请确保软硬件均已准备完毕，node.js及git是使用hexo博客框架的基础！软件的安装非常简单，动动鼠标就能完成，在此不做过多赘述。

安装hexo

在安装和使用hexo时，我们需要使用的npm，由于众所周知的原因，国内使用npm会很慢如果你是会魔法的小魔仙的话就当我没说，所以在这里，我们可以选择使用淘宝的镜像站。

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成后，再使用npm进行安装hexo

cnpm install -g hexo-cli

开始安装并构建博客

首先，我们要选择一个位置放置博客的文件夹，个人推荐直接在用户文件夹下发进行构建。
方法一：

hexo init <此处填写你希望的文件夹名>   #将hexo安装至某一文件夹
cd <此处文件夹名同上>    #移动到某一文件夹
npm install

方法二：

mkdir 此处填写你希望的文件夹名     #新建文件夹
cd 此处填写同上      #移动到文件夹
hexo init
npm install

等待安装完成即可。

配置并使用hexo

当我们安装好hexo之后，我们已经可以开始使用它了，通过

hexo s

我们可以在浏览器中打开http://localhost:4000/对我们的博客进行预览
但是这样我们的博客还是只能在本地进行查看，所以我们要下载推送到远端的插件

利用GitHub的服务部署blog

github提供免费的静态页面托管服务（当然腾讯云什么的也提供类似服务，个人觉得腾讯云的难用得反人类，当然也可能只是我使用的问题），如果你愿意使用他们提供的域名，那么本教程涉及内容将不fa一分钱！

GitHub设置

首先我们需要有一个GitHub的账号废话
登录后点击右上角的＋号
选择new repository

填好项目名就可以下一步了
创建好这个项目后，打开项目页面并点击Settings

本地设置

当我们准备好了GitHub的空仓库之后，需要想办法将本地内容推送到GitHub的仓库中
在博客的根目录下执行

cnpm install --save hexo-deployer-git    #安装插件

安装完成后，在博客根目录下找到_config.yml文件，这个就是博客的配置文件。
使用文件编辑器打开配置文件或在终端使用vim（我使用的文件编辑器是brackets）
在配置文件中添加以下内容

deploy:
  type: git
  repo: 此处换成你的GitHub仓库的网址或者空仓库给出的https推送使用的网址
  branch: master

配置完成后保存文件，当我们第一次推送时，会在终端中要求登录，使用GitHub账户登录即可。

hexo d    #将博客推送至远端

使用Markdown写文章

hexo是支持Markdown的，我们使用Markdown进行写作。
在博客根目录下

hexo n 此处填写文件名    #新建一篇模板，文件名请使用英文！

hexo会自动生成一个模板文件在source/_posts/目录下，使用文件编辑器打开就可以编写文章了
当然你也可以直接在source/_posts/目录下新建md文件

Markdown语法知识

此处列举一些常用语法，完整语法请参考Markdown官方文档
注意：md涉及的语法中，必须使用英文符号！否则无效！！！例如中文的“（”和英文的“(”是不一样的！*
标题

"#"为标题，只需要在标题那一行的前面加#即可，注意#后要空一格！
标题共分6级
# 一级标题
## 二级标题
### 三级标题
·····
以此类推

强调或突出

强调或突出
可简单理解为加粗和斜体字
在需要强调或突出的文字两侧加上*即可
例如：
*这是一个突出*
**这是一个强调**

插入图片或文字内联链接

为文字内联链接使用[]()
中括号中填写文字内容，小括号中填写链接地址

插入图片使用![]()
方法跟文字一样，但是图片的注释（即中括号中的内容）有些主题不会显示

列表

列表
有序列表
    使用1.    2.  这样的形式
    例如：
    1. MacBook
    2. iPhone
无序列表
    使用*
    例如：
    * 吃饭
    * 睡觉

代码块

使用“`”
例如：
    `这里的单行代码块`
多行代码块在头和尾留两行各打三个“`”

水平分割线

三个或更多星号
例如：
    *******

换行

直接在行尾打两个空格

删除线

在文字两侧各加上两个~~
例如：
    ~~中间这些字会被加上删除线~~

hexo中文章md文件的格式

格式如下

---
title: 此处为文章标题
date: 2019-10-1 8:43:45  #写作时间
tags:  
---

在---中间的部分为文章的一些数据，有些主题中还可以添加如文件转载规则等的信息，总之，你的文章内容需在---下方写作！

hexo主题设置

我相信大家一定不会选用官方默认给的主题，这时候我们可以选择别的主题。
在hexo官网上有有些很不错的主题可供选择，有需要可以到这里查看
我使用过一个叫matery的主题，功能齐全，还可以自行套cdn，对国内的访问非常友好，还挺好看的。项目地址
目前使用的是一个很简洁的主题，叫Ayer
每一个主题基本上都会有教怎么配置，这里就不多说了。

hexo常用命令

新建md文件

hexo n 此处填写文件名，建议英文

本地调试和查看博客

hexo clean
hexo s
# 以上两个命令执行后就可以在localhost:4000看到我们的博客
# 退出使用control+c

推送到远端

hexo d

自定义域名

域名当然是能自定义的
首先我们需要在域名服务商的管理界面，添加一个A记录将服务器根域名指向GitHub的ip
GitHub服务器ip可以在终端里通过ping获得

ping github.io

然后添加一个CNAME记录将一个子域名指向你的项目地址（也可以直接将根域名指向项目地址）
记录的更新需要一点时间，请耐心等待！
访问GitHub上的项目地址，点setting
找到GitHub pages在文本框中输入自己的域名保存即可，也可以勾选下面的选项启用https。

使用心得

提高博客访问速度

一个博客的访问快速是非常重要的，总不能一个页面加载十几秒让人看吧？
由于众所周知的原因，GitHub的服务国内访问也很慢，所以得搞点骚操作。怕折腾请选用反人类的tx云

能用cdn就要用上cdn

cdn是很有用的，对加速访问有奇效，有些主题可以自行设置添加cdn，如我前面说到的matery
这里提供一个国内免费的cdn服务，配合主题使用。请自行在主题的配置文件下修改cdn配置
有人会问：那万一主题并不支持添加cdn呢？
这个问题问的好，这时我们就需要请出大佬cloudflare
注意：以下操作必须要求有自己的域名！且域名由cloudflare托管！
打开域名管理页面

点击dns
将需要套dns的网址记录的proxy选项调整至proxied（这么操作也可以为网站的tls协议直接升级到1.3）

完成后前往speed页面，点击Optimization将设置调整为如下,别的设置不用动

设置完后，在国内访问也能提高不少，可以说效果拔群。
不过有个小问题，由于采用了缓存技术，所以当我们将写好的文章推送到远端后访问博客可能无法第一时间看到更新，需要在cloudflare管理页面上的overview页面打开一下Development Mode选项（平时的话请把它关上）

图片能用图床就一定要用图床

推荐图床聚合图床
附上我的邀请链接https://www.superbed.cn/signup?from_id=8198

一定要备份！！！！！

备份是很重要的，防止因为莫名其妙的问题导致文件丢失全都得从头再来。推荐用GitHub备份，关于GitHub的使用，下次有时间会专门写一篇文章介绍。

总结

博客这个东西国内除了程序员和一些网上冲浪的GG和MM可能知道以外现在知道有这个东西的人已经越来越少了，可以说是相当小众。由于很多的原因，我不喜欢微博之类的地方，国内的网络和现实环境都让我一言难尽。所以惹不起我还是躲得起的。博客就像互联网大海中的一座座孤立的小岛，时不时有人会来看看，时间长了，可能一些志同道合的人就会聚在一起。圈子不用大，关键是自己呆着很舒服。