Hexo+Netlify快速搭建我的博客

最近想要给本身搭建一个博客网站，货比三家后，决定选择Hexo.io来建站，Netlify来进行代码托管和部署。

长话长说，在转行写前端以前，我曾作过一段时间网站内容编辑，当时主要使用的是Wordpress。做为传统动态网站生成器的表明，Wordpress拥有超高市场占有率，不少大型出版媒体的网站都是基于Wordpress。对于非技术人员来讲，其内容撰写及维护门槛较低。但和任何传统动态网站生成器同样，对于轻量级小建站平台，Wordpress显得过度臃肿。过期的插件容易被黑客攻击，造成安全漏洞。因为须要频繁访问数据库，其速度难以保证。
因而乎，近年来如日中天的静态网站生成器成了替代方案。对于靠写代码吃饭的程序猿朋友们来讲，在保留Git工做流程基础上，利用Markdown来撰写博客内容相比之经过内容管理系统的用户界面来建立内容要方便高效不少。

什么是静态网站生成器？具体优点为什么？

网友Chikara Chan在静态网站生成器是如何工做的中总结到：
一个静态网站生成器的工做流程一般有如下几个步骤：
读取源文件（e.g. 约定 markdown 格式）
资源预处理
模板引擎渲染
生成目标文件

和传统动态网站生成器相比，静态网站生成器的主要优点体如今：

• 响应速度：静态博客站点页面都是静态页面，访问时无需查询数据库，所以响应速度相对快不少
• 安全性：一样因为不须要访问数据库，静态网站免疫了不少网页攻击，其安全性令动态网站生成器可望不可即

最受欢迎的静态网站生成器有Jekyll, Hugo, Gatsby，以及咱们今天的主角Hexo等。详见StaticGen了解最新权威排名。

什么是Hexo?

Hexo是一款基于Node.js的静态博客网站生成器，由台湾的Tommy Chen建立并维护。其卓越的速度，丰富的插件系统（支持大部分Octopress插件），友好的语言支持（拥有简体中文及繁体中文版本的文档），使其备受国内用户亲赖。

安装Hexo的准备工做
在开始安装Hexo前，请确保你的本地环境已安装以下应用程序：

• Git
• Node.js

安装Hexo
打开终端，输入npm命令安装Hexo：
$ npm install -g hexo-cli

安装完成后，输入如下指令建立项目文件夹路径：
$ hexo init /PATH/TO/hexo

切换至刚刚建立的文件夹：
$ cd /PATH/TO/hexo

建站
安装Hexo会在你所制定的文件夹里安装必要组件，以提供给你一个基本的网站雏形。经过npm来操做完成Hexo初始化:
$ npm install

恭喜你！网站雏形已建成！启动hexo服务器来预览你的成果：
$ hexo server

你如今能够前往 http://0.0.0.0:4000/ 访问你的最新网站了！
这么简单？没错，就是那么简单。
固然，别忘了给你的网站添加文章内容。
新建博客文章，只需运行如下指令:
$ hexo new "个人最新日志"

你会发如今你的文件夹_posts下已生成了一个新的md文档，其中已包含了文章的标题和建立日期

---
title: 个人最新日志
date: 2018-07-03 11:54:41
tags:
---

下一步，生成静态文件:
$ hexo generate

若是你的hexo服务器还在运行中的话，刷新网页，即可看到你新建立的博客文章！

网站发布前准备工做

添加完网站内容后，咱们接下来来看如何发布网站。
有一个细节值得一提，在默认状况下，Hexo将生成的网站内容存储至public文件夹。鉴于咱们不须要对该文件夹的内容进行版本控制，咱们可将该文件夹添加至.gitignore文档中:
$ echo "/public" >> .gitignore

接下来即可将你的内容推送至你习惯使用的代码托管服务，以GitHub和GitLab为表明。咱们会以GitHub为例来进行步骤讲解。

新建仓库
首先，在GitHub上新建仓库。为了不出错，在新建仓库时，请不要在建立Initialize this repository with a README前打勾，Add .gitignore和Add a license处请选择None。
鉴于咱们的demo基于Hexo和Netlify，在Repository name处填写hexo_netlify来命名仓库。

打开你的电脑终端，切换至你的项目所在的本地文件夹路径：
$ cd ~/PATH/TO/hexo_netlify/

初始化仓库
$ git init

