Hexo-零基础零成本使用Hexo + GitHub + Netlify + Cloudflare搭建快速、简介、高效个人博客手摸手搭建博客教程记录生活，分享点滴

Hexo 零基础零成本使用Hexo GitHub Netlify Cloudflare搭建快速、简介、高效个人博客全流程记录生活，分享点滴

在当今信息爆炸的时代，读者每天被算法大数据裹挟着，阅读着由机器算法推荐的各种内容，因为更加符合读者的爱好，胃口，也永远不会有刷完的时候；而创作者则更倾向于使用类似知乎，简书，微信公众号这样成熟的平台来分享，而没有考虑过自己搭建一个属于自己的个人博客分享。

在失业率居高不下和就业环境低迷的当下，很多人选择了自媒体赛道，而个人博客也是属于自媒体赛道当中的比较自由的一个，搭建一个属于自己的个人博客，不用注册众多平台的帐号，不用担心平台审核问题，不用担心文章或视频毫无征兆地消失，能完全地够展现自我，畅所欲言。

并且作为一个设计行业从业者，不能没有个人博客，在职的时候可以利用每天分享一些个人专业技能，或者感兴趣的技术文章，慢慢的积累和自己有共同话题，志同道合，爱好相同的朋友，互帮互助，相互取暖。失业的时候可以利用博客展示一些个人专业技能，积累有需求的潜在客户，接一些在家就能完成的工作，居家办公，也是一个不错的选择。

Hexo简介

Hexo是一个基于Node.js的快速、简洁且高效的静态博客框架。Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。它可以帮助用户轻松搭建自己的个人博客网站，无需数据库支持，只需要一些简单的配置就能够完成整个网站的构建。

相比于传统的动态博客系统，hexo具有更快的加载速度和更稳定可靠的性能。不仅如此，由于Hexo博客完全是个人搭建的，因此所有的内容都可以自定义，把它变成我想要的样子。对于小编这种喜欢折腾技术的来说，还是非常有吸引力的。

首先，作为一个开源项目，Hexo拥有活跃而庞大的社区支持，在GitHub上已经有超过2万星标。Hexo具备快速高效地生成静态页面功能。通过预编译技术，将Markdown格式文本转换成HTML页面，并使用模板引擎渲染出最终展示给用户浏览器看到的内容。这种方式使得在访问量较大时也不会影响网站运行速度。

其次，Hexo采用了分层设计结构，在保证代码质量和可扩展性方面做得非常出色。它由核心模块以及各种插件组成，在满足基础功能同时还可以根据需求进行二次开发，满足个性化的需求。

另外，Hexo提供了丰富多样的主题和插件选择。用户可以根据自己喜好来选择不同风格、布局的主题模板，并可以通过安装各种插件来增强网站功能。同时也支持自定义主题和插件开发，为用户提供更加灵活多变的使用体验。

除此之外，Hexo还具有简单易学、部署方便等特点。它基于Node.js平台开发，在Windows、MacOS以及Linux系统上都能够运行，并且拥有完善的文档和社区支持。用户只需要按照指引进行一些简单配置就能够轻松搭建属于自己的静态博客网站。

总而言之，Hexo作为一个高效、稳定、易用的静态博客框架，在帮助用户构建个人博客网站方面做得非常出色。无论是对于技术小白还是程序员大神们来说，都是一个值得尝试和推荐的工具。如果你也想要拥有一个快速加载、美观实用并且兼具个性化特色的博客网站，那么不妨考虑一下使用hexo这款优秀的静态博客框架吧！

Hexo特点

超快的速度：Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
支持 Markdown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
支持一键部署：只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台
超强的可扩展性和丰富的插件：强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成
丰富的主题支持

对于个人博客的搭建，其实有着非常多的选择余地，像动态的 Typecho，WordPress 等，还有静态的站点，如 Hugo，Jekyll 等。

这些选择各有各的优缺点，就比如动态站点拥有非常强大的交互能力，能够根据需求返回截然不同的页面，而毋须提前将其全部准备好，但是对服务器要求会比较高一些；而静态站点则正好相反，如果比较复杂，那么管理起来会比较困难，但是访问速度会非常快速（相对而言）。

此外，动态站点要么付费搭建在他人服务器上，要么自己购买服务器搭建，总而言之要么寄人篱下，要么费时费力，而静态站点则可以免费搭建在像 GitHub 这样的代码托管网站上，相对更为简单便捷。

准备工作

GitHub

搭建博客最简单快速的方式就是使用 GitHub Pages，但国内访问 github 的速度 😂；可能你会说 Coding Pages 在国内访问快，除了广告之外好像也没啥缺点，大伙也可以试试，但是这样就没折腾的乐趣了。

我们把 github 仅仅作为博客的托管仓库，不使用它的 GitHub Pages 部署，只要想个办法加速访问就可以了。

Netlify

Netlify 是一个提供静态网站托管的服务，提供 CI 服务，能够将托管 GitHub，GitLab 等网站上的 Jekyll，Hexo，Hugo 等静态网站。使用也非常简单。

