博客搭建运行环境配置，Hexo框架的安装、部署到GitHub仓库，以及GitHub的二级域名访问博客

简单介绍

  • Hexo

    Hexo是一个快速、简洁、高效、开源、有多种主题的博客框架，Hexo使用Markdown或者其他渲染引擎解析文章，在几秒钟内即可生成与主题一样靓丽的静态网页

搭建环境

安装Node.js

  • Node.js安装方法网上有很多而且很详细，本文不记录，大概步骤官网下载最新版，一直下一步安装，不更改任何设置与安装位置，Hexo运行必须用到Node.js环境

安装Git

  • Git安装方法网上也很多很详细，本文不记录，官网下载很慢可能还访问不了，推荐镜像源下载，安装方法也是下载最新版，一直下一步安装，不更改任何设置和安装位置，Git是一个分布式部署的工具，后面Hexo安装、插件安装、Next主题下载、发布文章、上传GitHub等等都需Git

搭建优化

编辑器安装

  • Visual Studio Code
  • Visual Studio Code编辑器功能强大，体积小，拥有各种编程语言插件，编辑器需要经常用到，安装方法直接下载安装

安装淘宝镜像源

  • CMD执行以下命令
1
npm install -g cnpm --registry=https://registry.npm.taobao.org
  • hexo博客框架，Next主题，各种插件大部分都发布在GitHub，访问下载特别慢还可能失败，所以更换国内的淘宝镜像源下载，更改之后需要注意
1
原：nmp install 更改为 新：cnmp install #就是安装命令的前面加一个“C”

Git绑定

GitHub注册

  • GitHub账号注册非常简单，如果访问GitHub失败，可以使用Fastgithub 默认密码：1234加速访问工具

生成公钥

  • CMD执行以下命令，生成ssh key
1
ssh-keygen -t rsa -C "你GitHub绑定邮箱.com"
  • 密钥生成的路径为
1
C:\Users\你的用户名\.ssh\id_rsa.pub

GitHub填写密钥

  • 记事本或者编辑器打开生成的公钥，复制里面所有内容

  • 登录GitHub，点击头像➡️Settings➡️SSH and GPG keys➡️New SSH key➡️把公钥内容粘贴进去➡️点击Add SSH Key

  • CMD执行以下命令，查看是否绑定
1
ssh -T git@github.com
  • 若回复输出以信息下即为绑定成功
1
Hi 你GitHub名字! You've successfully authenticated, but GitHub does not provide shell access.

创建博客仓库

  • 登录GitHub➡️首页点击cerate a new repository 创建仓库➡️设置Repository name仓库名称
  • 仓库名称格式：GitHub用户名.github.io
  • 例如：dao943.github.io
  • 必须选择Public开源➡️点击Creating repository完成创建

配置Git

  • 右键Git Bash Here打开Git依次执行以下命令
1
git config --global user.name "你GitHub用户名"
1
git config --global user.email "你GitHub绑定邮箱.com"

Hexo安装

全局安装

  • 管理员身份运行CMD，执行Hexo全局安装命令
1
cnpm install hexo-cli -g
  • 继续执行以下命令，查看是否安装成功，出现版本号即为安装成功
1
hexo -v

初始化博客

  • 创建存放博客文件夹➡️打开文件夹➡️右键Git Bash Here打开Git

  • 执行初始化命令（Git不能使用快捷键复制与粘贴，右键选择paste即为粘贴）

1
hexo init

  • 如果出现报错，前面步骤没有任何改动或者做错，那大概率是网络问题，解决办法多试几次或者使用Fastgithub 默认密码：1234加速访问工具

  • 回复输出以下信息为初始化成功

1
INFO Start blogging with Hexo！

配置Hexo

  • 打开博客文件夹下的config.yml的配置文件，找到deploy，更改如下
1
2
3
4
deploy:
  type: git
  repo: git@github.com:你GitHub用户名/你GitHub用户名.github.io.git #部署的GitHub仓库地址
  branch: master #分支名称

安装部署插件

  • 博客文件夹下，右键打开Git执行以下命令
1
cnpm install hexo-deployer-git --save

博客本地预览

  • 博客文件夹内右键打开Git，依次执行以下命令
1
hexo g
1
hexo s
  • 浏览器网址输入http://localhost:4000/，即可本地预览搭建的博客

部署仓库

  • 博客文件夹内右键打开Git，依次执行以下命令
1
hexo clean
1
hexo g
1
hexo d
  • 稍等一会，就可以用GitHub二级域名访问了
  • 例如：http://你的GitHub用户名.github.io

学习知识

_config.yml文件

博客目录的_config.yml 主题目录的_config.yml
主要配置博客的配置文件，通常叫站点配置 主要配置主题的配置文件，通常叫主题配置

博客目录

名称 解释
node_modules 存储已安装的各类依赖包
package.json Hexo的版本以及相关依赖包的版本信息
scaffold page，post，draft三种模板
themes 主题文件夹
source 资源文件夹，图片、文章、页面等
public 渲染好的index.html文件夹
.deploy_git 提交到Github后生成
  • 部署原理：source➡️public ➡️ .deploy_git

部署命令

  • 清理本地缓存
1
hexo clean
  • 生成静态文件
1
hexo g
  • 本地预览（部署时可以略过）
1
hexo s
  • 上传远程源码仓库（报错说明要安装插件）
1
hexo d

常用命令

  • 新建文章
1
hexo new 文章名称
  • 新建页面
1
hexo n page 页面名称

基本配置

站点配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# 站点信息
title: #博客标题
subtitle: #博客副标题
description: #博客说明
keywords: #博客关键词，主要用于SEO
author: #作者名称
language: # 主题语言，如：zh-CN
timezone: #时区，如：Asia/Shanghai

# 站点链接
url: #绑定的域名
permalink: #文章永久链接格式，如：:year/:month/:day/:title/

# 代码高亮
highlight:
  enable: true #是否开启代码高亮
  line_number: true #是否增加代码行号
  auto_detect: true #自动判断代码语言

# 首页博客布局
index_generator: 
  path: '' #博客的默认路径
  per_page: 10 #每页博客数量上限
  order_by: -date #博客排序

# 时间格式
date_format: YYYY-MM-DD #博客日期格式
time_format: HH:mm:ss #博客时间格式

# 主题名称
theme: **** #主题的名字

# 部署模块
deploy:
  type: git #部署方式
  repo: 
    github: https://github.com/GitHub名称/GitHub名称.github.io.git #远程仓库地址
  branch: master #仓库分支

# 搜索功能
search:
  path: ./public/search.xml
  field: post
  format: html
  limit: 10000 #最大搜索数量

搜索功能

  • 博客目录右键打开Git，安装插件模块
1
cnpm install hexo-generator-searchdb --save
  • 站点配置文件，增加以下内容到最后位置
1
2
3
4
5
6
# Local Search搜索功能
search:
  path: search.xml
  field: post
  format: html
  limit: 10000
  • 主题配置文件，启动搜索功能
1
2
3
# Local search
local_search:
  enable: true