该命令将建立一个名为.git的子目录，其中包含了你初始化的Git仓库中所需的文件，这些文件是Git仓库的核心。此时，咱们仅做了一个初始化的操做，你的项目文件还未被跟踪。
经过git add 来实现对指定文件的跟踪，而后执行git commit提交:
$ git add .
$ git commit -m "initial commit"

回到以前咱们建立GitHub仓库完成的页面，复制远程仓库连接，在终端输入:
$ git remote add origin <远程仓库连接>

你能够经过git remote -v来验证你的连接是否正确。
验证完毕，确认准确无误后，用如下指令推送本地仓库内容至GitHub
$ git push origin master

如今，你的源代码已被成功上传至GitHub，接下来咱们能够经过Netlify来发布网站。

为何选择Netlify来发布网站？Netlfily和GitHub Pages有什么区别？

大约一年前，在网上闲逛时发现这篇文章GitHub Pages is Dead, Long Live Netlify!)。
转身尝试了下Netlify，感受如获至宝。如文章所言, Netlify的Continuous Deployment持续部署功能使其鹤立鸡群（后面具体讲述部署过程的时候会有更详细解释）。且Netlify支持大部分静态网站生成器（Github Pages仅支持Jekyll）。此外，GitHub Pages对redirects，重定向（也称URL转发）支持并不友好，若是你哪天改变主义，再也不须要GitHub Pages所提供的*.github.io子域名，那你可有得麻烦了。相形之下，你能够轻松简单得从*.netlify.com重定向至你的新地址(Netlify 的重定向编码是301或302)，这样一来，搜索引擎能够清楚识别你的页面已被转移，从而对你的新页面进行从新排名。因此即便哪天Netlify车毁人亡，只要设定好了重定向，你的网站便不会受到任何影响。

发布网站

添加网站内容
首先，你须要注册一个Netlify帐号，Netlify提供邮箱注册和包括GitHub在内的第三方验证登录。注册过程和通常网站注册过程大同小异，你会收到一封来自Netlify的邮件，确认你的注册信息，点击邮件中的连接登录你的帐户。

关联GitHub帐户
登录后，在 https://app.netlify.com/account/sites 页面下，点击New site from Git进入下一步。

点击GitHub关联Netlify和你的仓库

受权验证
首次关联时，你会看到如下窗口，点击Authorize netlify赞成受权后，Netlify能够有权访问你在GitHub上的仓库内容了

选择仓库
受权完毕后，页面会跳转回Netlify。经过搜索栏来快速找到你所建立的hexo_netlify仓库，选中该仓库。

配置发布设置
Netlify容许你自定义你的部署设置，咱们的demo只需使用默认设置便可。

构建并发布网站

此时此刻，万事具有，只欠东风。
点击完Deploy site以后，Netlify会构建并发布你的网站内容。你能够放心得伸个懒腰，泡杯咖啡，剩下的就交给Netlify处理。你能够经过Deploy log实时观察部署过程。

进行到这一步，Netlify的主要特点终于得以付出水面。咱们知道，任何超过一我的的项目都须要经历如下过程：某a分支的内容须要经过pull request进行审核，审核完后合并到主分支。Netlify支持分支部署（ branch deployment )和部署预览( deploy preview )，也就是说，你能够在不触及production code的状况下，预览你的成果。大大提升了团队合做效率，下降了风险。我的认为属于杀手锏类型武器。

发布成功 🎉
不到一杯茶的时间，网站上线。Netlify会在网站发布成功的同时提供给你一个*.netlify.com为后缀以及随机生成的英文名为前缀的子域名。
假如你不喜欢Netlify给你的前缀，而且还将来得及购买域名，能够经过Domain settings > Edit site name来快速美化你的网址：

上线！撒花！🎉

在建站过程当中，你可能最常须要用到如下指令：

hexo n #添加新内容
hexo g #生成静态文件
hexo d #部署 #可与hexo g合并为 hexo d -g
hexo s == hexo server #启动服务预览

更多指令请参考Hexo文档。

和GitHub同样，Netlify没有中文版！不过好整个建站过程整体很顺畅，没有遇到任何障碍。

但愿这篇文章能对有兴趣的童鞋有所帮助，有任何问题，建议，想法，质疑，欢迎留言或邮件交流。

(该文章以前有在CSDN上po过，感受segmentfault更适合讨论这类小众话题）