可以托管静态资源
可以将静态网站部署到 CDN 上,加速国内访问
Continuous Deployment 持续部署,当你提交改变到 git 仓库,它就会自动运行 build command ,进行自动部署
可以添加自定义域名
可以启用免费的 TLS 证书,启用 HTTPS
最强大的 cms,用来管理静态资源
自带 CI、支持自定义页面重定向、自定义插入代码、打包和压缩 JS 和 CSS、压缩图片、处理图片

Cloudflare

Netlify 虽然已经提供了 CDN 加速，但在使用过程中发现国内访问还是比较慢，Cloudflare 相对于国内的七牛云、阿里云等云服务商的 CDN 速度会慢一些，但是它有免费版本，而且最重要的是域名不用备案。

开始安装

Hexo 生成博客项目

安装

npm install -g hexo-cli // or
yarn global add hexo-cli

初始化

hexo init "博客目录"
cd "博客目录"
npm install // or
yarn

.
├── _config.yml
├── package.json
├── scaffolds
│   ├── draft.md
│   ├── page.md
│   └── post.md
├── source
│   └── _posts
└── themes
    └── landscape

修改配置文件

_config.yml 全局配置文件，网站的很多信息都在这里配置，诸如网站名称，副标题，描述，作者，语言，主题，部署等等参数。

# Site
title: Hexo # 网站标题
subtitle: # 网站副标题
description: # 网站描述
author: John Doe # 作者
language: # 语言
timezone: # 网站时区。Hexo 默认使用您电脑的时区。时区列表。比如说：America/New_York, Japan, 和 UTC 。

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child'
## and root as '/child/'
url: http://yoursite.com # 你的站点Url
root: / # 站点的根目录
permalink: :year/:month/:day/:title/ # 文章的 永久链接 格式
permalink_defaults: # 永久链接中各部分的默认值

# Directory
source_dir: source # 资源文件夹，这个文件夹用来存放内容
public_dir: public # 公共文件夹，这个文件夹用于存放生成的站点文件。
tag_dir: tags # 标签文件夹
archive_dir: archives # 归档文件夹
category_dir: categories # 分类文件夹
code_dir: downloads/code # Include code 文件夹
i18n_dir: :lang # 国际化（i18n）文件夹
skip_render: # 跳过指定文件的渲染，您可使用 glob 表达式来匹配路径。

# Writing
new_post_name: :title.md # 新文章的文件名称
default_layout: post # 预设布局
titlecase: false # 把标题转换为 title case
external_link: true # 在新标签中打开链接
filename_case: 0 # 把文件名称转换为 (1) 小写或 (2) 大写
render_drafts: false # 是否显示草稿
post_asset_folder: false # 是否启动 Asset 文件夹
relative_link: false # 把链接改为与根目录的相对位址
future: true # 显示未来的文章
highlight: # 内容中代码块的设置
  enable: true # 开启代码块高亮
  line_number: true # 显示行数
  auto_detect: false # 如果未指定语言，则启用自动检测
  tab_replace: # 用 n 个空格替换 tabs；如果值为空，则不会替换 tabs

# Category & Tag
default_category: uncategorized
category_map: # 分类别名
tag_map: # 标签别名

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD # 日期格式
time_format: HH:mm:ss # 时间格式

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 # 分页数量
pagination_dir: page # 分页目录

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: landscape # 主题名称

# Deployment
## Docs: https://hexo.io/docs/deployment.html
#  部署部分的设置
deploy:
  type: # 类型，常用的git

scaffolds

scaffolds 是“脚手架、骨架”的意思，当你新建一篇文章（hexo new ‘title’）的时候，hexo 是根据这个目录下的文件进行构建的。基本不用关心。

source

这个目录很重要，新建的文章都是在保存在这个目录下的. _posts 。需要新建的博文都放在 _posts 目录下。

_posts 目录下是一个个 markdown 文件。你应该可以看到一个 hello-world.md 的文件，文章就在这个文件中编辑。

_posts 目录下的 md 文件，会被编译成 html 文件，放到 public （此文件现在应该没有，因为你还没有编译过）文件夹下。

themes

网站主题目录，hexo 有非常好的主题拓展，支持的主题也很丰富。该目录下，每一个子目录就是一个主题。

生成文章

hexo new post "第一篇博客" // 会在 source/_posts/ 目录下生成文件 ‘第一篇博客.md’，打开编辑
hexo g // 生成静态HTML文件到 /public 文件夹中
hexo s // 本地运行server服务预览，打开 http://localhost:4000 即可预览你的博客

可查看官网详细的 CLI 命令

添加 npm script

// package.json
scripts: {
  "build": "hexo generate",
  "clean": "hexo clean",
  "server": "hexo server",
  "netlify": "npm run clean && npm run build"
}

托管到 Github

创建仓库 | Create a new repository
本地项目推送到远程服务器

git init
git add .
git commit -m "my blog first commit"
git remote add origin git@github.com:【你的 github 名字】/【你的 repository 名字】.git
git push -u origin master

