博客换新家

我最早接触 静态网站生成器是farbox,在那个不会搭网站的时代,farbox帮助我建成了我的第一个个人博客。如今最流行的静态网站生成器恐怕就是hexojekyll了,关于他们之间的区别这里就不多赘述,趁着这次整理博客内容的间隙,我把我的博客系统换hexo顺便记录一下安装和部署的流程。

How && Why?

静态网站生成器真的是很有意思的一个东西。最早的互联网之初,所有的网站都是静态的。我们开始学习网页开发的时候,用 Dreamweaver 创建的一个个的xxx.html就是一个个的静态网页。顾名思义,静态网页就是一个页面对应一个内容,服务器直接把网页内容返回给请求者。

而随着互联网技术的日新月异,大家发现很多网站内容其实是可以在用户点击访问的时候再生成出来,于是动态网站开始逐渐成为主流。通常的动态网站需要一个持续运行的程序,数据库和相对应的模板,再用户点击的时候程序取出数据库的数据套入模板实时的为用户生成他需要的页面。

而为什么如今静态网站又成为了一种趋势呢?我猜是跟风吧

我觉得有几点因素特别重要:

  1. 现代前端技术发展导致后端的功能越来越简单,尤其是javascript这几年的突飞猛进
  2. 持续集成和自动化部署的技术越来越成熟,节省了很多动态的配置和部署工作
  3. 静态网站的安全性和借助CDN加速以后的访问速度都比动态网站要高

如果用静态网站生成器来写博客的话,那么他的优点就更加明显了,无需服务器,易于部署,方便维护,逼格高

安装部署(Mac)

hexo是个 node 程序,所以安装之前先要装好node

brew install node

安装完毕以后就可以直接安装hexo

npm install -g hexo-cli

安装完成以后,使用hexo -v命令就能看到hexo的相关命令了。

Hexo 的使用

首先就是使用hexo init <blog_name>初始化一个新的博客项目,项目名字可以是任意想要的。

然后进入hexo帮你创建的文件夹,可以看到这里有项目相关的各种文件了。

├── _config.yml
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── source
└── themes

顾名思义,source文件夹就是用来存放『博客』的资源-文章了。而博客的『样式』资源呢?其实是存放在themes文件夹中了,这个可以以后自己研究。还有一个_config.yml文件,这就是整个博客的配置文件了,包括博客名称,描述,url等配置项都可以在这里进行修改。(注意和themes/xx/theme_name/_config.yml即主题的配置文件区分)

管理发布

插件配置

想一键发布到 git,还需要安装一个插件:

 npm install hexo-deployer-git --save

Coding Pages 设置

Condig Pages 是国内的代码托管网站coding.net提供的静态网站托管服务。我们只要在这里创建一个仓库,然后在左侧pages 服务选项里面开启 Pages 服务并添加一下博客的自定义的域名就可以了:

修改 && 发布

然后打开_config.yml文件,修改其中的deploy配置:

deploy:
  type: git
  repo: git@git.coding.net:yourname/project_name.git
  branch: master

将仓库的 git 地址写到配置里面就好了(记得先配置一下 ssh 公钥)。

配置文件改完以后,就可以通过如下命令生成并且发布到coding Pages上去了:

hexo g  // 生成静态文件
hexo d // 发布到 Coding Pages

其他 hexo 命令可以参考这里

这样就配置完成了,以后每次写了一篇新文章,就能方便快速的发布到网上了。美滋滋。

Comments

comments powered by Disqus