博客的搭建

前言

利用的技术是hexo自动生成静态的页面,然后托管到Github Pages上面,相当于GitHub白给我了一个服务器让我存放我的静态页面,而hexo则是能够让我专心使用Markdown写作,页面的生成就交给它了。

具体步骤

没有什么比官方的文档更靠谱了 -> https://hexo.io/zh-cn/index.html

首先是hexo是基于Node.js的,所以需要先去安装Node,Mac的很简单,只需要brew install node 一句话就装好了,windows可以直接下载.msi文件然后下一步下一步完成安装。最后可以通过npm -vnode -v 查看是不是安装成功。

OK安装Node.js之后就可以安装hexo了,也是一句话就行了,npm install hexo-cli -g 这样子hexo就已经安装好了,接下来按照官方文档就可以了。

把自己的命令也敲下来,仅供参考。接下来的内容是基于已经有Github Pages了

首先创建一个自己的blog的文件夹,然后进入到这个空的文件夹内,一句话初始化hexo init 过一会就好了。

我这里遇到的一个问题是由于hexo默认应该是通过https从GitHub上面克隆库下来,然而我当时是配置过代理的,所以会报错,于是我就简单把小飞机关掉就好了。

之后如果成功初始化了的话,目录结构就像这样:

.

├── _config.yml 你的配置文件
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── scaffolds
├── source 存放你的.md文件
└── themes 存放你的主题文件(一般都是网上下)

然后可以使用hexo g 直接生成静态页面,然后hexo s 开启服务器,到浏览器输入localhost:4000 就能看到你的博客了。

最后肯定是把你的博客上传到github pages 了。直接编辑_config.yml这个文件,在最后加入

1
2
3
4
deploy:
type: git
repo: 你的项目地址.git
branch: master

这里我还吃过亏,每个冒号后面请务必加一个空格!!!否则是不会成功的。

直接hexo d 就可以一键部署过去了。我这边是因为已经配置了公私钥,所以没有要我输入GitHub的账号密码什么的。然后我这里遇到的问题是hexo说我没有git….但是我肯定是有的,后来查阅资料发现还是需要安装相关插件,也是一句话的事情npm install hexo-deployer-git --save 然后就没有问题了。

至此基本的博客就完成了,以后写博客可以这么操作:

  1. 进入到目录/source/_posts/ ,创建你的Markdown文件安心写作。
  2. hexo g 生成静态页面
  3. hexo s 本地查看你的博客
  4. hexo d 直接上传到GitHub

就是这么简单,还是很舒服的。

替换主题

hexo的更换主题很方便,直接把你要的主题下到themes文件中,然后在_config.yml中修改theme即可。(还是空格问题记得注意)

我选择的是Next主题下面的Pisces的小主题,用起来还是很舒服的,直接用Git进行主题的下载与同步,然后稍微修改下就可以了。提供一下next主题的文档:https://theme-next.iissnan.com/getting-started.html 照着它来大体上是没什么问题的。

这里很坑的一点是,我在修改语言的时候,上面这个官方文档里说简体中文是zh-Hans 但是实测其实是zh-CN ,可以通过themes\next\languages 里面对应的.yml文件名来查看。

自定义域名

其实我感觉没什么必要,chenlangping.github.io 用起来感觉也挺好的,但是鉴于手头上有一个域名chenlangping.cn,然后开始折腾。但是我在配置的时候发现一个问题,还是记录一下。

首先我购买的域名是chenlangping.cn,然后GitHub上面的博客的域名是chenlangping.github.io

给懒人看的 购买了域名之后,只需要一条记录: www CNAME username.github.io. 这样就可以了,其他什么花里胡哨的都不需要,记得等10分钟-1小时再确认有没有生效

按照网上的教程,首先去GitHub的仓库,有两种操作方法,任选其一即可:

  1. 在根目录下创建一个CNAME的文件,然后把购买到的域名写进去即可。
  2. 进入settings下面Custom domain,填入你购买的域名,然后确认即可,GitHub会自动帮你生成CNAME文件。

这么做的目的,是为了一旦有人访问xxx.github.io,就能够跳转到填入Custom domain的域名中。(此句存疑)

然后去你的DNS解析商,填入以下的三条记录即可。

1
2
3
@          A             192.30.252.153
@ A 192.30.252.154
www CNAME username.github.io. #注意最后这个“点”

然后坐等一会儿就好了。然而我实际情况是,当我访问chenlangping.cn的时候,会跳出GitHub的404页面,且如果我访问的是chenlangping.github.io,会跳转到chenlangping.cn这个页面,然后跳出404。

