2022-01-25发表2022-06-11更新博客18 分钟读完 (大约2640个字)

GitHub+Hexo搭建个人博客

什么是Hexo

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

域名

域名作为网站的入口，有着至关重要的作用，比如GitHub的域名为：github.com，域名由一级域名和二级域名组成，github是二级域名，而com就是一级域名，常见的还有cn，org，net等。由于这里使用GitHub托管我们的网站，所以不需要备案，省去了很多时间。

域名提供商很多，比如阿里云的万网，这里采用 NameSilo 提供的域名加上 CloudFlare 托管的方式，在NameSile购买大多数域名第一年都会有折扣，还附赠whois保护，而CloudFlare提供DNS解析服务的同时还能提供CDN加速，国内电信和移动的访问延迟都相当低，而且是免费的。

创建GitHub仓库

登录GitHub，点击 New 新建仓库，仓库名的命名格式为 {用户名}.github.io ，用户名为GitHub的账户名，比如我的账户名为 noitalihinna ，则新建的仓库名就设成 noitalihinna.github.io。

这里要注意下仓库要设置成public级别。

搭建本地环境

Git

什么是Git？Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。而在本项目中，我们需要将我们的本地代码同步到GitHub上就需要用到Git。先从Git官网下载对应版本的安装包，下载安装完成之后，打开命令行输入如下命令。

查看Git版本，如果能返回则安装成功

1 2	C:\Users\noita>git --version git version 2.35.1.windows.2

鼠标右键点击Git Bush Here打开Git命令行，配置Git的邮箱和用户名

1 2	git config --global user.name "用户名" git config --global user.email "邮箱"

然后生成rsa密钥，这边采用命令行工具生成，也可以用其他工具

1	ssh-keygen -t rsa -C "邮箱"

此处的密钥是用来向GitHub提交代码用的，所以密码可以不填，后面的选项直接默认即可

然后在文件夹中找到生成的公钥

然后到GitHub，打开SSH and GPG keys，点击New SSH key，来创建一个新的SSH密钥

Title这边任意填写一个即可，Key这边通过记事本打开刚才的id_ras.pub文件，把里面的内容复制进去即可，然后点击Add SSH key。

然后回到Git Bush，输入命令

1	ssh [email protected]

显示如下内容则说明成功

Node.js

Node.js下载地址：Node 找到对应的安装包下载，安装完成后检测Node是否安装成功

node -v

如果显示版本号则表示成功

Node的安装包还会安装npm，检测npm是否安装成功

npm -v

如果显示版本号则表示成功

Hexo

使用 npm 安装 Hexo

1	npm install -g hexo-cli

在工作空间目录下打开命令行并执行命令，初始化

1	hexo init blog

然后进入刚才创建好的文件夹内，尝试构建一个新的页面，并且启动本地调试

cd blog
hexo new test_my_site
hexo g
hexo s

出现如下字样则表示启动成功

然后打开浏览器，输入地址：http://localhost:4000，就可以看到一个简单的博客首页了~

刚才的那些命令就是完成三个创建博客的基本操作：新建一篇文章、生成网页和本地预览。

更多的Hexo命令可详见官方文档：Hexo指令

推送网站

上面我们完成了博客网站的本地预览，接下来我们要做的就是推送网站，把我们的博客放到公网上，可以被其他公网用户访问。

接下载我们要在更目录下的_config.yml文件内更改发布配置

找到deploy配置项，更改发布配置，类型改为git，仓库填写刚才新建的仓库地址，分支填写仓库的主分支，xxx改为你自己的GitHub账户名。

deploy:
  type: git
  repo: [email protected]:xxx/xxx.github.io.git
  branch: main

上面我们完成了站点发布的配置，现在我们需要安装Git部署插件

1	npm install hexo-deployer-git --save

然后输入如下命令

1 2	hexo clean hexo g -d

然后我们在浏览器输入我们的仓库地址：xxx.github.io

这样你就会发现你的博客已经上线了，现在已经可以被公网其他用户访问了~

绑定域名

由于我们使用GitHub托管我们的博客网站，所以无法改变我们的域名，但是如果想要使用我们自己的个性化域名，就需要绑定我们自己的域名。这里我们使用CloudFlare作为DNS服务器，添加一条CNAME记录，把我们自己的域名解析到GitHub的域名。

首先，进入CloudFlare的控制台，进入DNS配置，添加两条CNAME记录

然后进入SSL证书设置，开启始终使用HTTPS

这样我们就已经把我们自己的域名通过CNAME解析到GitHub托管的地址上了。

然后，登录GitHub，进入之前我们创建的仓库，点击Settings进入设置，来到Pages选项卡，在Custom domain处输入我们的域名，然后点击保存

最后，我们进到我们的博客源码文件夹，进入blog/source目录下，创建一个文件，输入你的域名，然后重命名为CNAME

然后通过hexo重新构建并且部署我们的页面，这样我们就可以通过我们的域名访问博客了。

更换主题

如果你觉得Hexo的默认主题非常的单调，那么恭喜你，Hexo有相当多的第三方主题供你使用，具体可以去 Themes 查看，在上面你可以看到主题的实例，源码以及加载方式等等，这里我们使用Icarus作为我们的博客主题。

首先使用NPM将Icarus安装为Node包

1	npm install -S hexo-theme-icarus

或使用hexo命令修改主题为Icarus

1	hexo config theme icarus

然后启用本地调试查看效果

hexo s

不过在我们用NPM的方式改变了主题之后，本地调试出现了问题

这里我们需要安装hexo-renderer-inferno模块，具体原因可以看Issues

1	npm install -S hexo-renderer-inferno

然后重启启用本地调试，然后发现页面加载正常了

发布文章

现在我们就可以开始发布我们的博客文章了

在命令行中输入如下内容

1	hexo n "blog-name"

然后我们会发现blog/source/_post文件夹下多了一个blog-name.md文件，然后我们用Markdown编辑器打开，这样我们就可以开始编写我们的博客文章了

编写完成之后我们可以通过本地调试，查看页面的展示效果，确认无误之后，我们就可以把我们的文章发布到网站上了。

图床

图床，在我们的博客中有许多图片，若是只有少数图片我们可以直接把图片放到source文件夹中，但是如果我们的图片数量非常多，这样的方式就变得很不合理，因为图片会占用大量的存储空间，导致页面加载缓慢。这时我们考虑把图片上传到图床，然后拿到图片的外部链接，再使用Markdown的语法，把图片插入到文章中。常见的图床有很多，比如：Imgur，SM.MS，七牛。。。

这里我推荐的GitHub的图床，非常好用，国内各大运营商的速度也不错，不过获取链接的方式比较特殊。

上传方式是在Repo中创建一个Issue，然后直接把图片拖到输入框内，GitHub会直接把你的图片分发到CDN中，并且在编辑框中生成图片的链接