使用github及vercel搭建Hexo个人博客

1. 前言

花了几天时间，使用Hexo的博客框架搭建了一个个人博客网站:Learn365.Top.
基本流程：使用Hexo博客框架，提交代码托管在Github Pages，然后通过Vercel自动部署网站。

几个为什么：

  1. 为什么不用市面上的各种博客平台如：csdn 简书？
    博客源文件存储于平台，电脑本地没有备份。而且平台会有各种限制及广告。
  2. 为什么不用自己的服务器搭建？
    需要搭建网站平台，需要精力去维护服务器。
  3. 为什么不使用Hexo 加 Gitee Pages,Coding Pages等静态托管服务？
    各种限制，Gitee Pages 绑定域名需要高级版。 Coding pages+持续集成部署虽然也很方便，但是需要绑定腾讯的存储服务和CDN分发服务，不确定费用情况。
  4. 为什么使用Hexo+ Github + Vercel?
    Hexo是个轻量级的博客框架，支持Markdown写文章。写好文章本地提交到Github后，Vercel能够自动部署。支持绑定域名且无需备案，自动生成证书。所有这一切都是免费的。

1.1 什么是 Hexo？

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。官方提供了300+的主题模板。

1.2 什么是 Vercel？

vercel是类似于Github的网站托管服务。将Github授权给vercel后，本地代码推送到Github后，vercel会根据你的网站框架类型自动识别并部署生成静态网页。而且vercel的绑定域名和生成证书非常方便。最重要的是国内访问网站速度非常快。

2. Hexo搭建步骤

2.1 安装Git

参数Hexo官方文档。Windows版本：下载并安装 git.

2.2 安装nodejs

Node.js 为大多数平台提供了官方的 安装程序。下载并安装。

2.3 安装hexo

打开命令行,安装hexo框架：

1
npm install -g hexo-cli

安装完hexo框架后，新建一个myblog(名字自己随便取)的文件夹，并用hexo命令初始化一下：

1
hexo init myblog

进入myblog 文件夹，安装node modules依赖组件模块: 

1
2
cd myblog 
npm install

以上步骤一个基本的博客就搭建好了。

接下来启动服务：

1
hexo server

打开hexo的服务，在浏览器输入localhost:4000就可以看到你生成的博客了。

2.4 将hexo本地文件提交GitHub

接下来需要把本地的博客文件源码提交到Github托管。

前提是你需要有一个自己的Github帐户，创建代码仓库，生成SSH添加到github等。然后将本地的文件提交到github建立的代码仓库。这些都Github使用的基础知识，这里不详细展开。

2.5 配置vercel部署，绑定域名

Github配置完毕后，就可以进入Vercel官网，使用Github的帐号登录:

在vercel的Overview菜单下，点击按钮 New Project

在Import Git Repository选项下，选择需要导入的项目，这里选择之前github建立的博客仓库，然后Import

vercelimport

然后一直下一步，直到deploy。

deploy完成后，可以在Overview菜单下，看到新建的项目,至此项目已经创建完成，可以通过vercel自动配置的子域名访问了：

image-20210322002115206

接下来是绑定自己的域名，前提是自己得先在域名提供商处买一个域名，然后才可以进行绑定域名操作：

首先点击Domains菜单下的的Add按钮

image-20210322012310611

在添加域名页面选项需要绑定的项目，然后下一步：

image-20210322012344189

接下来输入自己的域名。

image-20210322012357568

完成后会跳转到域名配置信息页面,点Nameservers，获得DNS信息。

image-20210322012434299

将Vercel处获得的DNS服务信息配置到自己的域名控制台的DNS处，我的是阿里云的域名管理平台，配置如下：

image-20210322013138179

域名绑定完成，Vercel会自动生成SSL证书。等待十几分钟待配置生效后，就可以用我们的域名访问网站了。

至此博客搭建基本完成，后续需要修改网站时，只需将最新的变更提交到Github上，Vercel会自动同步过来并部署，不需要再做额外的步骤。

最后用站长站的网站测速工具国内测速测试一下速度：

网站打开速度飞快。

3. Hexo基本配置

博客框架搭建好，接下来是博客的主题更改，以及日常博客的增删改，图片上传优化等配置。

3.1 Hexo更换主题

  1. 打开Hexo官网的主题的界面，选择喜欢的，然后点击名称跳转到GitHub仓库选择下载或者克隆对应的zip文件到本地，并且解压到网站目录下的themes目录。

  2. 修改主题的自带配置文件**_config.yml**,将theme属性值改成下载的主题目录名称即可。

    1
    theme: hexo-theme-landscape

3.2 Hexo新增博客

新建博客文章时，可以使用如下命令，会在source\_posts的目录生成新的md文件。