在解决这个问题前,首先了解下有两种记录类型,一种是A,还有一种是CNAME,A的意思就是把你的域名解析成ip地址,而CNAME的意思是把你的域名解析成另外一个域名。我一开始用的是A,然后网上说直接Ping一下 chenlangping.github.io这个域名就能得到你博客的ip地址,确实得到了,然后我复制了这个ip地址,直接粘贴到浏览器一访问,是404不存在。这里应该是存在什么技术能够实现这个,但是我不知道。

接下来是我自己摸索的方法。抛开刚刚那个技术问题,由于直接访问ip访问不了博客,然就通过CNAME解析来访问呗,我一开始是这么想的,所以仅仅在DNS的服务商(阿里云、腾讯云等)配置了一条记录,主机记录是@,然后类型是CNAME,记录的值当然是我的 chenlangping.github.io啦。这样我以为就好了,因为现在一旦访问我购买的域名chenlangping.cn,那么根据配置的CNAME,会跳转到chenlangping.github.io,接下来就跟直接访问chenlangping.github.io一样了。也就是说,我现在在腾讯云记录上只有一条记录,也就是

1
@      CNAME           chenlangping.github.io.

然后GitHub这边的仓库设置保持不变。这样就能通过chenlangping.cn来访问我的博客了。之后又去加了一条,把@改成www,这样不论是www.chenlangping.cn还是chenlangping.cn都能直接访问我的博客了。成功了。

存在的问题

根据上文所述,CNAME是把域名解析到另外一个域名,那么我最后仅仅在域名解析商中添加了一条记录,同时也在GitHub仓库中添加了一条记录,也就是通过域名解析商,我能够让chenlangping.cn访问chenlangping.github.io,但是通过github,我又能够通过chenlangping.github.io访问chenlangping.cn,这样是不是就造成了死循环呢?我去问了同学,同学说的是,GitHub仓库中的CNAME是用来指定,哪个域名可以解析到GitHub仓库,而不是我之前理解的那样。OK这样确实能够有效避免死循环,但是之前我遇到的问题就解释不通了,如果按照我同学的理解,那么我当时访问chenlangping.github.io是不会跳转到chenlangping.cn的,但是事实上就是跳转了,所以很迷。

解答:GitHub上面的CNAME就是一般CNAME的意思,并不是所谓的什么接受域名。其实是之前”死循环”的理解是正确的,那么为什么不会构成死循环呢?因为一开始chenlangping.github.io它指向的是正确的ip地址,然后我在DNS服务商加了一条CNAME,相当于复制了正确的A记录,之后GitHub pages又复制了正确的记录,这样自然不会有什么问题。当然如果一开始就是错的,那么复制来复制去的自然也是错误的,解决办法也很简单,只需要在GitHub仓库里的settings暂时把CNAME去掉,过一会它就会恢复成正确的,然后再把它改回去就好了。当然如果你用的是网上的教程,就不用担心这种问题,因为根本就不会有循环,而且ip地址是写死的,但是网上的方法似乎是不能https的。

其他的小问题

  • 如何设置文章的各种属性?

    • 通过设置Front-matter,以下选项中的所有内容均为非必填的,根据需要自行选择。

    • 配置选项 默认值 描述
      title Markdown 的文件标题 文章标题,强烈建议填写此选项
      date 文件创建时的日期时间 发布时间,强烈建议填写此选项
      author _config.yml中的 author 文章作者
      img featureImages中的某个值 文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
      top true 推荐文章(文章是否置顶),如果 top 值为 true,则会作为首页推荐文章
      password 文章阅读密码,如果要对文章设置阅读验证密码的话,就可以设置 password 的值,该值必须是用 SHA256 加密后的密码,防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
      toc true 是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
      mathjax false 是否开启数学公式支持 ,本文章是否开启 mathjax,且需要在主题的 _config.yml 文件中也需要开启才行
      summary 文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
      categories 文章分类,本主题的分类表示宏观上大的分类,只建议一篇文章一个分类
      tags 文章标签,一篇文章可以多个标签
  • hexo和typora图片位置冲突了

    • 因为我设置了hexo创建新文章的时候会自动创建一个与文章同名的文件夹,为了存放图片,方便管理,比如我需要在我的文章引入一张图片,我只需要把图片放入文件夹中,然后![](图片的名字.jpg) 即可引用,但是typora就不会显示,要解决这个也挺简单的,在文章的一开始加入typora-root-url: 图片文件夹的名字 就可以了,这样不论是hexo和typora都能正确显示图片了。

###