hexo博客搭建

hexo博客搭建

六月 20, 2022
该文章更新于 2022.06.24

Hexo博客搭建

前言

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

优点

  • 纯静态文件，打开速度快。(推荐使用typero编辑markdown文件配合picgo搭建图床)。

  • 不依赖服务器，托管到Github pages或者coding.net 不需要主机费用或者是空间费用。

  • 内容修改很方便。直接在编辑器替换就行，不用连数据库更新数据。

缺点

  • 必须在部署 Node.js、Git 的电脑环境写文章。(只能在部署了博客的电脑写文章，多台电脑部署需要新建一个branch，本文没介绍)

  • 没有原生浏览数统计、没有评论功能。(插件valine可以实现)

安装

本案例使用github搭建，利用gitlab搭建流程一样，不再说明。

安装git

直接去官网默认安装即可(代码管理工具)。https://git-scm.com/

安装完成后在右键git bash，输入git –version验证是否安装成功

1
git --version

安装node.js

安装node.js默认安装即可(hexo的运行环境)。直接去官网下载最新版本即可https://nodejs.org/zh-cn/download/

直接全部默认安装即可

打开bash或cmd，查看是否安装成功

1
2
node -v：显示安装的nodejs版本
npm -v：显示安装的npm版本

注册github账号

注册github账号(无需梯子)。官网如下，点击右上角sign in注册。https://github.com/

创建github仓库

登录创建一个名称为hopesy.github.io的仓库(hopesy是注册的用户名，替换成自己的，README初始化也要勾上)。此仓库就是我们的博客仓库。

进入上一步创建好的仓库,settings →pages →choose a theme

任选一个主题提交

显示如下即成功了，此时进去hopesy.github.io即可看到默认网页了(下面我们需要把hexo本地博客系统推送到此仓库来替换)

本地连接github

使用SSH配置地连接github(主要是为了避免远程提交文件时多次输入用户名和密码)

设置用户名和邮箱

1
2
git config --global user.name "hopesy"
git config --global user.email "1872638172@qq.com"

本地生成密钥

1
2
3
ssh-keygen -t rsa -C 'hopesy`
 # 一路回车即可
 # 密钥生成在  c/Users/用户明/.ssh/id_rsa.pub.

连接github

  • 在Github头像下面点击Settings，再点击SSH and GPG keys，新建一个SSH，名字任意。

  • 将id_rsa.pub文件中的所有内容粘贴进去


测试是否连接成功

1
2
ssh -T git@github.com
 # 注意不要做任何修改

安装Hexo

本地全局安装hexo博客程序()

1
npm install -g hexo-cli

搭建博客

初始化hexo

新建一个存放博客的文件夹，初始化hexo(进入文件夹右键，选择git bash )

1
2
hexo init # 初始化
npm install    # 安装依赖组件

启动本地服务器进行预览，默认浏览器输入localhost:4000即可看到页面

1
2
hexo g   # 生成页面
hexo s   # 启动预览 hexo server -p 5000更改端口

Hexo 博客文件夹目录结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
├── _config.yml  # Hexo的配置文件，可以配置主题、语言等
├── package.json # 应用程序的信息。EJS,Stylus和Markdown renderer已默认安装，可以自由移除
├── db.json
├── debug.log
├── node_modules
├── public       # 执行hexo g命令后，生成的内容会在这里，包括所有的文章、页面、分类、tag等.
├── scaffolds    # 保存着默认模板，自定义模板就是修改该目录下的文件
│   ├── draft.md # 默认的草稿模板
│   ├── page.md  # 默认的页面模板
│   └── post.md  # 默认的文章模板，生成新文章用这个模板
├── source       # Hexo存放编辑页面的地方，可以使用vim或其他编辑器编辑这里的内容
│   ├── 404.html # 自定义404页面，可以使用腾讯公益404页面
│   ├── Staticfile
│   ├── _drafts  # 存放所有的草稿文件的目录
│   ├── _posts   # 存放所有的文章文件的目录，用的最多，比如执行hexo n "post_name"之后，post_name这篇文章就存放在这个目录下
│   ├── categories
│   ├── tags
└── themes     # Hexo的所有主题
    ├── landscape # 原始hexo主题
    ├── next     # 这是我自己下载解压的主题

部署 Hexo

部署 Hexo 到 GitHub Pages，首先在博客文件夹下安装工具hexo-deployer-git

1
npm install hexo-deployer-git --save

然后修改 _config.yml 文件末尾的 Deployment 部分，修改成如下(我的用户名是hopesy替换成自己的):

1
2
3
4
deploy:
  type: git
  repository: git@github.com:hopesy/hopesy.github.io.git
  branch: master

完成后运行 hexo d 将网站上传部署到 GitHub Pages。

1
hexo d

浏览器输入 **.github.io查看是否部署成功。

写文章

首先在博客根目录下右键打开Git Bash Here输入以下命令生成文章(删除文章直接进入文件夹把md文件删除掉即可)

1
hexo new post `hexo博客搭建`

按照markdown语法，编写文件后，推送到服务器

1
2
3
hexo g # 重新生成页面
hexo s # 本地localhost:4000预览效果
hexo d # 预览没问题的话，推送到服务器hopesy.github.io查看

常用命令

1
2
3
4
5
6
7
hexo s # 等价于 hexo server #Hexo 会监视文件变动并自动更新，除修改站点配置文件外
       # ,无须重启服务器,直接刷新网页即可生效。
hexo g # 等价于 hexo generate 生成静态网页(根目录下生成public>文件夹,hexo会将
       # source下面的.md后缀的文件编译为.html后缀的文件,存放在public下。
hexo d # 等价于 hexo deploy 将本地数据按照配置部署到远端服务器(如github)
hexo clean # 清除缓存,正常情况忽略此命令,执行后会删掉根目录下的public文件夹。
hexo new post `新文章` #生成一遍文章

显示图片

修改博客根目录中_config.yml文件的配置项post_asset_folder为true。完成此设置后，当你通过hexo new 文件名新建文章后，会产生一个和文件同名的文件夹。

然后安装图片路径转换插件,这样就可以显示图片了

1
npm install https://github.com/CodeFalling/hexo-asset-image --save



-   END   -