利用github仓库部署hexo实现搭建免费个人博客的方法
安装前提
在安装hexo之前首先安装必要工具
点击安装: nodejs
点击安装: git
如果你的电脑中已经安装上述必备程序，那么请直接前往 安装 Hexo 步骤。
安装好后右键打开git bash运行如下命令测试是否安装成功
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
2
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 73.8906px;">node -v
npm -v
</pre>
|
若有版本号输出，则证明安装成功。
安装cnpm
右键选择git bash，在弹出的终端里执行下面的命令
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 497.234px;">npm install -g cnpm --registry=https://registry.npm.taobao.org
</pre>
|
同上检查cnpm是否安装成功
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 229.281px;">cnpm -v #输出版本号即代表成功
</pre>
|
安装hexo
上面所有步骤安装成功后即可安装hexo
右键选择git bash并执行下面命令
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 204.734px;">cnpm install hexo-cli -g
</pre>
|
创建博客
选择或者创建一个文件夹
比如我们创建了一个名为blog的文件夹并打开
在文件夹内空白处右键选择git bash
然后执行下面命令
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 89.2812px;">hexo init
</pre>
|
若执行一半卡住不动就可以使用我们刚才安装的国内镜像
按下ctrl+c组合键结束当前命令并重新输入下面命令
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 112.375px;">cnpm install
</pre>
|
等待命令跑完之后我们再输入下面命令检查一下
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 73.8906px;">hexo -v
</pre>
|
有版本号输出则为成功
本地运行检查
输入下面命令将博客初始化
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 66.1875px;">hexo s
</pre>
|
若返回代码里有 http://localhost:4000 这样一段链接 我们把它复制并粘贴再浏览器地址栏就可以看到我们的博客了
若没有上面链接并且报错，请自行检查
更换主题
hexo提供了很多好看的主题，并且都是免费的
说说怎么替换主题
再博客安装好后所在的目录下有一个名为_config.yml的文件
找到下面字段并修改主题名
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
2
3
4
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 297.109px;"># Extensions
Plugins: https://hexo.io/plugins/
Themes: https://hexo.io/themes/
theme: 这里修改为主题文件名字
</pre>
|
然后剩下主题修改的部分每个主题都差不多
在主题介绍页面都有详细说明
我这里不做介绍
站点配置介绍
下面字段根据个人需要去修改
网站
| 参数 | 描述 |
|---|---|
title |
网站标题 |
subtitle |
网站副标题 |
description |
网站描述 |
keywords |
网站的关键词。支持多个关键词。 |
author |
您的名字 |
language |
网站使用的语言。对于简体中文用户来说，使用不同的主题可能需要设置成不同的值，请参考你的主题的文档自行设置，常见的有 zh-Hans和 zh-CN。 |
timezone |
网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置，如 America/New_York, Japan, 和 UTC 。一般的，对于中国大陆地区可以使用 Asia/Shanghai。 |
网址
| 参数 | 描述 | 默认值 |
|---|---|---|
url |
网址, 必须以 http:// 或 https:// 开头 |
|
root |
网站根目录 | url's pathname |
permalink |
文章的 永久链接 格式 | :year/:month/:day/:title/ |
permalink_defaults |
永久链接中各部分的默认值 | |
pretty_urls |
改写 permalink 的值来美化 URL |
|
pretty_urls.trailing_index |
是否在永久链接中保留尾部的 index.html，设置为 false 时去除 |
true |
pretty_urls.trailing_html |
是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效) |
true |
文章
| 参数 | 描述 | 默认值 |
|---|---|---|
new_post_name |
新文章的文件名称 | :title.md |
default_layout |
预设布局 | post |
auto_spacing |
在中文和英文之间加入空格 | false |
titlecase |
把标题转换为 title case | false |
external_link |
在新标签中打开链接 | true |
external_link.enable |
在新标签中打开链接 | true |
external_link.field |
对整个网站（site）生效或仅对文章（post）生效 |
site |
external_link.exclude |
需要排除的域名。主域名和子域名如 www 需分别配置 |
[] |
filename_case |
把文件名称转换为 (1) 小写或 (2) 大写 | 0 |
render_drafts |
显示草稿 | false |
post_asset_folder |
启动 Asset 文件夹 | false |
relative_link |
把链接改为与根目录的相对位址 | false |
future |
显示未来的文章 | true |
highlight |
代码块的设置, 请参考 Highlight.js 进行设置 | |
prismjs |
代码块的设置, 请参考 PrismJS 进行设置 |
分类/标签
| 参数 | 描述 | 默认值 |
|---|---|---|
default_category |
默认分类 | uncategorized |
category_map |
分类别名 | |
tag_map |
标签别名 |
时间/日期
| 参数 | 描述 | 默认值 |
|---|---|---|
date_format |
日期格式 | YYYY-MM-DD |
time_format |
时间格式 | HH:mm:ss |
updated_option |
当 Front Matter 中没有指定 updated 时 updated 的取值 |
mtime |
部署hexo至github
在github去注册一个账号并新建一个仓库
注意 ：若你github账号名为 例：moyuran
那么你的仓库名字必须为 账号名 .github.io 即 moyuran.github.io
创建git秘钥
在桌面右键选择git bash（无需再文件夹操作）
执行下面命令(自己替换自己github的邮箱)
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 312.516px;">ssh-keygen -t rsa -C “xxxxx@email.com“
</pre>
|
提示输入信息的话直接回车就可以
下来继续执行下面代码
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 181.656px;">cat ~/.ssh/id_rsa.pub
</pre>
|
复制输出的秘钥
然后去github选择 设置 选择 SSH and GPG keys 再选择 new ssh key
随便命名，将复制好的秘钥贴进去保存即可。
接着桌面右键打开git bash并执行下面命令
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 181.656px;">ssh -T git@github.com
</pre>
|
在接下来的交互命令里输入yes即可
打开github我们刚才创建的仓库复制我们的ssh地址（如下图）
[[图片上传失败...(image-364161-1637370014785)]](file:///C:/Users/Administrator/Desktop/QQ%E6%88%AA%E5%9B%BE20211027201839.png)
复制后找到我们本地博客目录下的 _config.yml 文件，将底部字段修改如下
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
2
3
4
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 244.672px;">deploy:
type: git
repo: 这里是上面复制的ssh地址
branch: main
</pre>
|
在本地博客目录下打开git bash并执行
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
2
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 376.203px;">git config --global user.name "你的github名字"
git config --global user.email "你的github邮箱"
</pre>
|
然后再执行
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 250.922px;">cnpm install hexo-deployer-git
</pre>
|
若没有报错，接下来我们就可以将博客上传至github仓库并通过网络访问我们的博客了
清除缓存命令
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 96.9844px;">hexo clean
</pre>
|
在本地博客目录下打开git bash并执行
PLAINTEXT
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", sans-serif !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 89.2812px;">hexo g -d
</pre>
|
执行完毕后，我们在浏览器地址栏输入 xxxxx.github.io 就可以看到我们的博客了
这个地址就是我们刚才创建的仓库名字
若想用一个自己的域名去访问这个站点方法也比较简单.
免费域名申请地址： 点击前往
免费CDN解析地址：点击前往
免费logo制作地址： 点击前往
