开发

开发免费托管的静态网站

随着互联网的发展，搭建网站的技术门槛和使用成本都急剧降低。有如下几个痛点得到极大缓解：

  • 代码免费托管：Github已经取消对私有库的数量限制，网站代码可以通过Git推送到Github的库中进行托管；
  • 网站免费托管：购置实体或者虚拟服务器都需要一笔不小的开支，而采用netlify等静态网站托管则不需要任何费用，并且可以链接Github代码库实现即时修改；
  • 域名价格低廉：域名可选则的种类非常丰富，对于一般性的域名购入和使用的成本都非常的低。
  • 开源框架丰富：WordPress, Hexo等开源框架可以实现丰富多样的网站，这些框架的应用降低了网站开发的技术门槛。

下面将讲解免费托管方式下的网站开发所使用的工具和开发流程。

开发工具

  • 阿里云：域名注册与解析设置
  • Node.js：基于Chrome V8的JavaScript运行环境
  • Hexo：静态网站生成器，将Markdown文档转换为静态网页
  • Typora：Markdown文档编辑器，所见即所得
  • Git：代码版本管理与代码部署
  • GitHub：代码托管
  • netlify：静态网站托管

域名注册与解析

在阿里云上以合适的价格购买喜欢的域名，和淘宝没区别。

域名解析设置中注意区分记录类型，如类型A常用于将域名指向自建服务器的IP地址，类型CNAME则是将域名转向另一个域名。本文采用CNAME记录类型。

开发环境

首先安装Git和Node.js开发工具，Windows平台下载安装即可，Linux平台使用yum、apt等包管理工具安装或者下载源码编译安装。

其次安装Hexo，命令为：

1
npm install hexo-cli -g

安装完成后初始化网站编译环境：

1
2
3
hexo init blog
cd blog
npm install

此时编译环境以及搭建完成，可以开启本地服务以查看网站效果：

1
2
npm install hexo-server
hexo server

然后开始进行网站内容的创作。发表新内容的命令为：

1
hexo new [layout] <title>

[layout]值内容所在的页面，采用默认页面则可以省略。<title>为新建内容的标题，执行完该命令后在source目录里会生成<title>.md的文档。

最后，通过Markdown编辑器如Typora对生成的文档进行编辑，完成后执行如下命令生成静态网页：

1
hexo generate

代码托管

网站的源文件可由GitHub的仓库进行托管，将修改并完成编译的网页文件推送至GitHub相应的仓库中。流程大致如下：

  1. GitHub中创建仓库，复制仓库的克隆地址；

  2. 修改网站编译环境根目录下的_config.yml文件中的deploy参数：

    1
    2
    3
    4
    deploy:
      type: git
      repo: https://github.com/[user]/[repo].git
      branch: master

  3. 将生成的静态网站文件部署到GitHub：

    1
    hexo deploy

网站托管

创建netlify账号并关联GitHub账户，按照网站指引添加网站内容，选择网站对应的仓库，完成后发布网站。

需要注意的是，如需使用自己的域名，不仅要在netlify中进行域名的填写，还要在阿里云中对相应的域名进行解析设置。设置方式为采用CNAME类型将自己的域名指向netlify所提供的二级域名。

总结

开发免费托管的静态网站所使用到的工具较多，操作流程略微有些繁琐。不过开发技术门槛并不高，基本上按照这些工具的官方说明文档进行操作即可。过程中所使用到的命令都很简单，甚至没有编程基础也可以操作，唯一需要的是耐心。

采用这种方式部署网站的好处是能够轻松实现网站的迁移，变更托管平台或者域名都不会对网站内容造成影响，比采用WordPress搭建的网站容易很多。

网站搭建好了即可将重心放到丰富内容和美化网站上，慢慢折腾吧^_^