Hexo+GitHub Pages搭建个人博客

发表于 | 更新于: | 分类于
字数统计: 2.4k 字 | 阅读时长 ≈ 9 分钟

Hexo + GitHub Pages 搭建个人博客

前言

我们为什么要写博客？
一方面写博客可以用来监督自己，阶段性总结归纳所学的知识点，进而达到学以致用的目的；另一方面在于分享精神，在分享与交流的过程中，你的语言表达能力会逐渐变得简洁清晰，而且带有很强的逻辑性。

所以说写博客是一个好习惯，希望大家能够坚持下来

搭建 Node.js 环境

为什么要搭建 Node.js 环境？
因为 Hexo 博客系统是基于 Node.js 编写的，要运行在 Node.js 环境之上。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以在非浏览器环境下，解释运行 JS 代码。

Node.js 的包管理器 npm（node package manager），是全球最大的开源库生态系统，安装 Node.js 时会自动安装 npm。我们之后要通过 npm 来安装 Hexo。

在 Node.js 官网：https://nodejs.org/en/ 下载最新稳定版，安装时保持默认设置即可，一路Next，安装很快就结束了

最后，打开命令提示符，输入 node -v、npm -v，出现版本号则说明 Node.js 环境配置成功，第一步完成！！！

搭建 Git 环境

为什么要搭建 Git 环境？
因为需要把本地的网页和文章等资源提交到远程Git仓库（GitHub）上。
Git 是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。

在 Git 官网：https://git-scm.com/ 下载安装包安装

桌面右键，打开 Git Bush Here，输入 git --version，出现版本号则说明 Git 环境配置成功，第二步完成！！！

补充
bitbucket账号
一般都会使用HEXO+GitHub page的形式搭建自己的博客，但是这里有个问题就是GitHub是开源的，任何人都能在上面看到你的源代码，虽然这并没有什么太大的影响，不过对于我来说感觉怪怪的，所以我就用了bitbucket page来处理我的博客，所有的东西都一样只不过这个是个私有库罢了（免费五个人）

GitHub 注册和配置

