Github+hexo搭建个人博客

作者: 依林小镇 | 来源:发表于2021-11-20 09:00 被阅读0次

基于github+hexo全过程
Markdown和微信公众号排版
Github+Hexo搭建个人博客
github+hexo搭建个人博客
Github+Hexo 搭建个人博客
Github+hexo搭建个人博客
同时托管博客到github和coding
Github+Hexo搭建免费个人博客
github+hexo制作个人博客
通过Travis来自动构建博客

利用github仓库部署hexo实现搭建免费个人博客的方法

安装前提

在安装hexo之前首先安装必要工具

点击安装: nodejs

点击安装: git

如果你的电脑中已经安装上述必备程序，那么请直接前往安装 Hexo 步骤。

安装好后右键打开git bash运行如下命令测试是否安装成功

PLAINTEXT

|

|

|

若有版本号输出，则证明安装成功。

安装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: 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: 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: 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

|

|

|

若执行一半卡住不动就可以使用我们刚才安装的国内镜像

按下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: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 112.375px;">cnpm install
</pre>

|

等待命令跑完之后我们再输入下面命令检查一下

PLAINTEXT

|

|

|

有版本号输出则为成功

本地运行检查

输入下面命令将博客初始化

PLAINTEXT

|

|

|

若返回代码里有 http://localhost:4000 这样一段链接我们把它复制并粘贴再浏览器地址栏就可以看到我们的博客了

若没有上面链接并且报错，请自行检查

更换主题

hexo提供了很多好看的主题，并且都是免费的

地址：https://hexo.io/themes/

说说怎么替换主题

再博客安装好后所在的目录下有一个名为_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: 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: 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

|

|

|

复制输出的秘钥

然后去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: 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: 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: 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: 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: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 96.9844px;">hexo clean
</pre>

|

在本地博客目录下打开git bash并执行

PLAINTEXT

|

|

|

执行完毕后，我们在浏览器地址栏输入 xxxxx.github.io 就可以看到我们的博客了

这个地址就是我们刚才创建的仓库名字

若想用一个自己的域名去访问这个站点方法也比较简单.

免费域名申请地址：点击前往

免费CDN解析地址：点击前往

免费logo制作地址：点击前往

网友评论

本文标题：Github+hexo搭建个人博客

本文链接：https://www.haomeiwen.com/subject/nlyytrtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

Github+hexo搭建个人博客

安装前提

在安装hexo之前首先安装必要工具

安装hexo

创建博客

本地运行检查

更换主题

Plugins: https://hexo.io/plugins/

Themes: https://hexo.io/themes/

站点配置介绍

网站

网址

文章

分类/标签

时间/日期

部署hexo至github

创建git秘钥

相关文章

基于github+hexo全过程

Markdown和微信公众号排版