1
hexo new 'your blog title'

在文章的 front-matter 中可以修改文章标题、时间，添加分类和标签等属性。

1
2
3
4
5
6
7
title: your blog title
date: 2021-03-18 21:55:19
categories:
- blog
  tags: 
- hexo
- blog

3.3 Hexo博客中插入本地图片

一般情况在写博客时，如果是从外链插入的图片，不会有什么问题。但是如果是从本地引入的图片时，部署后会访问不了。需要配置以下几个步骤：

  1. 安装hexo-asset-image插件：
1
npm install https://github.com/7ym0n/hexo-asset-image --save

  1. 然后修改网站配置文件中的代码：post_asset_folder: true

  2. 然后在网站目录下运行Git Bash Here，执行命令:

    1
    hexo new 'your blog title'

    运行成功之后就会在网站下的source/posts中分别生成对应的Markdown文件与同名空目录；你的博客文章直接在生成的*.md文件中编辑，而引用的图片则以Markdown标准形式![]*(图片的相对路径)的形式进行，这里的图片路径需要注意要采用相对路径，即(注意需要将‘’转变为’/‘)

    1
    /your blog title/picture's name.png/jpg

如果你的是Typora的Markdown编辑工具，则在偏好设置里的图像配置中，下拉框选择复制到指定路径,并将前三个选项勾选上。

image-20210322004952738

image-20210322005017329

配置完成后，后续引用本地图片时会自动将图片COPY到博客文章的同名文件目录下。也可时直接将截图粘贴到文件内容内，图片也会自动保存到博客文件的同名目录下，非常方便。

3.4 文章隐藏功能

在用Hexo写博客文章时，有些文章不想对外开放，于是想到给文章加上隐藏功能。

实现这个功能使用了Hexo 插件 **hexo-hide-posts**，网上也有其它实现的方法，感觉用这个插件比较简单。

安装

1
$ npm install hexo-hide-posts --save

使用

在文章的 front-matter 中添加 hidden: true 即可隐藏文章。

比如我们隐藏了 source/_posts/lorem-ipsum.md 这篇文章：

1
2
3
4
5
---
title: 'Lorem Ipsum'
date: '2021/3/10 11:45:14'
hidden: true
---

重新部署后，加上这个标签的文章就不会显示出来了。

4. Hexo扩展

4.1 百度统计

百度统计是百度推出的一款免费的专业网站流量分析工具，提供的功能包括：流量分析、来源分析、网站分析等多种统计分析服务。

登录百度统计，添加自己的网站，然后在代码获取处获得统计脚本。

image-20210322213231470

把代码复制到footer.ejs文件中，然后再进行一下安装检查，半小时左右就可以在百度统计里面看到自己的网站信息了。

4.2 百度Google收录

  1. 登录百度站长平台添加网站

登录百度搜索资源平台——点击用户中心——点击站点管理——添加网站，输入需要验证的网址

image-20210322222803310

验证网站有三种方式：文件验证、HTML标签验证、CNAME验证。这里我选择第二种HTML标签验证方式。将百度提供的脚本添加到网站的head 文件头中，然后在百度平台验证网站。

image-20210322225856845

  1. 提交链接

需要使用npm自动生成网站的sitemap，然后将生成的sitemap提交到百度和其他搜索引擎。

分别安装百度和google插件

1
2
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

在博客目录的_config.yml中修改或者如下代码：

1
2
3
4
5
6
7
8
# URL 改成自己网站URL 
url: https://learn365.top

# 自动生成sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

然后hexo编译的时候会自动在根目录生成站点地图。

然后就可以向百度提交你的站点地图了。把两个sitemap地址，提交上去。过个十天半个月再去site:<域名>看看有没有被收录。

image-20210323001214956

google的SEO流程一样进入google站点地图，提交网站和sitemap.xml，就可以了。

4.3 访问量和访问人次统计

访问量和访问人次统计使用不蒜子的极简网页计数器，在footer.ejs加入以下脚本即可：

1
2
3
4
5
6
7
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div>
    <span id="busuanzi_container_site_pv"> 访问 <a href="#" target="_blank">
    <span id="busuanzi_value_site_pv"></span></a> 次 </span>
    <span id="busuanzi_container_site_uv"><a href="#" target="_blank">
    <span id="busuanzi_value_site_uv"></span></a> 人</span>
</div>

5. 参考

hexo史上最全搭建教程 https://blog.csdn.net/sinat_37781304/article/details/82729029

Hexo | NexT打造一个炫酷博客 https://blog.csdn.net/u012294515/article/details/83094693

打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化 https://io-oi.me/tech/hexo-next-optimization/

【搜索优化】Hexo-next百度和谷歌搜索优化 http://www.ehcoo.com/seo.html