本篇博客为将简要分享如何使用Hexo搭建自己的个人博客,并利用github pages进行展示.

博客主题选择

在本次搭建个人博客的过程之中,选取的搭建方式为Hexo和github pages的结合实现, 选取hexo的原因是基于hexo的个人博客对于前端知识的要求较低,博文内容可以全部通过makrdown实现,而个人对于markdown相关语法较为熟悉,所以选择hexo+github pages的实现方式.

博客主题选取了maple作为博客的主题, 选取该主题的原因包含如下几点:

  • maple主题本身简约但又简单, 符合博主对于博客整体风格的要求
  • maple主题由中文开发者开发, 对中文内容支持较好
  • maple主题有较好的对移动端的支持, 在移动段也有较好的浏览效果
  • maple主题支持dark/light mode的切换, 并提供了数据分析的相关接口

博客功能以及页面布局

本次个人博客搭建实现了如下功能:

  • 博文展示(博客内容展示)
  • 作者相关链接(github/知乎)链接跳转
  • 博文以及页面访问量统计
  • 根据tag及category的分类阅读功能

页面布局:

整体上布局较为简洁, 主页包含了近期作者发表的博文, 按时间顺序进行排列, 并在右上角提供了博文、github、知乎的跳转功能.

使用hexo+GithubPages的博客部署功能实现

系统环境:

- Windows 10
- node v18.20.0
- npm v10.5.0
- git 2.44.0.windows.1

准备工作

  • 安装node, 从nodejs官方网站上进行下载安装.

    在完成下载安装之后,检查是否成功安装: 

    1
    $ node -v
    1
    $ npm -v
    应当输出对应的版本号.

  • 安装git, 从git官方网站进行下载安装.

    在完成下载安装之后,检查是否成功安装: 

    1
    $ git -v
    应当输出对应的版本号

  • 安装hexo

    1
    $ npm install -g hexo-cli

  • 利用hexo建立静态博客

    建立存放blog文件的文件夹 

    1
    2
    $ mkdir $BLOG
    $ cd $BLOG
    hexo 初始化 
    1
    2
    $ hexo init
    $ npm install
    本地预览 
    1
    2
    $ hexo g
    $ hexo s
    通常情况下, 服务将启动于本地的4000端口(http://localhost:4000/),在浏览器中访问上述网址即可. 如果该端口被占用, 可先Ctrl+C关闭之后, 使用 
    1
    $ hexo server -p $PORTID
    指定目标端口进行查看. ### 将博客发布到github pages

  • 在个人github建立名为USERNAME.github.io的仓库

  • 安装hexo-deployer 

    1
    npm install hexo-deployer-git --save

  • 修改_config.yml文件: 

    1
    2
    3
    4
    deploy: 
        type: git
        repo: git@github.com:$USERNAME/$USERNAME.github.io.git
        branch: main

  • 顺序执行下列命令,实现页面的生成与部署: 

    1
    2
    3
    $ hexo clean #清除缓存
    $ hexo g #生成页面
    $ hexo d #部署页面
    ### 博客内容的撰写

  • 使用如下命令建立一篇新的博客: 

    1
    $ hexo new $BLOGNAME

  • hexo支持markdown语法, 在完成新建之后就可以在对应的markdown文件之中快乐的写博客了!

更换新的博客主题

除了默认主题之外, 开源社区开发者们也为hexo提供了各种各样的主题选择, 具体可以参考hexo的主题网站进行选择!

在搭建博客过程之中遇到的问题

  • 在localhost预览时可以实时预览成功对应的更改,但是部署到github之后则无法看到对应更改.

    解决方案: 每次更新时都执行hexo -clean命令

  • config文件之中更改timezone配置之后无法实现配置

    解决方案: timezone选项只支持特定的选项, 查阅相关资料之后设置为'Asia/Shanghai'

  • 复杂数学公式无法渲染

    解决方案: 将渲染引擎更换为hexo-render-pandoc, 并安装pandoc