用 Hexo + Next + GitHubPages 搭建漂亮的免费博客
Amzaing00 2019-06-27
花费了 一天半 的时间，终于把我的 个人博客 搭建完成，下面我写下搭建博客的过程，其实挺简单的 ?
博客所用技术 （Hexo + Next + GitHubPages）
在文章的末尾我会 贴出 我基于 Hexo + Next + GitHubPages 搭建博客，所参考的文章链接。
如果，你也想用这些技术搭建漂亮的博客，你就需要了解下 Hexo 、 Next 、 GitHubPages 这三个单词，下面会逐个解释。
什么是 Hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。 -- Hexo
什么是 Next
NexT 是 Hexo的一个主题（theme），拥有丰富而简单的配置，结合第三方服务，可以打造属于您自己的博客。 -- Next
什么是 GitHubPages
GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository. -- GitHubPages
翻译过来大概是： GitHub页面是一个静态的站点托管服务，旨在从GitHub存储库中直接托管您的个人、组织或项目页面。
所以，Hexo 、 Next 、 GitHubPages 配合起来就可以免费搭建漂亮的 个人博客 , 是不是很爽 ?
如何基于 Hexo 搭建博客
基于 Hexo 搭建博客，只需简单的几步，就能完成 个人博客 的搭建。
准备工作
下载安装 nodejs
node 会自带 npm 包管理工具，建议安装 yarn 来管理依赖 （因为 Hexo 貌似是用 yarn 管理 依赖 的，否则可以回出现 依赖 问题）。
Mac 用户可以用 brew 安装，Windows 可以用 cmder 或去官网下安装包程序。
brew install node
然后用 npm 安装 yarn
npm install yarn
安装 git
Mac 用户可用刚安装的 yarn 包管理工具安装 git，Windows 可以 cmder 或去官网下安装包程序。
yarn add git -g
安装 Hexo
进入你的项目目录，比如我的是 myblog ，
cd myblog
然后用 yarn 安装 Hexo。
yarn add hexo -S
此时，环境都准备好了，就可以开始搭建 hexo 博客了 ?
搭建本地博客
进入你的项目目录
比如：我的是 myblog。
cd myblog
项目初始化
项目初始化，会自动生成博客模板，以后写博客只需用 markdown 语法编写对应的 .md 文件即可 ✍️ 。
hexo init
安装所有的依赖
建议使用用 yarn ，否则会出现依赖问题（在本文之后有相关介绍）。
yarn install
最后，启动本地服务
在浏览器输入 localhost:4000 即可预览博客
hexo server
如图: ?
关联 GitHub
通过 GitHub 的 pages 功能，我们可以把我们的博客托管到 GitHub ，而无需去购买云服务器 ? ,轻松愉快的构建免费博客。
创建 GitHub 账户
我相信 ? 大家应该都有 GitHub 账号了，如果没有可去 GitHub 官网按照步骤创建账户即可。
配置关联 GitHub
- 有了 GitHub 账号之后，登录 GitHub ，创建一个项目，项目名称最好和你本地的项目一致，比如：
myblog
项目建好之后，一定要开启 GitHub Pages 功能 ⚠️
- 点击如图
Settings开启，GitHub Pages 功能
- 选择
master branch, 然后 Save
- 复制你的项目连接，如图
- 然后在你本地项目根目录找到
_config.yml文件，粘贴到以下位置
# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repository: https://github.com/persilee/MyBlog.git branch: master
完成关联
完成以上步骤之后，就可以把自己本地项目推送到 GitHub 托管，只剩下3步 ?
- 安装
hexo-deployer-git插件（可以通过简单的命令,完成文件生成及推送功能）
yarn add hexo-deployer-git -S
- 运行
hexo g（生成本地文件）
hexo g
- 运行
hexo d（将本地文件推送到 GitHub ，和git push功能相同）
hexo d
此时，GitHub 应该已给你生成了访问连接，连接格式是: 你的账号名称 + .github.io + \项目名称,也可以去刚才 GitHubPages 设置页面查看
例如我的：https:\persilee.github.ioMyBlog
这时，你就可以把连接发给小伙伴们，他们通过连接都可以访问你的 博客 ?。
这里需要注意的地方是：在执行hexo g命令时候，可能会出现以下error,应该是yarn和npm冲突的依赖的问题，所以前面文章建议使用yarn管理包依赖
ERROR Plugin load failed: hexo-renderer-marked Error: EISDIR: illegal operation on a directory, read ERROR Plugin load failed: hexo-server Error: EISDIR: illegal operation on a directory, read ERROR Plugin load failed: hexo-renderer-stylus Error: EISDIR: illegal operation on a directory, read
解决办法，先用 yarn 分别移除，再重新安装，如下
## 先移除 yarn remove hexo-renderer-marked yarn remove hexo-renderer-stylus yarn remove hexo-server ## 再安装 yarn add hexo-renderer-marked -S yarn add hexo-renderer-stylus -S yarn add hexo-server -S
在执行 hexo g ,顺利执行 ?
绑定域名
我们已经可以通过 GitHub 分发给我的地址访问 博客 ，但是，这对于我们这些爱 折腾 的 程序猿?? 来说，还不够，弄个自己的 域名 才够拉风?。
于是。。。
开始绑定自己的 域名 lishaoy.net
然而，我们绑定 域名 之后，只支持 http 协议，这样我们在 Google 浏览器访问时，会有不安全标准，而且，很容易被插入广告，于是。。。折腾 走起?：搞个 https
转入正题，经过一番 折腾 ，采用第三方服务 Netlify 来提供免费的SSL/TLS证书。
当然，这里我提供2种方式绑定域名，一种是 http (不安全的网络协议)、一种是 https （安全的网络协议，在 Google 浏览器上回有一把小锁，如图）
http 绑定域名
设置域名解析规则
首先，我们需要去运行商，新增域名解析规则，如图
新增 CNAME 文件
配置好域名解析规则之后，还需要在项目的 .\source\ 路径下新增 CNAME 文件，输入内容 你的域名 ,如：lishaoy.net
重新新生成文件，推送到GitHub
重新生成文件，运行 hexo g
hexo g
推送 GitHub
hexo d
https 绑定域名
注册 Netlify 账号
首先，我们需要注册一个 Netlify 账号，地址：Netlify ，可以选择用 GitHub 注册。
新增站点
- 点击如图按钮
New site from Git,来新增 站点
- 然后，点击如图按钮
GitHub
- 选择你的项目，比如我的
myblog
- 点击
Deploy site
- 看到如图页面，表示成功，再点击
Site settings
- 再点击
Change site name修改短名称，方便记忆 - 在自己的域名管理中设置 DNS ，我使用的是 阿里云 ，在管理界面添加如图规则
- 在点击
Domain management下的https，按照步骤完成操作，稍等片刻，即可看到我们的 域名 已经上锁 ?
? ? ? ? ? ? ...
更换 Next 主题
Hexo 的主题很多，你可以选择其他喜欢 ❤️ 的主题，我使用的是 Next 主题。
安装 Next 主题
执行以下命令，安装 Next 主题
git clone https://github.com/iissnan/hexo-theme-next.git themes/next
更改配置文件
修改根目录下的 ./_config.yml 文件，如下
# Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: next
重新新生成文件，推送到GitHub
重新生成文件，运行 hexo g
hexo g
推送 GitHub
hexo d
也可以运行以下命令，启动一个本地服务，调试确定无问题之后再 推送到 GitHub
hexo s --debug
本地服务启动后，可以在浏览器输入 http://localhost:4000 预览，如图
本文到此告一段落，关于 Next 主题美化的问题，可以参考以下链接文章 ?
以下是我搭建 博客 参考的文章链接 ?