GitHub 是什么？GitHub 又名 GayHub，全球最大的同性交友网站
(哈哈哈，开个玩笑 ^_^）实际上，GitHub 是一个代码托管平台，因为只支持 Git 作为唯一的版本库格式进行托管，故名 GitHub。我们的博客最终是托管在 GitHub 上的。

Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 提供的域名 github.io 或者自定义域名来发布站点。

首先，我们需要在 Github 官网进行注册：https://github.com

创建仓库

创建仓库：Repository name 使用自己的用户名，每个用户只能建立一个，仓库名规则（注意：yourname 必须是你的用户名）：

1
yourname/yourname.github.io

访问 https://yourname.github.io 如果可以正常访问，那么 Github 的配置已经结束了，第三步完成！！！

至此，搭建 Hexo 个人博客的前置环境配置已经完成，下面开始讲解 Hexo 搭建个人博客的核心操作。

Hexo 安装

什么是 Hexo？
Hexo 是一个快速、简洁且高效的博客框架，默认使用 Markdown 解析文章，在几秒内，即可利用靓丽的主题生成静态网页，只需一条指令即可部署到 GitHub Pages 或其他网站。

强烈建议读者花20分钟去读一读 Hexo 的官方文档：https://hexo.io/zh-cn/

你可以新建一个文件夹（用于存放hexo,以后操作都在这个文件夹完成），桌面右键，打开 Git Bush Here，然后CD到你创建的文件夹

1
npm install hexo-cli -g

查看Hexo的版本，hexo version，正确输出如下信息则代表 Hexo 安装成功。

Hexo 配置

安装 Hexo 完成后，执行下列命令来初始化 Hexo，Hexo 将会在指定文件夹中新建博客系统所需要的文件。

1
2
3
4
5
1  hexo init yourname.github.io
2
3  cd yourname.github.io
4
5  npm install

新建完成后，目录如下（不同的版本可能目录有些不一样）：

1
2
3
4
5
6
7
8
9
10
├── .deploy         # 需要部署的文件
├── node_modules    # Hexo依赖
├── public          # 生成的静态网页文件
├── scaffolds       # 模板，当您新建文章时，Hexo 会根据 scaffold 来建立文件。
├── source          # 博客正文和其他源文件，404、favicon、CNAME 都应该放在这里
| ├── _drafts       #   草稿
| └── _posts        #   文章
├── themes          # 主题，Hexo 会根据主题来生成各种各样的静态页面。
├── _config.yml     # 全局配置文件，您可以在此配置大部分的参数。
└── package.json    # npm 依赖配置文件

然后，在本地运行 Hexo：hexo server或hexo s

您的网站会在 http://localhost:4000 下启动，如果能够正常访问（如下图），则说明 Hexo 博客系统已经搭建起来了，但是目前只是在本地哦，别人是看不到的。(PS：记得Ctrl+C 关掉哦，不然会占用4000端口)

在下面步骤中，我们要把这个本地博客系统部署到 Github 上，让外网的人能够访问到你的博客。

常见问题：执行hexo server提示找不到该指令\
解决办法：在 Hexo 3.0 后server被单独出来了，需要安装server，安装的命令如下：npm install hexo -server –save

关联Hexo与HitHub

配置SSh

1.生成SSH
首先，使用SSH然本地Git项目与GitHub建立起连接，方便传输文件。执行下面命令生成SSH公私钥，一路回车（记得输入你自己的邮箱地址哦~）：

1
ssh-keygen -t rsa -C "自己的邮箱地址"

2.添加SSH Key 到 GitHub
用记事本打开C:\Users\自己微软账号\.ssh\id_rsa.pub,此文件里面内容为刚才生成的公公钥，准确的复制这个文件的内容，粘贴到 https://github.com/settings/ssh 的“new SSH key”中

3.测试
输入下面的命令，看看SSH是否配置成功，`git@github.com`的部分不要修改：

1
ssh -T git@github.com

如果是下面的反馈：

1
2
3
The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

不要紧张，输入yes就好，然后会看到：

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

配置 Git 个人信息

现在你已经可以通过 SSH 链接到 GitHub 了，还有一些个人信息需要完善的。
Git 会根据用户的名字和邮箱来记录提交。GitHub 也是用这些信息来做权限的处理。

输入下面的代码进行个人信息的设置（把名称和邮箱替换成你自己的）：

1
2
git config --global user.name " 名称 "
git config --global user.email " 邮箱地址 "

配置 Deployment

在你的Hexo根目录下_config.yml文件中，找到Deployment，然后按照如下修改：

1
2
3
4
5
6
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:yourname/yourname.github.io.git
  branch: master
  • type值对应的是你所部署的的服务器类型，我们这里填写git就可以。
  • repo是你的仓库地址，也就是仓库克隆的地址，推荐用https的链接。
  • branch不写默认是master，通常我们写成master就可以。

上配置完成后保存 然后回到终端执行 npm install hexo-deployer-git --save 安装一个插件，这样才能将你写好的文章部署到github服务器上并让别人浏览到。

将本地文件提交到 GitHub Pages

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 本地预览
hexo s

# 删除旧的静态文件，即 public 文件
hexo clean

# 进行渲染生成新的静态文件，即 public 文件（或者 hexo g）
hexo generate

# 部署到远程站点，即 GitHub（或者 hexo d）
hexo deploy

# 当然你也可以执行下面的组合命令
hexo d -g

执行完以上操作后打开浏览器地址了输入http://你github名字.github.io就可以看看到效果啦，这回是所有人都能看到的.

如果在执行 hexo d 后,出现 error deployer not found:github 的错误（如下），则是因为没有设置好 public key 所致，重新详细设置即可。

1
2
3
4
1  Permission denied (publickey).
2  fatal: Could not read from remote repository.
3  Please make sure you have the correct access rights
4  and the repository exists

使用如下命令 hexo new post "文章名字" 就可新建文章啦，建立好的文章在 source\_posts 中，你可以用markdown语法编辑内容就可以
如果在博客文章列表中不想全文显示，可以在文章中增加 <!-- more -->, 在这后面的内容就不会显示在列表。

怎么避免 Markdown 文件（.md）被解析？

Hexo 原理就是在执行 hexo generate 时会在本地先把博客生成的一套静态html页面，然后放到public文件夹中，再执行 hexo deploy 时将其复制到.deploy文件夹中。

Github 通常建议同时附上README.md项目说明文档，但是 hexo 默认情况下会把所有 Markdown 文件（.md）文件解析成html文件，所以即使你在线生成了 README. md，它也会在你下一次部署时被删去。

那么怎么解决呢？

在执行 hexo deploy 前把在本地写好的README.md文件复制到.deploy文件夹中，再去执行 hexo deploy

关于hexo
hexo官方文档
end

0%