Github+Hexo+Netlify搭建自己的博客

前情提要

引言

说到博客，大家一定也都不陌生，通常情况下可以用来记录一些自己的想法，学习成长的笔记，分享一些不错的东西或者作品。一般传统的笔记软件如有道云笔记、印象笔记、Notion等在分享和展示方面的能力实在差强人意，可以用来做些私人化的记录。对于一些公共的文章发布平台如CSDN、简书、掘金、博客园等，自定义的程度并不高，界面观感也是参差不齐，存在广告不说，发布的博文还会面临被删帖的风险。我的空间就应该我做主，今天就带大家使用 Github + Hexo + Netlify 来搭建一个属于自己的博客，一块干净纯粹的空间。

当然你也可以不使用这种方法来搭建博客，自己租一台服务器或者一个网站空间，借助 wordpress 这种成熟的博客系统或者自己写一套都是可以的。这些我都曾经尝试过，但是服务器、数据库的租赁成本对于还是一个学生的我来说有点负担不起，搭一个个人博客感觉也不太值得。最重要的是由于没有备份，租赁期限到了没续费，使得很多沉淀下来的东西付之一炬，粉丝们也都理所当然的跑了，就剩一些百度快照（当然现在可能快照都没了）。在那之后的很长一段时间里也没有什么输出，一些觉得好的东西也就随手往笔记软件里塞，或者往收藏夹里一放，也没怎么整理。随着时间的推移，接触的东西也越来越多，单凭脑子和混乱的笔记本已经不足以再支撑下去了。于是想要重新把博客搭起来，主要目的还是梳理思路、记录和分享观点，用输出倒逼输入和思考。如果我的一些思考能给予访客们一些帮助或者启发也将是我莫大的荣幸。

Github+Hexo+Netlify 的优点

• 博客内容可以放在 github 上，netlify 动态拉取 github 指定仓库的内容进行部署，对 hexo 这种静态网站服务进行托管
• 没有机器、数据库的租赁和运维成本，方便好管理，有机可追溯
• 能够绑定自定义域名
• 提供免费 SSL 证书，也支持自有 SSL 证书
• 支持自动构建，仓库更新，自动拉取构建
• 免费 CDN
• 无需备案

着手搭建

准备工作

• Github 账号一枚
• 建立一个空 github 仓库
• Netlify 账号一枚
• Node.js > 10.13
• Git，用于版本控制

安装 Hexo

打开终端，输入以下命令安装 hexo

npm install -g hexo-cli

安装完成以后，执行以下命令。它会在当前目录下初始化一个名为 blog 的文件夹，当然也可以不叫 blog，将其替换成其他路径下的其他名称也是👌的

hexo init blog

此时你的博客其实已经搭建起来了，你可以切换到 blog 文件夹下将其运行起来。

cd blog && hexo server

打开浏览器访问 http://localhost:4000你就可以看到它最初的模样。

命令 hexo generate或者hexo g可以生成其静态页面，生成的东西会放到一个叫 public 的文件目录下，无论你是使用 gitpage 还是 netlify，它们最终呈现给用户的其实就是hexo g生成出来的那些静态页面。

初始化本地仓库并与 github 仓库关联

首先确保当前目录为上面创建的 blog 目录下，执行git init初始化本地仓库，通过git remote add origin URL添加远端仓库地址，这里的 URL 可以在你创建的 github 仓库中获取。添加完成以后可以通过git remote -v确认一下是否配置成功。

接下来就可以把本地仓库的内容推送到远端了。

git add .
git commit -m "init hexo blog"
git push -u origin master

将 github 仓库绑定到 netlify

这里借用 netlify 官方提供的图片

• 首先添加站点

• 绑定 github 账号

• 认证

• 绑定仓库

• 构建配置

• 等待黄字变绿

• 自动分配了一个域名，点击即可访问

• 修改分配的域名前缀

到这里，只要你的 github 仓库有更新，netlify 就会自动为你完成构建。

绑定自定义域名

在 netlify 上找到自己的站点，点击 Domain settings 按钮，然后在下方点击 Add custom domain 按钮，然后在弹出框中输入自己需要绑定的完整域名，点击保存。

完成这一步之后，会显示Check DNS configuration，这时候只需要到你购买域名的平台上将自己的域名通过 CNAME 解析的方式解析到 netlify 给你的那个域名上即可。

实现 HTTPS 访问

在Domain setting的最下方，可以看到 HTTPS 的设置，点击左边的按钮，在域名解析完成之后便会为你申请一个 SSL 证书，申请完成以后便可以实现 https 访问了，大约几分钟的时间。当然你也可以使用自己的证书，同样是在这里设置。

附送 gitpage 方式发布 hexo 博客方法

首先你得有一个 gitpage 的仓库，创建和使用方法也很简单，请自行百度，这里只介绍怎么将 hexo 内容发布上去。

gitpage 的仓库是不能设置为 private 的，而上面我们说的这种方法创建的那个仓库是可以设置为 private 的。因为 gitpage 是拿来存放 hexo g生成的 public 文件夹下的静态网站数据的，这部分数据如果设置为 private 当然就没法被访问了嘛，而上面我们创建的仓库是拿来存构建前的数据文件的，相当于源码。源码仓库对于 gitpage 方式来说是非必须的，而对于 netlify 来说是必须的。

通过命令npm install hexo-deployer-git --save安装 git 部署器，然后修改_config.yml文件，绑定 gitpage 仓库。

deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

每次更新以后要部署的时候执行一下hexo clean && hexo d，然后访问YourgithubName.github.io看到的页面就是最新的了。

What’s more?

后续更多的使用，如这玩意怎么写博客，主题的切换和配置，插件的引入和使用，图片的存放和引用等内容。可以到 Hexo 的文档中以及相应的主题、插件文档中查看，这里就不一一叙述了，希望能对你有所帮助。