# 前言

现在有越来越多的平台支持用户分享自己创作的文章,常见的就有知乎、微信公众号、简书、CSDN 等,这些平台为你的内容带来流量的同时,也要你承担相应的限制,比如 CSDN 就会出现各种广告,微信公众号就不能添加外部链接等等。总的来说还是不自由,内容创作者只是把内容托管到了它们的平台上面而已。尽管博客在中国流行的时间还是在十几年前,这个时间点搭建一个博客甚至还有点逆时代潮流的感觉,但是也正是自己的站点,能给予自己更多的自由,更多的表达空间,尤其是程序员、摄影师等,更需要一个展示自己内容的空间。

# Hexo

# 什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

Hexo 博客本质上是一个 CMS (Content Management System),内容管理系统,从官网的解释里面可以看到,这是一个静态的博客,也就是说,写作的流程是这样的:

  • 用 Markdown 写作
  • 使用 Hexo 生成静态页面
  • 使用 Hexo 部署静态页面

简而言之,Hexo 是一个静态页面生成与部署的工具。静态网站的优势就是因为不需要查询数据库,响应速度快且安全性高。至于 Markdown 的语法,在之前的文章《Markdown 与 LaTeX》中写过,不再赘述。

# 安装 Hexo

安装 Hexo 非常简单,只需要以下应用程序即可:

  • Node.js
  • Git

# Node.js

简单地说,Node.js 就是运行在服务端的 JavaScript,可以直接从官网下载 Node.js,如果之后的 Hexo 安装出现了问题,可能是因为 Node.js 版本太新的原因造成的,这个时候换一个更低版本的 Node.js 即可。为了方便管理 Node.js 的版本,建议使用 nvm 进行管理,如果嫌麻烦也可以直接跳过这一部分从官网安装 Node.js:

# Mac

Mac 用户可以使用 Homebrew 包安装工具直接安装:

brew install nvm

接下来设置环境变量:

export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh"  # This loads nvm
[ -s "/usr/local/opt/nvm/etc/bash_completion" ] && . "/usr/local/opt/nvm/etc/bash_completion"  # This loads nvm bash_completion
# Windows

Windows 用户可以从 nvm-windows 这个仓库的 Release 处下载安装包。

# nvm 的使用
nvm ls # 查看已安装的版本
nvm ls-remote # 查看可安装的版本
nvm install 8.0.0 # 安装指定版本
nvm use 8.0 # 切换指定版本

# npm

npm 是随 Node.js 一同安装的包管理工具,在国内可以使用淘宝镜像提升下载速度:

npm install -g cnpm --registry=https://registry.npm.taobao.org

之后我们就可以使用 cnpm 从淘宝镜像来安装模块,cnpm 的同步频率目前为 10 分钟一次以保证尽量与官方服务同步,同时也可以照常使用 npm 从官方同步。

# Git

Git 的安装及使用在之前的文章《程序员的时间机器 —— Git 与 GitHub 的使用》提过了,鉴于篇幅有限,这里不再赘述,可以查看之前的文章。

# Hexo

一行命令即可安装 Hexo:

cnpm install hexo-cli -g

# 使用 Hexo

# 初始化

安装完 Hexo 后,可以使用以下命令创建所需要的文件:

hexo init <folder>

上面的 <folder> 由自己的文件夹替换,例如:

可以看到新建完成后,指定文件夹的目录如下:

.
├── _config.yml
├── .gitignore
├── node_modules
├── package-lock.json
├── package.json
├── scaffolds
├── source
|   └── _posts
└── themes
  • _config.yml:网站的配置信息,您可以在此配置大部分的参数。
  • .gitignore:告诉 Git 哪些文件不需要添加到版本管理中。
  • node_modules:项目所依赖的模块。
  • package.json:记录整个项目中的一些基础信息。
  • package-lock.json:确定当前安装包的依赖,以便后续重新安装的时候生成相同的依赖。
  • scaffolds:模板文件夹,当您新建文章时,Hexo 会根据 scaffold 来建立文件,Hexo 的模板是指在新建的 Markdown 文件中默认填充的内容。例如,如果您修改 scaffold/post.md 中的 Front-matter 内容,那么每次新建一篇文章时都会包含这个修改。
  • source:资源文件夹是存放用户资源的地方,除 _post 文件夹之外,开头命名为 _ (下划线) 的文件 / 文件夹和隐藏的文件会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。
  • themes:主题文件夹。Hexo 会根据主题来生成静态页面。

