Hao Shan's Studio.

【Tech】借助hexo框架创建自己的博客

Word count: 703Reading time: 2 min
2024/09/03
loading

参考教程:https://www.cnblogs.com/chenlove/p/15058170.html

在一切开始之前,需要安装好git并配置好SSH Key,如尚未配置,请自行查阅或参考参考教程的内容

PS:本文展示样例均为mac操作系统自带命令行工具中的效果,如操作系统不同,命令及效果会略有不同(linux系统大体相同,windows系统或有一些差异)

1 环境准备

1.1 安装nodejs

​ 直接根据官网内容安装即可

验证:命令行运行node -v后正常输出版本号

图1

1.2 安装hexo及依赖

1
2
npm install hexo -g
npm install `--`save hexo-deployer-git

验证:命令行运行hexo -v后正常输出版本号

图2

2 搭建个人博客

2.1 新建博客

2.1.1 新建一个博客保存路径

2.1.2 初始化博客

1
hexo init

​ 验证:博客保存路径下生成如下文件

图3

2.2 生成静态网页

2.2.1 生成静态网页

1
hexo g

2.2.2 预览

运行:

1
hexo s

访问http://localhost:4000/ 即可获得预览效果

图4

2.3 博客部署到github

2.3.1 新建仓库

​ 按照如下配置新建一个仓库

图5

​ 其中在修改“1”中,xxxx应被替换为你自己的仓库名,这也将成为你博客域名的一部分,这里要求与用户名相同,否则博客网页无法访问

2.3.2 修改配置文件

​ 在博客保存路径下(即当初运行hexo init的路径下),有一个_config.yml文件

​ 在该文件的最后,有:

1
2
deploy:
type: ‘’

​ 将其修改为:

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

​ 其中username是你github账号的用户名,前后两个username相同

​ branch的设置也应当注意,branch的设置,应与在新建仓库后,下面红框中的内容一致(通常为main)

图6

2.3.3 发不到github

1
hexo d

自此,通过访问http://username.github.io/即可访问我们新建的博客了

2.4 修改博客内容

2.4.1 新建一篇博客

1
hexo new 'name_of_blog'

此时,在path/to/blog/source路径下已经产生了一个名为name_of_blog的md文件(name_of_blog可替换)

2.4.2 编写博客

  • 编写文本内容:通过编写博客对应的md文档,即可实现对博客的编写

  • 修改题目:修改博客保存路径下的_config.ymltitle的内容

    图7

​ 即可对应修改博客中的如下标题:

图8

2.4.3 重新将博客部署到github

1
2
hexo g
hexo d

重新访问http://username.github.io/即可获得修改后的内容

3 博客美化

默认主题略丑,可以利用网络资源(github等)更换其主题

推荐一个主题https://github.com/fi3ework/hexo-theme-archer

部署方式可以参考项目文档,效果如下:

图8

图9

CATALOG
  1. 1. 1 环境准备
    1. 1.1. 1.1 安装nodejs
      1. 1.1.1. 1.2 安装hexo及依赖
  2. 2. 2 搭建个人博客
    1. 2.1. 2.1 新建博客
      1. 2.1.1. 2.1.1 新建一个博客保存路径
      2. 2.1.2. 2.1.2 初始化博客
    2. 2.2. 2.2 生成静态网页
      1. 2.2.1. 2.2.1 生成静态网页
      2. 2.2.2. 2.2.2 预览
    3. 2.3. 2.3 博客部署到github
      1. 2.3.1. 2.3.1 新建仓库
      2. 2.3.2. 2.3.2 修改配置文件
      3. 2.3.3. 2.3.3 发不到github
    4. 2.4. 2.4 修改博客内容
      1. 2.4.1. 2.4.1 新建一篇博客
      2. 2.4.2. 2.4.2 编写博客
      3. 2.4.3. 2.4.3 重新将博客部署到github
  3. 3. 3 博客美化