美文网首页Github + HexoHexo
静态网站的动态化

静态网站的动态化

作者: 离岛LOGAN | 来源:发表于2016-08-26 11:53 被阅读166次

说到静态网站的动态化,其实就跟想减肥又不愿多运动一个道理,那到底鱼和熊掌能不能兼得呢?静态网站确实有诸多优点但它的部署发布流程太繁琐了,之前我为了偷懒写了一个脚本每次写完文章一键发布!

后来在一次team分享会上cc同学提出了一个小创意说现在静态网站+markdown的组合非常流行,我们可不可以做一个移动版的app随时把写好的文章以静态网站的形式发布出去?而且兴致勃勃的说目前没有人这么做如果做出来肯定会火一把😄 。

最近在看持续集成相关的文章,然后发现完全可以通过CI+静态网站生成器+github手机客户端完成之前的idea,于是google了一下发现很多文章都有讲如何通过Travis、flow.ic等持续集成工具来发布由hexo、Jekyll等等静态网站生成器构建的博客,这仿佛也印证了那句话“当你想到一个idea的时候,可能有1000个人已经想到了,100个人在计划了,10个人准备全力去做了,一个人已经干出来了" 不过关键还是看执行力。

既然网上很多文章都有讲为什么还要来写这篇文章呢?还不是因为各种坑嘛,在实际搭建部署的过程中遇到各种莫名的环境配置问题,思路大家都懂😂

关于持续集成和静态网站生成器之类的概念在这里就不重复讲了,有问题自行google。

我的博客框架


我的博客系统是用Hexo+Travis CI+Github搭建的。
因为要使用Gitpage服务,所以生成的网页文件必须是在master分支

  • master分支用来存放生成的Html文件
  • blog_source分支用来存放博客源文件

在Github上生成Access Token


在github的设置页面,点击左侧的Personal access tokens,然后点击右上角的Generate new token按钮,他会让你输入密码,最后进入下图的页面:

这里需要注意因为你要把这个token给CI服务器所以为了安全起见尽量只给必要的权限即可。

Travis CI的环境配置


这里我们把一些敏感的信息都配置在CI服务器上,例如:github的用户名、邮箱、Gitpage的地址、还有刚刚生成的Token。

.travis.yml的配置


这里我们还需要在存放博客源码的仓库里创建一个.travis.yml配置文件,如下图:

内容如下:

其中变量的含义:

  • GH_TOKEN——访问github的token
  • GH_REF——博客托管在Gitpage上的地址
  • USER_NAME——github的用户名
  • EMAIL——github的邮箱

愉快的发布文章


1、通过Android studio来管理发布博客
在AS中有很多不错的插件来支持markdown,这样我们就可以像平时写代码一样来写文章了,完成之后push到服务器,CI那边就会自动编译发布。

2、通过github网站直接发布文章
这种方式就更不依赖环境了,只要有一台可以联网的设备你就可以开心的写文章了。

3、通过github手机客户端
github推出了Android版的客户端,这样写文章是不是更容易了呢


FullStackEngineer的公众号,更多分享

相关文章

  • 静态网站的动态化

    说到静态网站的动态化,其实就跟想减肥又不愿多运动一个道理,那到底鱼和熊掌能不能兼得呢?静态网站确实有诸多优点但它的...

  • 《演员请就位》微博热搜指数排行榜

    一、动态可视化神器——FlourishFlourish可轻松实现静态/动态数据可视化,官方网站https://ap...

  • web动态页面静态化,伪静态

    动态页面静态化 首选,我们需要了解两个概念, 静态页面 和 动态页面 静态页面 最早的时候,网站内容是通过在主机空...

  • 04-Web网站基础架构和组成

    网站篇http协议(单独详细学习)静态网站(较动态网站更为安全)动态网站(多种结构组合)伪静态网站(本质是一个动态...

  • 相关web知识

    静态网站与动态网站: 静态:客户端无法与服务器交互数据 eg:html 动态: 网站技术 ...

  • 服务器基本概念

    静态网站和动态网站 静态网站:不支持数据交互的网站;(例如:XXX.html xxx.htm)动态网站:支持数据交...

  • face35 动态语言静态化

    动态语言静态化 什么是动态语言静态化 将现有php等动态语言的逻辑代码生成为静态html文件,用户访问动态脚本重定...

  • 网站相关概念

    网站相关概念 静态网站和动态网站 静态网站 内容固定 容易被检索 没有数据库支持 交互性差 动态网站 可以根据用户...

  • javaSE回顾_05

    数组: 静态初始化: //静态初始化 int[] a = {1,2,3}; 动态初始化: //动态初始化 int[...

  • 真静态实现

    真静态实现 静态化: 静态化是解决减轻网站压力,提高网站访问速度的常用方案.包括:纯静态和伪静态。 纯静态: 将P...

网友评论

  • 華方:就怕push出去文章有错误,强迫症儿,必须在本地预览看好几遍才deploy :joy:
  • atfa:下飞机再看看
  • vinnyxiong:我就是那1000人的类型,一直有在想可以做一个用手机一键发布静态博客的软件,随时随地发布博客。然而也只是想想而已。博主提供了一个很好的思路和具体的实现方法,有时间好好研究下:clap:
    离岛LOGAN:@vinnyxiong_熊远文 哈哈 多交流啦

本文标题:静态网站的动态化

本文链接:https://www.haomeiwen.com/subject/okfzsttx.html