2020最新WIN环境github + hexo搭建个人博客

经验分享

发布日期: 2020-05-29

更新日期: 2024-05-31

文章字数: 2.2k

阅读时长: 8 分

阅读次数:

1.前言及Hexo介绍

昨天youtube看到hugo,搭建了有点问题，搜索时又看到了hexo 其实之前查资料时也看到了解过，一搜索参考几篇文章就有了这个站点，但是参考文章里要么github里有变化，要么步骤上有不全不详细的地方，总之没有给初次接触者详细参考的；可能本身也不是特别难搭建吧。废话完了。

Hexo 是基于 Node.js 的快速、简洁且高效的博客框架，拥有超快速度、一键部署、支持 Markdown、丰富的插件等优秀的特性。以上是官方对于Hexo的描述，出了以上的描述，利用Hexo搭建个人博客还有以下特点：

全是静态文件，访问速度快；

免费方便，不用花一分钱就可以搭建一个自由的个人博客，不需要服务器不需要后台；

可以随意绑定自己的域名，不仔细看的话根本看不出来你的网站是基于github的；

数据绝对安全，基于github的版本管理，想恢复到哪个历史版本都行；

博客内容可以轻松打包、转移、发布到其它平台；

1.1准备工作

一个GitHub账户（本文以 WIN环境下 GitHub 为例)
安装Node.js，Node.js 是多平台的，去官网选择相应的系统版本下载安装即可,安装选项全部默认，一路点击Next。

最后安装好之后，按Win+R打开命令提示符，输入node -v和npm -v，如果出现版本号，那么就安装成功了。
安装Git，Git也是多平台的，去官网选择相应的系统版本下载安装即可,安装完成后在命令提示符中输入git --version验证是否安装成功。

2.设置GitHub博客

2.1. 创建 GitHub 仓库
注册登录后，点右上角头像左边+号，点 New repository ,新建一个名为你的用户名.github.io的仓库。比如说，如果你的 GitHub 用户名是rsgdxp，那么你就新建的仓库就是rsgdxp.github.io，网站访问地址也是这个地址。
需要注意的是注册github的邮箱一定要验证，否则不会成功

仓库名字必须是：username.github.io，其中username是你的github用户名

2.2. 绑定域名（可选）
本例没有操作，比较好解决。

2.3 设置 GitHub Pages
GitHub Pages是GitHub为我们提供的静态页面服务Hexo就是一个静态博客框架。我们只有开始GitHub Pages才能使我们的博客生效并且能够被访问。
打开你的GitHub博客仓库点击 Settings (设置 )

圆圈1 选择一个主题等待一会儿，圆圈2 开启SSL访问，圆圈3 就是上面说的绑定域名了。

3.配置

3.1配置SSH Key

因为你提交代码肯定要拥有你的 GitHub 权限才可以，但是直接使用用户名和密码太不安全了，所以我们使用 SSK key 来解决本地和服务器的连接问题。

桌面空白处（其实建立好hexo目录后在目录右键也可以），鼠标右键，选择Git bash here 打开终端。

cd ~/. ssh

测试一下是否有 SSH key 的命令，如果提示 No such file or directory或者其它继续

ssh-keygen -t rsa -C "邮件地址"

这里的邮件地址最好写注册GitHub的地址，这样方便以后的管理。敲入代码后连续按3次回车（如果之前操作那么看提示我就是这样），最终会生成一个文件在用户目录下

git bash中输入

cat ~/.ssh/id_rsa.pub

打开你的 GitHub 主页，进入个人设置 -> SSH and GPG keys -> New SSH key，并将刚刚输出的内容填入 Key 那里。Title 你可以随便起。最后别忘了保存。

3.2. 测试 SSH key是否成功

在终端里面敲入一下命令行并回车：

ssh -T git@github.com

如果提示Are you sure you want to continue connecting (yes/no)?，输入yes 并回车，然后会看到：

Hi rsgdxp! You've successfully authenticated, but GitHub does not provide shell access.

3.3. 配置 Git

