陈浪平的博客
0%

博客的搭建

发表于 更新于 分类于 Disqus：
本文字数： 5.9k 阅读时长 ≈ 5 分钟

前言

首先我们都知道，JavaScript是一门语言，一门和Java完全没有关系的语言。JavaScript被广泛应用于前端。

Node.js则是一个JavaScript环境，能够让JavaScript不再依赖于浏览器，是一个V8的引擎，类比于Java中的JRE。

npm则是Node.js的一个包管理系统，用它可以下载各种各种的工具。Java中没有类似的包管理，但是有Maven。

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

所以hexo就类似于Java中的spring框架，如果需要用它，那么我们必然要安装对应的环境Node.js（即JRE）和对应的包管理程序npm（Maven）

具体步骤

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

首先是hexo是基于Node.js的，所以需要先去安装Node.js。

Mac的很简单，只需要brew install node 一句话就装好了，windows可以直接下载对应的.msi文件然后下一步下一步完成安装。npm同理。

最后可以通过npm -v 和 node -v 查看是不是安装成功。

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

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

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

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

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

1
2
3
4
5
6
7
8
9
10
.  
├── _config.yml  			// 你的配置文件
├── db.json					// 比较庞大的数据，大致扫了一眼跟博客内容有关
├── node_modules 			// npm的依赖，不建议通过git同步
├── package-lock.json		// 应用程序插件的下载信息
├── package.json  			// 应用程序的信息，基本就是一些插件的信息
├── public					// 编译生成的页面，同理也不建议同步
├── scaffolds  				// 模板文件，一般修改里面的post.md 
├── 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文件安心写作。或者是直接到blog的目录下面用hexo new "博文题目"来自动创建
  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的。

备份推荐

一开始我是把整个blog文件都用Dropbox进行同步的，没出过什么问题，缺点就是每次用hexo g的时候都会生成全新的静态页面，一开始的时候还好，但是随着博文越来越多，会生成越来越多的静态文件，而这些静态文件会在dropbox间进行同步，比较消耗资源。比较推荐另外两套解决方案：

  1. 自己使用github进行同步，推荐使用以下的gitignore文件：
1
2
3
4
5
6
7
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/
  1. 使用对应的hexo-git-backup插件，有它来进行备份。
  2. 以上1和2都用，确保博客的安全。

其他的小问题

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

    • 通过设置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都能正确显示图片了。

CI/CD

过了一段时间发现我的域名直接访问又访问不了了，应该是墙又高了。而且平时老翻的话，其实访问起来也是很不爽的，所以希望能够hexo d的时候，顺手也把自己的博客放到国内的云服务上面，这个时候就需要对应的CI/CD来进行帮助了。

  1. 在云服务器上创建一个用户，就简单叫git好了：adduser git。
  2. 到这个用户的家目录下，建立一个bare的仓库：cd /home/git && git init --bare hexo.git
  3. 修改对应的仓库的权限：chown -R git:git hexo.git
  4. 复制公钥到authorized_keys文件中。此时可以使用ssh -T git@公网ip 测试一下有没有问题。这里我遇到了一个问题，就是之后部署是通过git的ssh方式的，而ssh的话需要保证.ssh的权限是当前用户的，而我当时用的root的权限创建的，所以一直ssh连接不上去。
  5. 创建一个脚本，touch /home/git/hexo.git/hooks/post-receive，并且该对应的脚本权限设置成可以执行。 在脚本中加入如下语句：
1
2
#!/bin/sh
git --work-tree=/var/www/html/chenlangping.github.io --git-dir=/home/git/hexo.git checkout -f
  1. 在hexo的配置文件的部署部分，加入aliyun: git@公网ip:/home/git/hexo.git,master即可。