# 预览

这个时候你已经可以使用 hexo server 或者简写为 hexo s 来预览,打开网站即可预览:

此时一个博客已经搭完了。

# 新建文章

我们可以使用命令行来创建文章:

hexo new <title>

也可以在 Hexo 主目录下 source => _posts 新建以 .md 为后缀的文章进行手动创建。

这里提一下 Front-matter,这是文件最上方以 - - - 分割的区域,用于指定个别文章的变量,举例来说:

参数描述默认值
layout布局post
title标题文件名
date建立日期文件建立日期
updated更新日期文件更新日期
tags标签(不适用于分页)
categories分类(不适用于分页)
permalink覆盖文章网址
thumbnail缩略图地址
toc显示 TOC 按钮true
comment显示评论true
notag不生成标签按钮false
top置顶false
mathJax启用 Mathjaxfalse

只有文章支持分类和标签,您可以在 Front-matter 中设置。在 Hexo 中分类和标签有着明显的差别:分类具有顺序性和层次性,也就是说 Foo, Bar 不等于 Bar,Foo ,而标签没有顺序和层次。前面也说过,我们可以在 scaffolds 模板文件夹中定义这些内容。

# 生成静态文件

我们可以使用 hexo generate 或简写为 hexo -g 来生成这些静态文件,此时会在根目录下新建一个 public 的文件夹:

# 部署文件

上一步我们生成了静态文件,这一步要做的就是部署这些文件,那这些文件需要部署到哪里去呢?我们可以使用 GitHub 来托管我们的项目。首先新建一个 Repo,设置为 Public,名称可以任意,自己喜欢就好(如果使用 GitHub 的域名必须设置 Public 否则会打不开,图片上设置 Private 是为了下文隐藏这个 Repo,如果觉得第二部分麻烦这一步必须设置为 Public):

接下来就要把 Hexo 生成的文件部署到 GitHub 上去,首先打开站点配置文件 _config.yml ,修改里面的内容为如下类似 (注意冒号后面有一个空格):

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/VXenomac/art.git
  branch: master

首先安装 deploy-git

cnpm install hexo-deployer-git --save

接下来使用 hexo deploy 或简写为 hexo d 进行部署:

这个时候可以看到 GitHub 的仓库里面已经有内容了:

接下来我们在这个仓库的 Settings 中找到 GitHub Pages 中选择 master 分支即可通过生成的连接进行访问了。这个时候如果把仓库设置为私有,那么便无法访问,之前要把仓库设置为 Public 的原因就是因为这个。

# Hexo 主题

Hexo 提供了许许多多好看的主题,这些主题内也集成了许许多多的功能,常见的有评论、搜索、RSS、数据统计与分析、代码高亮等等。不同的主题有不同的布局跟功能,这些都是由开发者开发并贡献的,当然你也可以自己开发,一般都会有如何使用该主题的使用文档。下面挑了几个我觉得比较好看的主题演示:

# Netlify

# 什么是 Netlify?

Netlify 是一个提供静态资源托管的网络平台,它的功能和上面的 GitHub Pages 一样,但是功能比 GitHub Pages 多一些,速度也会快一些,因为它会把网站静态网站部署到 CDN 上,还可以使用 HTTPS,当然现在 GitHub Pages 也支持 HTTPS。如果想让 GitHub 上的仓库变得私有且依旧能够访问,就需要使用 Netlify。

# 部署到 Netlify 上

使用 GitHub 账号登录:

登录之后点击醒目的绿色的 New site fomr Git 按钮来新建站点并选取刚刚创建的仓库:

默认可以不填,如果有其他需求,可以填写自己的自动部署命令等,点击部署:

