如何用Hexo搭建个人博客?

我的个人博客搭建成功啦!

这篇文章会给大家分享我是如何从0开始搭建我的个人独立博客的

接下来我们开始吧

文章比较精简,没有废话,不要跳步

一、准备工具

1、官网安装Nodejs(建议使用 Node.js 12.0 及以上版本)

NodeJs是Hexo所必需的环境。

点击 NodeJs 官网,下载左边那个即可,下载好一直 next,选择一个文件夹位置在一直 next 即可完成。安装Node.js会包含环境变量及npm的安装。

验证安装完成cmd中输入命令:

1
2
3
node -v
npm -v
返回版本号代表安装完成。

2、安装git

Git是开源的分布式版本控制系统,用于敏捷高效地处理项目。

我们网站在本地搭建好了,需要使用Git同步到云服务器或者GitHub的代码库里。点击 git 官网,下载安装包。点击 next,选择文件夹位置,然后一直 next 到底就行了,选择默认配置就好,默认配置会将环境变量配置好的。安装成功右击鼠标如图所示:

接下来我们测试下是否都下载成功

管理员运行cmd,依次输入

1
2
3
node -v
npm -v(这个是node附带的)
git -v

3、下载安装Hexo博客框架

1
npm install -g hexo-cli

接下来初始化一下hexo,,在该文件夹下鼠标右键gitbash后输入命令:

1
hexo init blog

“blog”是你要生成博客的文件夹名称,可以根据自己的喜好来取名。生成的文件如图所示:

输入命令:

1
2
hexo g
hexo s

完成后,打开浏览器输入地址:localhost:4000 就可以看到你生成的博客了。使用ctrl+c可以把服务关掉。

安装fluid主题
主题下载:https://github.com/fluid-dev/hexo-theme-fluid

解压复制到博客根目录\themes目录下,更名为fluid

修改博客根目录目录下_config.yml

1
2
theme: fluid  # 指定主题
language: zh-CN # 指定语言,会影响主题显示的语言,按需修改

个性化主题页面,更详细的使用说明参考官方文档

二、将博客托管到GitHub

1、GitHub生成代码库

首先,你先要有一个GitHub账户。点击+号,选择New repository,新建仓库

创建一个和你用户名相同的仓库,后面加**.github.io,只有这样,将来要部署到GitHub page的时候,才会被识别,也就是xxxx.github.io,其中xxx就是你注册GitHub的用户名,点击create repository**。

2、本地SSH生成密钥,将公钥复制到云端

回到本地主机git bash中,创建用户名和密码

1
2
3
git config --global user.name "GitHub用户名"
git config --global user.email "GitHub注册邮箱"
git config --global user.password "GitHub登录密码"

创建SSH密钥,一路回车

1
ssh-keygen -t rsa -C "GitHub注册邮箱"

这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹,在C:\Users\24714.ssh中。
ssh,简单来讲,就是一个秘钥,其中,id_rsa是你这台电脑的私人秘钥,相当于钥匙,id_rsa.pub是公共秘钥,相当于锁。要把id_rsa.pub公共秘钥给GitHub,这样才能用自己的私人密钥去开这把锁。当能够相互匹配时,才能够顺利的通过git上传你的文件到GitHub上。

将id_rsa.pub中的内容复制,而后在GitHub的setting中:

点击左侧SSH and GPG keys的设置选项,点击New SSH key,把你的id_rsa.pub里面的信息复制进去。title随便填,本地的公钥复制到key中。

在本地gitbash中检测GitHub公钥设置是否成功

1
ssh git@github.com

第一次登录需要输入GitHub的登录用户名和密码。

3、修改配置文件

下一步将我们的Hexo与GitHub关联起来,打开站博客根目录blog的配置文件_config.yml
翻到最后修改为:(注意后面三行缩进两格)

1
2
3
4
deploy:
type: git
repository: https://github.com/lixinyiceline/lixinyiceline.github.io.git(改)
branch: main

repository里的内容是GitHub代码仓库浏览器网址栏的网址,注意后面加上.git,保存站点配置文件。

4.本地上传到GitHub
本地gitbash安装Git部署插件

blog目录下打开控制台

1
npm install hexo-deployer-git --save

这时,我们分别输入四条命令:

1
2
3
4
npm install
hexo clean
hexo g
hexo d

完成后,打开浏览器,在地址栏输入你的放置个人网站的仓库路径,即 http://xxxx.github.io,你就会发现你的博客已经上线了,可以在网络上被访问了。

三、网站资料

我们的博客标题还是默认的hexo,整个页面是初始默认的,接下来我们对其进行修改

用记事本打开我们blog文件夹中的_config.yml文件

将#Site下面按自己的需求填上

1
2
3
4
5
6
7
8
# Site
title: 标题
subtitle: 副标题
description: 描述
keywords: 关键词
author: 站主
language: 语言(可以填写zh-CN)
timezone: 时区(可以填写Asia/Shanghai)

然后保存

四、如何上传文章

我们在Blog文件夹中打开git bash,输入下方代码就可以生成新的文章md文件

1
hexo new 文章标题

文章是.md格式,在我们的Blog文件夹中的source/_posts

推荐用Typora软件来编辑.md格式的文件

Typora官网:https://www.typoraio.cn/(89元终身使用,推荐正版)

破解版奉上:蓝奏云文件

然后我们用Typora软件打开该.md文件就可以开始写文章了

写好以后,我们还是一样打开git bash生成、上传

1
2
3
hexo clean 
hexo g
hexo d

参考链接:

搭建个人博客【搭建Hexo+Fluid博客并部署到GitHub/云服务器(阿里云/腾讯云)】

hexo d命令报错 ERROR Deployer not found: git