Hexo结合GitHub pages搭建个人Blog

什么是 Hexo？

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

安装Hexo

安装前提

  • Node.js (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)
  • Git (为上传到GitHub Page做准备)
    以上两个基础环境请自行安装与配置

安装并初始化hexo

  1. 创建文件夹 这里创建一个名为demo的文件夹

  2. 初始化nodejs环境 从终端进入demo文件夹 

    1
    $ npm init

  3. 安装hexo 

    1
    $ npm install -g hexo-cli

    查看是否安装成功

    1
    $ npm list --depth=0

  4. 初始化hexo文件夹 

    1
    2
    3
    $ hexo init <folder>
    $ cd <folder>
    $ npm install

    folder是你想创建的项目名字 这里举例为myBlog

    • source\_posts里面存放的为你的md文章文件
    • themes是主题配置文件（具体请看官网 主题 介绍）
    • _config.yml是hexo的配置文件（具体请看官网 **配置文件**介绍）
    • _config.landscape.yml是landscape这个hexo的原生主题的配置文件

启动hexo服务

创建文章

1
$ hexo new "我的第一篇文章"

在source\_posts会多出一个名为我的第一篇文章.md的文件，在这个文件中使用markdown编辑你的文章内容 注意不要删除前面的文章配置内容

启动服务

  • 生成静态文件

    1
    $ hexo generate 或者 hexo g

    会出现一个public文件夹在根目录，一般不需要进行修改

  • 启动hexo服务

    1
    $ hexo server

    这时我们访问http://localhost:4000/就能访问我们的blog了

部署到Github Pages

创建github.io仓库

  1. 注册并登录github (请访问 github官网 自行注册)

  2. 创建 github.io仓库

    创建仓库需要注意几点：

    • 仓库名必须右【用户名】+【.github.io】命名，比如我的用户名是HunterX-327，库名就为：HunterX-327.github.io
    • 创建的仓库必须是public公共的，私有的别人也无法访问对吧

  3. 访问github pages


    进入刚刚创建的仓库，打开setting设置，进入pages页面，这时就会出现一个visit site按钮。点击就能进入由github服务器为你免费代理的静态页面网站，了前提是你的库里面必须要有文件，可以创建一个readme文件或者index.html文件测试一下是否部署成功

部署hexo到github pages

这里我们使用一键部署方式

  1. 查看是否安装好git 

    1
    $ git --version

  2. 安装 hexo-deployer-git

    1
    $ npm install hexo-deployer-git --save

  3. 修改_config.yml文件配置

    • 添加以下内容到文件尾部
      1
      2
      3
      4
      deploy:
      type: git
      repo: https://github.com/HunterX-327/HunterX-327.github.io.git #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
      branch: gh-pages
    • repo为你刚刚创建的github.io仓库链接
    • branch为你需要部署的仓库分支

  4. 部署到github pages

    1
    $ hexo deploy

    等待2-5分钟，查看你的github.io仓库，看看是否有新的文件添加。访问你的github pages网址，恭喜你，就能看到一个属于你自己的由github免费代理的个人blog网站了！！！

  5. 比较正确的部署方式

    1
    2
    3
    $ hexo clean
    $ hexo g
    $ hexo d
    • hexo clean 为清除之前创建的静态文件
    • hexo g 创建新的静态文件
    • hexo d 部署到github服务器

嵌入图片简便方法

hexo-renderer-marked 3.1.0 引入了一个新的选项，其允许你无需使用 asset_img 标签插件就可以在 markdown 中嵌入图片

1
2
3
4
5
6
_config.yml

post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

启用后，资源图片将会被自动解析为其对应文章的路径。
例如： image.jpg 位置为 /2020/01/02/foo/image.jpg ，这表示它是 /2020/01/02/foo/ 文章的一张资源图片， 将会被解析为 <img src="/2020/01/02/foo/image.jpg"> 。

文件路径大概如下：

说在后面

hexo的玩法远不如此，还有主题、插件等功能需要自己去探索，另外github pages是只支持静态页面的，并不支持动态页面，但是如果需要创建留言或者评论系统，可以使用hexo插件实现类似的功能。

#如何快速的创建一个由hexo和github搭建的免费个人博客
Hexo结合GitHub pages搭建个人Blog
http://example.com/2023/01/18/Hexo结合GitHub-pages搭建个人Blog/
作者
Mr.H
发布于
2023年1月18日
许可协议