点击完 Deploy site 之后,Netlify 会自动构建并发布你的网站内容,最重要的是,Netlify 还支持分支部署和部署预览,这样可以提高开发效率,降低发布风险和成本。当我还没有打完这行字,Netlify 已经完成网站的发布了,它会提供一个由随机字符串组成且以 .netlify.com 为后缀结尾的网站供你访问,如果你还没有购买域名,可以点击 Domain settings 进行域名的美化,现在把 GitHub 上面的仓库设置为私有,依然可以正常访问。

# 个性化

为了更好地理解域名、DNS 等内容首先抛出一个技术向的问题(当然可以跳过不看),这个问题也经常是面试问题:当你在浏览器中输入 URL(Uniform Resource Locator)回车之后发生了什么?比如我在浏览器中输入了 https://xyzlab.ai/index.html ,根据 URI 标准,它由以下几个部分组成:

  • 传输协议 (https)
  • 域名 (xyzlab.ai)
  • 路径 (/index.html)
  1. 根据域名获取服务器的 IP 地址,也称 DNS 解析

    DNS 就像一本很大的表格,记录了域名所对应的 IP 地址,首先浏览器中会有一个 DNS 缓存器,会记录我们之前一段时间访问记录中域名指向的 IP 地址,浏览器会现在自己的 DNS 魂村中查找这个域名,如果浏览器缓存中不存在,则会去系统缓存中查找,如果没有会去到路由器 DNS 缓存中查找目标域名与 IP 的映射,如果没有才会去 ISP 的 DNS 查找。

  2. 浏览器向服务器的 IP 端口号发起 TCP 三次握手建立连接

    • 先从客户端,这里指浏览器向服务端发送连接请求报文并进入 SYN_SENT 状态,让服务器知道我要发起连接,等待服务器确认
    • 等到服务器收到 SYN 包接受连接后回复一个 SYN + ACK 包并为这次连接分配资源,表示服务器知道你要发送数据,并且准备好接收数据,此时服务器进入 SYN_RECV 状态;
    • 客户端接收到 SYN + ACK 包后也向服务端发送确认包 ACK 并分配资源,当 ACK 包发送完毕之后,客户端与服务端进入 ESTABLISHED 状态,完成三次握手,这样 TCP 连接就建立了。
  3. 浏览器向服务器发送 HTTP 请求报文

  4. 服务器根据 HTTP 请求报文的参数找到请求的资源

  5. 服务器给浏览器发送 HTTP 响应报文,把资源返回给客户端

    常用的状态码:

    • 200:OK 成功
    • 302:Found 临时重定向
    • 400:Bad Request 请求报文中存在语法错误
    • 403:Forbidden 访问被拒绝
    • 404:Not Found 没找到
    • 500:Internal Server Error 服务器内部错误
    • 503:Service Unavailable 服务器超负载或在维护
  6. 浏览器渲染页面

  7. 通过四次挥手释放 TCP 连接

    • 客户端发送中断连接请求,也就是发送 FIN 结束报文。这个时候客户端就进入了 FIN_WAIT 状态,等待服务端的 FIN 报文。
    • 服务端发送 ACK 报文,服务端进入关闭状态,此时服务端会向上层应用发送通知,表明客户端数据已经发送完毕,是否需要发送数据给客户端了。
    • 当服务端确定数据发送完毕之后,就可以向客户端发送 FIN 报文了。
    • 客户端接收到 FIN 报文之后,知道服务端要准备断开连接了,客户端给服务端发送 ACK 报文之后进入 TIME_WAIT 状态,告诉服务端可以断开连接了,如果服务端没有收到 ACK 报文就重传,当服务端收到 ACK 报文之后就可以断开连接了。当客户端一段时间没收到回复,就知道服务端已经关闭,所以自己也可以关闭连接了。

我们会希望拥有自己的域名,这是一个类似于网名的东西,可以在阿里云腾讯云GoDaddy 等地方进行域名的注册,拿阿里云举例子,不同的域名会有不同的价格:

当选购好自己中意的域名之后,可以回到 Netlify 自定义域名,并可以开启 HTTPS:

具体设置可以参照 Netlify 的提示设置,比如 CNAME 记录类型可以将域名指向另外一个域名,A 记录类型则可以将域名指向一个 IPV4 地址:

到,博客就可以用自定义的域名去访问了。

# 参考资料

Hexo 文档

分清 URL、URL 和 URN