前言

Hexo是基于Node.js构建简洁高效的博客框架。用户可使用 Markdown 编写文章内容,Hexo 使用 Markdown解析文章,几秒内即可利用靓丽的主题生成静态网页。支持丰富的主题与插件,主题用于页面展示效果,插件用于实现博客的特殊功能 如:文章及内容搜索、图片懒加载、一键远程部署等。

准备

  • 一台电脑

  • 勤劳的双手

搭建 Hexo 博客站

先安装Node.js

因为Hexo是基于Node.js的,所以在安装Hexo之前我们需要安装Node.js

大家可以去官网下载长期维护版安装使用,因为Hexo 需要Node.js 版本不低于 10.13,建议使用 Node.js 12.0 及以上版本,如果电脑上有低版本的Node.js,非常推荐大家通过nvm工具统一管理。我这里使用的版本是Node.js 12.22.12

下载安装后,按下 Windows + R 打开窗口,输入cmd并回车,打开命令提示符,依次输入以下命令查看版本号,能看到版本号的话代表安装成功!

1
2
node -v
npm -v

查询结果和你安装的版本号一致

安装Hexo

在安装Hexo之前需要先修改一下npm的镜像,使用如下命令

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

执行如下命令,进行Hexo的全局安装

1
npm install -g hexo-cli

执行如下命令,进行版本的查看

1
hexo -v

出现以上的信息Hexo就安装成功了

初始化Hexo博客目录

现在需要建立一个文件夹用来存放你的博客文件,我这里用的D:\Blog_test作为博客目录,现在需要从命令行进入到这个目录

依旧是按下Windows + R 打开窗口,输入cmd并回车,打开命令提示符,使用cd进入到我们的博客目录,如果目录不在C盘的在D盘的话,还需要加/d这个参数

1
cd /d D:\Blog_test

通过此电脑进入到相对应的目录中,点击位置的地方直接,把D:\Blog_test删除键入cmdEnter键便可以进入到相对应的目录

在这个目录的命令行中,输入hexo init初始化你的博客目录,等待几分钟

1
hexo init

在博客根目录下我们常常需要用到的命令有

常用命令 简写 中文含义
hexo server hexo s 本地启动
hexo generate hexo g 生成静态文件
hexo deploy hexo d 部署网站
hexo clean 清除缓存和已经生成的静态文件

初始化之后我们需要安装相关依赖,并且生成静态文件,依次在博客目录命令行中执行以下命令

1
2
npm install
hexo g

命令执行完成后,进入到你自己建的目录中,我的是D:\Blog_test,可以看见已经初始化生成一些文件了

  • node_modules:是项目包含依赖的模块
  • public:执行hexo g生成静态文件存放的位置
  • scaffolds:用来存放创建分类、标签和文章的一些模板
  • source:包含生成网页所需要的文件,其中就有我们花心思写的Markdown文章,里面的_posts文件夹用来存放你的文章(初始化后你会发现已经有一个hello-world.md文件)
  • themes:用来存放一些主题
  • _config.yml博客的配置文件
  • _config.landscape.yml默认主题landscape的配置文件

运行Hexo

在博客目录的命令行中输入hexo s启动博客,在浏览器中打开 http://localhost:4000 预览页面效果,默认是4000端口,也可以通过hexo s -p 端口号指定端口启动

1
hexo s

这样简单的博客就本地启动成功啦!

简单修改网站信息

打开博客的的配置文件_config.yml,简单的修改第5行# site里面的一些内容即可

例:

1
2
3
4
5
6
7
title: TZY  博客
subtitle: ''
description: 当然要记录啦
keywords:
author: Resuni Tang
language: zh-CN
timezone: Asia/Shanghai

修改之后按ctrl + c停止项目,然后输入hexo s重启项目,页面就发生了对应的变化

附上:_config.yml官方文档

部署上线

Hexo博客部署到Github上让他人能访问你的博客

什么是Github

Github是一个面向开源及私有软件项目的托管平台,因为只支持Git作为唯一的版本库格式进行托管,故名GitHub。简单来说,GitHub是一个代码托管云服务网站,帮助开发者存储和管理其项目源代码,且能够追踪、记录并控制用户对其代码的修改。甚至你可以简单粗暴的把它当作一个网盘,用来存储任何东西。

注册Github

进入Github官网,右上角Sign up注册并登入,记住用户名和注册邮箱

安装Git

直接从Git官网下载安装程序,然后安装默认选项安装即可,安装完成之后,在桌面右击出现Git Bash Here,如下图所示说明安装成功!(失败的话可以参照Git安装教程

点击Git Bash Here,之后进行将Github的用户名和邮箱配置到Git

在出现的页面依次输入以下命令

1
2
git config --global user.name "你的用户名"
git config --global user.email "注册邮箱"

配置完成后可以通过以下命令查看是否配置正确

1
2
3
4
//使用这行命令查看全局配置
git config --global --list
//使用这行命令查看全部配置
git config --list

如果发现用户名或者邮箱填写错误,可以通过以下命令修改

1
2
3
4
//使用这行命令修改你的用户名
git config --global --replace-all user.name "你的用户名"
//使用这行命令修改你的邮箱
git config --global --replace-all user.email "你的注册邮箱"

创建Github仓库

登入Github之后,在首页点击右上角的加号,点击New repository,创建新的仓库

仓库名命名规则:你的用户名.github.io,必须是用户名.github.io后缀!!!例如我的用户名是TResuni,那么我的命名就是TResuni.github.io

创建完之后进入仓库,可以看到我们仓库的HTTPS地址,复制这个地址,后面会使用Git通过这个地址将我们的代码推送到这个地方,下面截图是我自己的仓库,新建的仓库是没有内容的

部署

回到我们的博客目录,比如上面我的博客目录是D:\Blog_test,鼠标右击,点击Git Bash Here,后面的操作都在这里

推送之前我们需要先安装hexo-deployer-git

1
npm install hexo-deployer-git --save

然后在博客目录中,修改博客的配置文件_config.yml,如果有这个配置直接修改就行,没有的话可以直接复制添加改配置,repo替换成上面你自己复制的链接

1
2
3
4
deploy:
type: git
repo: https://github.com/TResuni/TResuni.github.io.git
branch: master

修改保存然后退出,回到上面的Git Bash Here中,依次输入以下命令

1
2
3
hexo clean
hexo g
hexo d

选择Sign in with your browser

点击Authorize GitCredentialManager

耐心等待一会即可!

有梯子的点开

众所周知,Github对国内用户不友好,如果你有梯子的话,那么Git推送代码将会更顺利啦

Git Bash Here界面上,输入以下命令,socks5http代理选一个就行,因人而异,我使用http代理可以,使用socks5代理不行。

1
2
3
4
5
6
7
8
9
10
11
# 以下使用socks5代理
git config --global http.proxy socks5://127.0.0.1:1086
git config --global https.proxy socks5://127.0.0.1:1086

# 以下使用http代理
git config --global http.proxy http://127.0.0.1:1087
git config --global https.proxy https://127.0.0.1:1087

# 取消代理
git config --global --unset http.proxy
git config --global --unset https.proxy

后面的地址填写电脑设置中的代理

经过以上的配置你会发现代码推送出错的概率大大降低

经过上面的步骤,我们的博客已经部署到Github上去啦,只需要输入我们的仓库名就可以访问我们的博客啦,或者可以在仓库中的设置,找到Pages,点击即可

现在可以将你的博客地址发给你的小伙伴们啦