个人博客搭建 | Hexo框架

embedded/2024/10/15 4:33:38/

文章目录

- - - 1.Hexo安装
    - 2.创建博客
    - 3.将博客通过GitHub来部署
    - 4.更换主题

1.Hexo安装

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他标记语言）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。搭建Hexo首先要按照Node.js，可以进行官网下载。另外也要确保自己电脑安装了git在Linux系统使用命令sudo apt-get install git安装并配置，如：用户名和邮箱。在这里插入图片描述
安装Node版本管理工具NVM，它可以管理不同的版本

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash

在Linux使用NVM管理工具下载，将它添加到环境变量中

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

安装对应的Node版本

nvm install 20

npm默认是国外的镜像源速度比较慢，更换国内的淘宝镜像源

npm config get registry
npm install -g cnpm --registry=https://registry.npmmirror.com

使用cnpm来下载Hexo

sudo cnpm install -g hexo-cli

现在已经下载完毕Hexo，创建一个文件夹来初始化博客，如果有错误把这个文件夹删除就可以了。

$ mkdir blog
$ cd blog
$ sudo hexo init
$ sudo hexo s	# 启动hexo是一个前台进程,s是server的简写

启动好hexo访问本地的4000端口，http://localhost:4000/ 有一篇Hello Wolrd博客说明了Hexo搭建博客已经成功了。

2.创建博客

系统默认创建的Hello World文章就有创建文件的指令，也可以参考文档
1、创建博客

$ sudo hexo n 我的第一篇文章 # n是new的缩写

2、我们可以使用vim使用markdown语法对文章进行编辑，markdown参考文档。创建的博客在source/_posts/下。

$ cd source/_posts/
$ sudo vim  我的第一篇文章.md # 打开创建的文件有下面的内容
---
title: 我的第一篇文章
date: 2024-10-14 13:43:27
tags:
---

3、对文章更新后重新生成一下

$ sudo hexo clean
$ sudo hexo g 	# g是generate的缩写

最终的结果展示：
在这里插入图片描述

3.将博客通过GitHub来部署

1、创建个人仓库，注意命名方式GitHub用户名.github.io。
在这里插入图片描述
2、安装插件

cnpm install --save hexo-deployer-git

3、修改配置文件_config.yml
在这里插入图片描述
4、执行命令，最后通过仓库名就能直接访问到个人博客了，如：atgiuxi.github.io

$ sudo hexo d

5、可能存在的错误
情况一：git clone失败的情况。在WLS通过修改/ect/hosts文件添加代理

140.82.121.3 github.com
185.199.110.133 raw.github.com

情况二：输入密码不能登录，在github上settings中生成token来替换密码登录

remote: Support for password authentication was removed on August 13, 2021

4.更换主题

在github上找一个hexo的主题将它克隆到themes文件夹，然后修改_config.yml。

sudo git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
# theme: landscape
theme: yilia

更换后的主题长这样
在这里插入图片描述