Hexo博客环境搭建

本文介绍在Linux、Windows完成Hexo博客的搭建,包括安装和配置Hexo,将博客部署到github,使得可以通过github page的方式进行访问博客

系统环境

本系列文章所有操作在系统Linux Mint 20 Cinnamon及windows上完成,其他关联应用版本为:

1
2
3
4
node
npm
hexo
git

安装Hexo

安装nodejs

Hexo是基于nodeJS编写的,所以需要安装nodeJs,npm是nodejs的包管理工具,新版本的nodejs包含该工具,不需要单独安装

Linux安装

1
2
sudo apt install nodejs
sudo apt install git

Windows安装

  1. 安装nodejs:从https://nodejs.org/en/下载nodejs的msi安装文件,双击默认选项安装
  2. 安装git:从https://git-scm.com/download/win下载git的exe安装文件,双击默认选项安装

配置npm镜像[1][2]

npm是nodeJs的包管理工具,用于从NPM服务器下载第三方包到本地使用或上传自己编写的包,但是国内直接使用npm的官方镜像往往较慢,因此建议使用淘宝镜像,可以通过两种方式达到这个目地:

  • 更改npm的默认镜像
1
2
3
4
5
6
7
8
#查看当前镜像地址
npm get registry

#设置为淘宝镜像
npm config set registry http://registry.npm.taobao.org/

#还原为原始配置
npm config set registry https://registry.npmjs.org/
  • 安装淘宝定制的cnpm工具
1
2
3
4
5
# 安装cnpm工具
npm install -g cnpm --registry=https://registry.npm.taobao.org

#使用cnpm工具
cnpm install [name]

博客初始化

安装hexo

通过npm工具安装hexo,使用命令

1
npm install -g hexo

博客初始化

使用hexo初始化博客,初始化文件夹为空或不存在

1
2
#初始化+安装npm
hexo init myblog;cd myblog;sudo npm install

安装完成后,得到以下文件结构

测试博客

在新建的博客目录下,使用以下命令测试博客是否初始化完成

1
hexo server

浏览器打开:http://localhost:4000/后,得到以下页面,表面博客初始化成功

发布博客到Github Page

配置本地及github

为了将博客部署到github,需要在本地生成SSH key,并将公钥配置到github

本地生成公钥及密钥

使用以下命令,一直回车生成公钥和密钥

1
ssh-kengen -t rsa -C "yourmail"

生成之后的公钥及密钥保存在目录~/.ssh内,其中id_rsa为私钥,不可泄漏,id_rsa.pub为公钥,将配置到github上,上传代码时,公钥和私钥相互匹配,才能顺利上传代码。

公钥配置到github

登录github后,依次进入Settings->SSH and GPG keys,然后点击New SSH key,将公钥文件id_rsa.pub里面的内容全部填到Key

测试是否配置成功

使用以下命令检查,配置是否成功

1
ssh -T git@github.com

安装部署插件

通过npm安装git插件,以便进行github部署

1
npm install hexo-deployer-git --save

新建github pages仓库

推送前需先新建一个用于存储博客的仓库,该仓库为用户的github page(GitHub Pages is a static site hosting service designed to host your personal, organization, or project pages directly from a GitHub repository)[3],以下两个操作完成此步骤:

  1. 新建一个公开(Public)仓库,仓库名为你的用户名.github.io
  2. 进入仓库的Settings,找到Github Page,在Source选择分支,并保存
  3. 浏览器访问https://[YourUserName].github.io/,成功访问即配置成功(这可能需要科学上网)

设置博客部署仓库

将远程仓库地址配置到博客配置文件中,部署时往此仓库推送,打开_config.yml文件,在最后找到Deployment配置项,按以下方式配置:

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/[YourUserName]/[YourUserName].github.io.git
branch: master

推送博客到github pages仓库

使用以下命令推送hexo博客到github page仓库上

1
hexo clean;hexo generate;hexo deploy

在浏览器上再次访问https://[YourUserName].github.io/,出现以下画面表示成功

绑定域名

每次访问博客,均需使用https://[YourUserName].github.io/打开,本着装逼的原则,申请一个个人使用的域名,即可以便于记忆/宣传,又隐藏博客在github page的行为,代价是需要RMB(一年几十)。

申请域名

我是在腾讯云申请的域名,阿里云也可以通过申请,访问:https://dnspod.cloud.tencent.com/,搜索自己计划使用的域名,选择完成后付费,完成实名认证+备案,即可使用。

完成域名申请后,需配置域名的解析地址,按照以下方式添加两个记录

image-20210218163454662

绑定域名

通过以下两个步骤完成域名的绑定

1.配置Hexo博客

在hexo/source目录下新建一个名为CNAME的文件,然后将申请的域名填写到里面

2.配置Github Pages

到仓库的Github Pages页面,在Custom domain配置申请的域名(注意:配置成功后不会立马生效)

image-20210218165026184

在浏览器上通过申请的域名访问博客,如果成功,则配置成功!!!

发文流程

使用以下命令新建一个博文,然后使用markdwn格式写博文,再然后部署到github pages上

1
hexo new "文件名.md"

遇到的问题

1.sudo npm install -g hexo遇到rollbackFailedOptional: verb npm-session[4]

原因:(1)网络原因;(2)未配置国内镜像服务器;

解决:配置npm使用淘宝镜像服务器

1
npm config set registry http://registry.npm.taobao.org

参考资料[5][6][7][8]


  1. NPM 使用介绍 ↩︎

  2. npm的镜像替换成淘宝 ↩︎

  3. What is GitHub Pages? ↩︎

  4. npm install rollbackFailedOptional: verb npm-session ↩︎

  5. 使用hexo+github搭建免费个人博客详细教程 ↩︎

  6. 超详细Hexo+Github Page搭建技术博客教程【持续更新】 ↩︎

  7. hexo史上最全搭建教程 ↩︎

  8. 这可能是迄今为止最全的hexo博客搭建教程 ↩︎