Hexo+Netlify快速搭建我的博客

转Hexo+Netlify快速搭建我的博客

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

网友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车毁人亡，只要设定好了重定向，你的网站便不会受到任何影响。

 

发布网站

1. 添加网站内容

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

2. 关联GitHub帐户

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

 

点击GitHub关联Netlify和你的仓库

 

3. 受权验证

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

4. 选择仓库

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

5. 配置发布设置

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

 

6. 构建并发布网站

此时此刻，万事具有，只欠东风。

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

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

 

7. 发布成功

不到一杯茶的时间，网站上线。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没有中文版！不过好整个建站过程整体很顺畅，没有遇到任何障碍。

 

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