连接 Netlify

注册 Netlify 并登陆
创建 site

连接 github

选择刚刚上传的项目

选择构建分支、构建命令和静态文件目录，点击 Deploy site 发布

等构建结束后，会看到这里有个网址，打开就是你的博客了

可以点击下方 Domain settings，自定义二级域名

可以欣赏你的博客了

之后每次对 master 分支提交 commit 时都会触发 Netlify 自动构建。

很多博文都让大家安装 hexo-deployer-git 这个依赖包，这个包把 public 文件夹提交到单独的分支，然后 Netlify 绑定到这个分支，不需要 Netlify 构建，完全把 Netlify 当做静态文件托管，把 CI 功能舍弃掉了。

买域名

购买域名
配置域名解析

按照下图设置 CNAME，指向 Netlify 里设置的域名

稍等会就可以正常访问了

Cloudflare 加速

注册 Cloudflare 并登陆
添加站点

选择免费套餐
添加 DNS 记录

我们在上面提到域名解析的时候已经提到 CNAME 类型了，这里又出现了 A 和 AAAA，除此之外还有很多其他类型，有兴趣可以查资料了解下。 DNS 的作用就是把域名翻译成 IP 地址，所以一般在做域名解析的时候，需要添加 A（IPV4）或者 AAAA（IPV6），把域名指向 IP 地址。但有的时候会需要设置多个域名指向同一个 IP 地址的情况，这时我们就可以把其他的域名的解析设置成 CNAME 类型，并填写记录值为那个设置了 A 或 AAAA 直接指向 IP 地址的域名。这样可以避免服务器 IP 变更需要重新设置多个域名解析。直白点说 A 或 AAAA 就是域名直接指向 IP，CNAME 就是域名指向另一个域名。

一般情况下 Cloudflare 会检测出来几条 DNS 记录，类型大多数是 A，或者 AAAA，由于我们是转发，所以应该是 CNAME 类型才对。所以全部删除，手动添加。

CDN 加速往往有两种方式，一种是 CDN 服务商提供一个域名，然后设置你的域名 CNAME 指向这个加速域名；另一种是 CND 服务商提供几个 NS（DNS 解析服务器）地址，然后覆盖你的域名的 NS 地址。Cloudflare 就是采用的后者

如图，把名称替换成你的域名，内容填你的博客的 Netlify 地址。 www 的名称不用修改，修改内容同上。

修改 NS

在你的域名服务商那里修改 dns 解析服务器为 cloudflare 提供的地址，修改完成后点击完成。

设置强制 HTTPS，文件压缩等

点击完成，设置完毕，NS 方式修改的生效时间会比较长一些，官网上说 24 小时以内，不过一般不会这么长时间，耐心等待下。成功之后 Cloudflare 会发一封邮件给你，或者重新登录控制台也能看到。
检验成果

返回头部的 server 字段从 Netlify 变成了 cloudflare，速度应该快很多了。

至此，🎉 恭喜，你的博客已经搭建完毕，现在可以开始写文章了。

换主题 | Theme

hexo 默认的主题样式欣赏不来，社区里有很多主题可以下载。我使用的是简约的 next 主题。

设置步骤如下：

GitHub 里 fork 主题项目到你的仓库
在你的 hexo 项目里执行

git submodule add git@github.com:【fork的项目】.git themes/【主题的名字，例如 next】

git submodule 的使用方式可以 google 了解下。

修改根目录 _config.yml 文件的 theme 的值为你使用的主题名字
本地看效果

npm run netlify
hexo s

主题的文件夹里也有 _config.yml，这个是主题的配置文件，根据你的喜好自定义。
提交 commit 到远程服务器，更新线上博客。

打开博客发现并没有更新主题，查看 netlify 构建日志发现失败了，提示没有 submodule 的主题项目的权限：

需要添加 Deploy key 到 GitHub

重新构建，成功访问，清理浏览器cookie，线上博客主题已更新。

添加博客评论 | Gitalk

callback 务必填写你的域名，这样评论里 github 登录后才能正确回跳到你的博客。

部署到线上后，在你的文章底部就会出现 gitalk 的组件，但是会发现存在这样的情况：

有的会报错 network error

原因如下：

hexo 的全局配置 _config.yml 里关于文章 url 路径的配置是这样：

permalink: :year/:month/:day/:title/

如果你的文章 title 是中文，这会导致你的文章地址栏的地址很长。这会带来两个问题，第一如果修改了文章 title，原来的地址就失效了，SEO 也没了。第二就是 gitalk 需要在 GitHub 中创建 issue，而 issue 的 label 长度必须小于 50，而 gitalk 会拿地址栏的 path 作为 label，所以会导致 gitalk 连接失败。

使用 hexo-abbrlink 插件，解决 path 超出：

npm i hexo-abbrlink --save-dev

修改_config.yml

# abbrlink config
abbrlink:
  alg: crc16 #support crc16(default) and crc32
  rep: hex #support dec(default) and hex

# 更改 permalink 值
permalink: p/:abbrlink.html

重新运行静态构建