在终端里面敲入以下命令行并回车：

git config --global user.name "你的 GitHub 用户名"

git config --global user.email "你的 GitHub 注册邮箱"

4. 搭建 Hexo 博客

4.1. 安装 Hexo

在终端里面敲入以下命令行并回车：

npm install hexo-cli -g

4.2. 初始化 Hexo

在电脑的里新建一个存放你博客文件的文件夹（名字可以随便取），比如我的是 F:\hexo

cd F:\hexo

hexo init

执行完上面代码，等待下载完。然后生成blog文件

hexo g

Hexo 就会在 public 文件夹生成相关 html 文件，这些文件将来都是要提交到 GitHub 去的。

先本地预览一下：

hexo s

根据提示，打开浏览器访问 http://localhost:4000 即可看到内容。默认的主题Licardo一般。

按ctrl+c关闭

4.3. 修改主题

接下来自己可以替换一个喜欢的主题。这是官方主题库，里面有很多好看的、实用的主题。
个人比较喜欢的主题是:hexo-theme-matery，预览 https://blinkfox.github.io/
首先下载这个主题，在终端里面执行下面的命令：
请在稳定版与最新版中二选一

cd F:\hexo\themes

git clone https://github.com/blinkfox/hexo-theme-matery.git # 稳定版

git clone -b develop https://github.com/blinkfox/hexo-theme-matery.git # 最新版

本次我选的最新版预览：https://rsgdxp.github.io/

然后修改Hexo的配置文件，让Hexo使用我们下载的主题来生成博客。找到博客根目录下的_config.yml文件，将其中的theme: landscape改为theme: hexo-theme-matery

这里注意：如果改完报错 can not read a block mapping entry

修改根目录下的_config.yml文件后报这个错

查了半天冒号后面要有空格；还有说的用中文双引号；还有的说文件编码问题……

突然看到一条网友回复：

还有报下一行的错其实是上一行出问题了。。。

擦怪不得我修改报错那行半天怎么改怎么不行，删除还是报错下一行……

然后在终端里面执行下面的命令：

hexo clean
hexo g
hexo s

再次打开浏览器访问 http://localhost:4000 即可看到更改主题之后的样子了。

4.4 上传到 GitHub

首先要配置好Hexo的配置文件，让Hexo知道要上传到哪里
修改博客文件夹根目录下的_config.yml中有关deploy的部分：

deploy:
type: git
repository: git@github.com:rsgdxp/rsgdxp.github.io.git
branch: master

替换上面rsgdxp为自己github用户名即可。

然后安装 Hexo 上传到 GitHub 的插件，终端里面执行：

npm install hexo-deployer-git --save

最后执行

hexo d

打开你的网站看看效果吧。

4.5 Hexo 相关命令

hexo new "postName"      # 新建文章
hexo new page "pageName" # 新建页面
hexo generate            # 生成静态页面至public文件夹
hexo server              # 开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
hexo deploy              # 部署到GitHub
hexo help                # 查看帮助
hexo version             # 查看Hexo的版本

缩写：

hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

4.6 根目录 _config.yml 文件

这里面都是一些Hexo的全局配置（要区别主题目录里同名文件哦，主题一些个性化定义在此文件修改），每个参数的意思都比较简单明了，所以就不作详细介绍了。
需要特别注意的地方是，冒号后面必须有一个空格，否则可能会出问题

5. 发布文章

hexo new '文章标题'

Hexo 会帮我们在 /source/_posts 文件夹下生成相关 md 格式的文件；md格式是Markdown文件的格式，所以只要使用规范的Markdown语法进行书写即可。可以用 Typora 等Markdown编辑器写文章。

一般完整格式如下：

---
title: postName #文章页面上的显示名称，一般是中文
date: 2020-05-29 15:30:16 #文章生成时间，一般不改，当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签，可空，多标签请用格式，注意:后面有个空格
description: 附加一段文章摘要，字数最好在140字以内，会出现在meta的description里面
---

以下是正文

写好文章后执行