Hexo搭建静态博客

1.什么是Hexo和静态博客

Hexo 是一个极速、简单且强大的静态博客架构。它使用 Node.js 作为构建引擎，上百个文件在几秒钟内便可构建完成；而且拥有着丰富的插件库，因开源而显得生机勃勃，可扩展性很好；最重要的，它支持 Markdown 作为书写语言，极大地方便了博客的撰写。

静态博客：是指没有后端数据库的博客，所有文章都是以文件的形式存储，是一种纯前端的博客框架。

2.配置环境

安装Node.js和Git

查看是否安装成功

1
2
3
node -v
npm -v
git -version

环境没问题后安装Node.js 淘宝镜像加速器 （cnpm）

1
2
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm -v        #检查是否安装成功

3.安装Hexo

环境配置好后就可以安装Hexo了

1
2
cnpm install -g hexo-cli
hexo -v        #查看是否安装成功

安装完成后，创建到一个想用来存放博客的目录hexo，然后开始新建博客

1
2
3
cd hexo
hexo init
hexo s

在运行hexo s后会看到Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

在浏览器里打开http://localhost:4000 就可看到一个新建的Hexo博客

4.写博客文章

在博客目录下来新建一个博客

1
hexo new "博客文章名"

新建的博客会被保存到

1
<blog-dir>/source/_posts/博客文章名.md

之后我们可以用编辑器打开编辑，保存后hexo s访问 http://localhost:4000 就可以看到这篇文章已经发布到博客中了

5.创建SSH到Github

  • 打开终端在终端中设置
1
2
git config --global user.name "你的 GitHub 用户名"
git config --global user.email "你的 GitHub 邮箱"
  • 创建 SSH 密匙
1
ssh-keygen -t rsa -C "你的 GitHub 邮箱"
  • 一直回车，然后我们到 C:\Users\ 用户名 \.ssh 目录（勾选显示 “隐藏的项目”）

  • 验证与Github的连通性，在终端内输入
1
ssh -T git@github.com
  • 如果出现 “Are you sure……”，输入 yes 回车确认，出现下面内容提示即连接成功

6.部署博客到GitHub

现在的页面我们只能在本地访问，这当然不够，由于Hexo 是基于静态页面的博客系统，意味着对服务器的要求可以非常的低，所以我们可以将其部署到Github上去

  • 首先创建一个名称为 用户名.github.io 的仓库来托管网页
  • 然后到命令行安装git部署插件
1
cnpm install --save hexo-deployer-git     #在blog目录下安装git部署插件

  • 在hexoblog目录下找到_config.yml，用编辑器打开，在最下面找到

    1
    2
    3
    4
    5
    6
    7
    8
    9
    deploy:
    type: ''

     #将其设置为如下，注意每个冒号后面有一个空格

    deploy:
    type: git
    repo: https://github.com/JLinmr/JLinmr.github.io.git        #你的GitHub仓库地址
    branch: main

  • 命令行运行

    1
    2
    hexo g        #生成静态文件
    hexo d        #部署到GitHub

  • 刷新GitHub仓库可以看到生成了很多文件，此时访问用户名.github.io即可看到创建的博客

7.绑定域名

如果我们有自己的域名，想要解析到我们 刚刚创建的网站，需要添加记录

CNAME 类型 解析到你的用户名.github.io 主机记录@ （看个人需求）

在你的博客文件\source中新建CNAME记事本，不要有后缀，内容输入域名即可

然后重新

1
2
3
hexo c        #清理静态文件
hexo g        #生成静态文件
hexo d        #部署到GitHub

进入github博客仓库，在setting->options的最下面的github pages中输入自己域名并保存

现在就可以用自己的域名访问刚刚建立的网站了

8.结束

以上内容仅记录所用，不保证后续还能打开