搭建个人博客小记

X1
253 阅读4分钟

一个月前心血来潮想跟着网上搭一个自己的博客，过程中遇到一些头疼的问题，隧搁置。现在没有太多乱七八糟的事了，想静下心来学点东西并记录下来，想来想去还是想要个自己的博客，于是开始研究hexo框架，争取一两周搭建一个比较满意的博客～先在掘金上小记一下吧～

1. hexo的安装

有点强迫症，既然决定要学，就从头开始。之前跟着教程一步一步来，只求结果，并不理解过程为什么这样做。

首先安装hexo-cli（前提：已安装node.js和git)

$ npm install -g hexo-cli
// 其中cli的意思是命令行接口（command Line Interface）
// 可以在安装Hexo的同时安装一些Hexo的命令，从而操控Hexo

初始化网站对应的文件夹

$ hexo init blog
// blog 为网站对应的文件夹的名字
// 这一步生成的文件夹中的文件是从gitHub中的hexo-starter仓库中拉下来的，可见下方对比
// 左边为gitHub中的hexo-starter仓库，右边为生成文件夹的内部文件

image.png450507b48cd9992d20ec994e29255ca6.png

此时即使报错也没关系，进入blog文件夹重新安装一下依赖即可（虽然这次没报错，但是一个月前有报错，忘记怎么处理的了...）

$ cd blog
$ npm install
// npm install 会根据项目中package.json的依赖表安装所有依赖包
// 并存在node_modules文件夹里

$ hexo generate
// 可简写为
$ hexo g
// 该命令用于生成网站页面

$ hexo server
// 可简写为
$ hexo s
// 该命令用于启动服务器

此时可以在localhost:4000中正常访问初始化的hexo搭建的博客页面

2. 添加文章

初步搭建好博客后，肯定想试试往博客里面写一个hello world吧

首先我们先用以下指令创建一个md文件

$hexo new "title"
// title可替换为相对应的文章名

可以手动创建md文件吗？ 答案是可以，但是用指令创建的md文件会直接放到相应文件夹中并做好初始化工作，比自己新建md文件要方便。

现在我们再次打开localhost:4000就可以看到我们新添加的文章啦！

3. Front Matter

什么是Front Matter？ 整体研究下来感觉像是一个文章的配置，基础的配置像标题/时间在我们执行创建md文件的指令时就已经进行了初始化，同时还给了一个tag，暂时还不知道是什么意思，应该跟某种插件有关。这部分内容即学即用即可，不必提前了解太多。

4. 配置文件

即_config.yml这个文件。为什么要单独拿出来说呢，因为整个博客文件夹中一共有两个同名的文件，一个就在根目录下，是网页的配置文件；另一个在根目录下的theme文件夹里，是主题的配置文件。在之前搭建博客的过程中因为两个配置文件搞错踩过一些坑。

配置文件是遵循yaml语法的。之前谈到的Front Matter也一样是yaml语法。

这一部分内容挺多的，官方文档很详细，可以直接查看。只需要注意，官方文档里所说的配置文件指的是根目录下的网页配置文件。

5. 用git部署

也支持其他方式部署，可以查看官方文档。这里以github为例。

新建仓库

  1. 根据官方文档，需要创建一个命名符合要求的代码仓库

image.png 2. 在Git Bash中设置用户名和邮箱

git config --global user.name "yourName"
git config --global user.email "yourEmail"
// yourName 和 yourEmail 分别替换成自己的github用户名和邮箱
//可以使用以下命令查看设置的name和email是否正确
git config user.name
git config user.email
  1. 生成SSH密钥
ssh-keygen -t rsa -C "yourEmail"
// yourEmail替换为自己的邮箱
// 接下来一直按回车就可以，第一步提示的位置就是下一步寻找id_rsa.pub的位置
  1. github设置SSH密钥 点击右上方头像，选择setting

image.png

左侧选择

image.png

选择new SSH key

image.png

将上一步生成的id_rsa.pub中的内容全部复制到key输入框中，title可任意。

image.png

  1. 在Git Bash中输入以下命令查看是否可以成功访问。出现hi则成功。
ssh -T git@github.com

与本地文件夹关联

  1. 安装hexo-deployer-git
$ npm install hexo-deployer-git --save
  1. 在根目录下的配置文件_config.yml中最后deploy部分添加type（部署类型，如git）和repo（仓库地址）

image.png

需要注意：要选择SSH的地址

image.png

设置自定义域名

github提供给我们的域名是固定的 "username".github.io。如果想替换成自己购买的域名，需要在域名解析中添加CNAME，指向github提供的域名。同时需要在github中设置域名（见下图2）。

image.png

image.png

这一部分我还有很多疑惑的地方没有研究透，目前的这个设置方法是可以通过github的DNS检测，并且能够正常访问的，于是就先保持现状吧。

疑惑的点在于，我在谷歌浏览器上输入www.x1tt.com会自动重定向到x1tt.com（已经查过域名解析中并没有这个重定向）。非常疑惑，如果有大佬可以解答感激不尽！！

题外话

一个域名可以通过添加子域名的方式，指向不同的网站

github page 中的CNAME 与 DNS CNAME记录是不一样的

github page 中的CNAME设置的是自定义域名，存在重定向的关系，访问yourname.github.io会被重定向到自定义域名，重新发送请求。

在域名解析过程中，可以使用不同类型的DNS记录，又称解析记录，就是我们在阿里云或者其他域名购买网站上面添加的，根据解析记录类型的不同可以实现很多不同的功能： A:将域名指向一个IPV4地址 CNAME:将域名指向另一个域名（不存在重定向，仅仅是传递另一个域名解析出来的地址） 显性URL:将域名重定向到另外一个地址（这个才会进行重定向，会发送两个请求，原域名发送的请求返回结果为301/302，但是阿里云要求重定向的另外一个地址必须备案）

其实github page 相当于是将原本的域名A指向一个IPV4地址，变为将自定义域名B指向该IPV4地址，然后使用类似于显性URL的一种东西将原本的域名A重定向到自定义域名B。（将自定义域名B指向该IPV4地址应该是我们自己手动做的，因为使用自定义域名需要两步，第一步是在域名的解析记录中添加一条将域名指向yourname.github.io的IPV4地址的记录，其实这一步就是实现了将自定义域名B指向该IPV4地址，第二步是在github相应的仓库中添加自定义域名，其实github page 就是做了这一步，将原本的域名A的解析记录类型从‘A’变成了‘显性URL’

下一篇写一下使用主题和插件～

avatar
文章
阅读
粉丝