本片文章我们主要以hexo来搭建一个属于我们自己的个人博客

1.在搭建之前我们先了解一下什么是hexo呢?

Hexo是一款基于Node.js的静态博客框架,依赖少易于安装使用,可以方便的生成静态网页托管在GitHub和Coding上,是搭建博客的首选框架!!!

我为什么会选择hexo来搭建博客呢?

对于小白来说它也是不二之选,对于处于第三方大平台上的我,比较不自由,我个人认为它的界面美观十分优雅,它的搭建成本也低,我们只需一台电脑就可以搭建。

参考链接:https://youtu.be/PsXWbI2Mqu0

接下我们直接搭建博客!!!

2. 博客的搭建

nodejs,Git环境搭建

1.nvm下载参看文章:nvm详细安装步骤以及使用(window10系统)_nvm安装教程-CSDN博客

nvm是一个管理nodejs版本的工具。在实际的开发中,有些项目的开发依赖需要低版本的nodejs运行环境,此时我们就需要使用nvm来降低nodejs版本。 

2.安装nodejs

在cmd命令框中使用以下命令进行安装

1
2
3
4
nvm install [version]            // 安装node, version是特定版本也可以是最新稳定版本latest
nvm list available // 显示已安装的列表。可选参数available,显示可安装的所有版本。list可简化为ls
nvm ls available // 显示已安装的列表。可选参数available,显示可安装的所有版本。list可简化为ls
nvm use <version> // 切换到使用指定的nodejs版本

点击并拖拽以移动

修改全局安装默认路径

如下(在cmd命令窗口执行):

1
2
cmd> npm config set prefix "C:\Users\Administrator\AppData\Roaming\nvm\node_global"
cmd> npm config set cache "C:\Users\Administrator\AppData\Roaming\nvm\node_cache"

点击并拖拽以移动

将npm镜像改为淘宝的镜像cnpm,可以提高下载速度

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

点击并拖拽以移动

661b9ac03ba44ab8ae5b4a30dce3d786.png点击并拖拽以移动

安装hexo,完成简单的本地页面展示

1.全局安装 Hexo,进入cmd输入命令

1
npm install -g hexo-cli

点击并拖拽以移动

2.创建一个文件夹Blog,在这个文件夹下直接右键git bash打开。

86215837135f402f8e25033d1f2d4a0c.png点击并拖拽以移动

3.接下来初始化一下hexo

1
hexo init

点击并拖拽以移动

生成以下目录:

【node_modules】:依赖包
【scaffolds】:生成文章的一些模板
【source】:用来存放你的文章
【themes】:主题
【.npmignore】:发布时忽略的文件(可忽略)
【_config.landscape.yml】:主题的配置文件
【config.yml】:博客的配置文件
【package.json】:项目名称、描述、版本、运行和开发等信息

遇到问题:不能使用hexo命令

解决分析:

不能使用hexo命令是因为我们本地电脑找不到hexo.cmd目录路径,这时hexo.cmd在我们自己安装node时设置的全局路径node_global下,只要将hexo.cmd所在目录配置到环境变量就好,具体配置环境变量方法由于简单不过于介绍自己上网搜索即可!!!

可参考链接:安装hexo时出现的问题:‘hexo‘ 不是内部或外部命令,也不是可运行的程序_hexo’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。-CSDN博客

6b41baddba90482e89e40b5e6424dd4f.png点击并拖拽以移动

4.改配置

a636380fd8aa43e58c1cb5c6f03c8332.png点击并拖拽以移动 相关配置:

网站

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。支持多个关键词。
author 您的名字
language 网站使用的语言。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hans 和 zh-CN 。
timezone 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York , Japan , 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai 。

各参数代表含义具体参考链接:配置 | Hexo

5.生成静态文件

1
hexo generate

点击并拖拽以移动

6.启动服务

1
hexo server

点击并拖拽以移动

启动服务器。默认情况下,访问网址为: http://localhost:4000/。

选项 描述
-p,–port 重设端口
-s,–static 只使用静态文件
-l,–log 启动日记记录,使用覆盖记录格式

成功页面

进入以上命令则成功!!!

注册Git并创建仓库

1.在git注册一步一步跟着注册流程走

2.创建仓库格式要求:用户名.github.io

3.配置用户名和邮箱

在博客根目录下打开git bash输入以下命令

1
2
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

点击并拖拽以移动

a6a30215d6ce4cff82d30d1c8a029c76.png点击并拖拽以移动

4.在博客根目录打开git bash执行以下命令

1
git config -l

点击并拖拽以移动

连接至github

1.执行以下命令生成ssh公钥,此公钥用于你的计算机连接Github

1
ssh-keygen -t rsa -C "你的邮箱"

点击并拖拽以移动

之后打开C盘下用户文件夹下的.ssh的文件夹,会看到 id_rsa.pub

7dfd2f82c2f74409b3f7d86a73e3e84a.png点击并拖拽以移动编辑

用记事本打开上述图片中的公钥(id_rsa.pub),复制里面的内容,然后开始在github中配置ssh密钥。

2.将 SSH KEY 配置到 GitHub

进入github,点击右上角头像 选择settings,进入设置页后选择 SSH and GPG keys,名字随便起,公钥填到Key那一栏。

9e4a6cc3c9784340a7a51865b2682840.png
点击并拖拽以移动编辑

3.测试连接,输入以下命令

1
ssh -T git@github.com

点击并拖拽以移动

出现连接到账户的信息,说明已经大功告成,至此完成了环境准备工作!!!

将静态博客挂载到 GitHub Pages

1.安装 hexo-deployer-git

1
npm install hexo-deployer-git --save

点击并拖拽以移动

2.修改 _config.yml 文件

在blog-demo目录下的_config.yml,就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述
修改最后一行的配置,将repository修改为你自己的github项目地址即可,还有分支要改为main代表主分支(注意缩进)。

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

点击并拖拽以移动

3.修改好配置后,运行如下命令,将代码部署到 GitHub(Hexo三连)

1
2
3
4
5
hexo clean    //删除之前生成的文件,若未生成过静态文件,可忽略此命令。

hexo generate //生成静态文章,可以用hexo g缩写

hexo deploy //部署文章,可以用hexo d缩写

点击并拖拽以移动

查看自己的仓库显示:

ac336725b5124d1287d9494c6f0d2c9a.png点击并拖拽以移动

这就表示成功了!!!

稍等两分钟,打开浏览器访问:https:你的仓库名.gitgub.io ,这时候我们就可以看到博客内容了。