首先说明,这不是一个面对初学者的文章。
静态托管服务有很多
- github 的 github.io
- 国内 coding 提供的page 服务
- zeit.co 提供的静态托管服务
- 谷歌提供的firebase 服务(命令行操作已被墙)
原来一直用github ,但是有如下问题:
- https 证书兼容性不好
- 访问速度较慢
后来切换到 coding 还不错,但最近coding 被腾讯收购(所谓深度合作)以后,就开始担心。而且coding 需要页面标注coding logo,这点不太好。
折腾好久之后,终于找到更靠谱的(的确速度比github 更快一点)的Netlify。
为什么是静态网站?具体优势为何?
本站就是用Hexo 生成,之前玩儿wp (wordpress) 太慢、太重!而且还依赖服务器环境。而静态网站的主要优势体现在:
- 响应速度:静态博客站点页面都是静态页面,访问时无需查询数据库,因此响应速度相对快很多
- 安全性:同样由于不需要访问数据库,静态网站免疫了很多网页攻击,其安全性令动态网站生成器望尘莫及
最受欢迎的静态网站生成器有Jekyll, Hugo, Gatsby,以及我们今天的主角Hexo等。
什么是Hexo
Hexo是一款基于Node.js的静态博客网站生成器,由台湾的Tommy Chen创建并维护。其卓越的速度,丰富的插件系统(支持大部分Octopress插件),友好的语言支持(拥有简体中文及繁体中文版本的文档),使其备受国内用户亲赖。
安装Hexo的准备工作
在开始安装Hexo前,请确保你的本地环境已安装如下应用程序:
- Git
- Node.js
安装Hexo
打开终端,输入npm命令安装Hexo:
1 | $ npm install -g hexo-cli |
安装完成后,输入以下指令创建项目文件夹路径:
1 | $ hexo init /PATH/TO/hexo |
切换至刚刚创建的文件夹:
1 | $ cd /PATH/TO/hexo |
建站
安装Hexo会在你所制定的文件夹里安装必要组件,以提供给你一个基本的网站雏形。通过npm来操作完成Hexo初始化:
1 | $ npm install |
恭喜你!网站雏形已建成!启动hexo服务器来预览你的成果:
1 | $ hexo server |
你现在可以前往 http://0.0.0.0:4000/
访问你的最新网站了!
这么简单?没错,就是那么简单。
当然,别忘了给你的网站添加文章内容。
新建博客文章,只需运行以下指令:
1 | $ hexo new "我的最新日志" |
你会发现在你的文件夹 _posts
下已生成了一个新的md文档,其中已包含了文章的标题和创建日期
1 | --- |
下一步,生成静态文件:
1 | $ hexo generate |
如果你的hexo服务器还在运行中的话,刷新网页,便可看到你新创建的博客文章!
保存到github
找一个github 建个仓库存放自己的站,这点不需要多说了吧。。。
发布网站
首先,你需要注册一个Netlify账号,Netlify提供邮箱注册和包括GitHub在内的第三方验证登陆。注册过程和一般网站注册过程大同小异,你会收到一封来自Netlify的邮件,确认你的注册信息,点击邮件中的链接登陆你的账户。
关联GitHub账户
登陆后,在 https://app.netlify.com/account/sites
页面下,点击 New site from Git
进入下一步。
点击 GitHub
关联 Netlify
和你的仓库
选择仓库
授权完毕后,页面会跳转回 Netlify
。通过搜索栏来快速找到你所创建的 hexo
仓库,选中该仓库。
配置发布设置
Netlify
允许你自定义你的部署设置,我们的demo只需使用默认设置即可,目录选择 /public
构建并发布网站
此时此刻,万事具备,只欠东风。
点击完 Deploy site
之后,Netlify
会构建并发布你的网站内容。你可以放心得伸个懒腰,泡杯咖啡,剩下的就交给 Netlify
处理。你可以通过 Deploy log
实时观察部署过程。
进行到这一步,Netlify的主要特色终于得以付出水面。我们知道,任何超过一个人的项目都需要经历以下过程:某a分支的内容需要通过pull request进行审核,审核完后合并到主分支。Netlify支持分支部署( branch deployment )和部署预览( deploy preview )
发布成功 🎉
不到一杯茶的时间,网站上线。Netlify会在网站发布成功的同时提供给你一个 *.netlify.com
为后缀以及随机生成的英文名为前缀的子域名。
假如你不喜欢 Netlify
给你的前缀,并且还未来得及购买域名,可以通过 Domain settings > Edit site name
来快速美化你的网址,当然也可以绑定自己的域名,就像本站。和GitHub一样,Netlify没有中文版!不过好整个建站过程总体很顺畅,没有遇到任何障碍。
更多指令请参考Hexo文档。