前言：

我最近想要将计算机界的几个基础课程的学习做一下笔记，可是又不想要写在这个wordpress站上（这个站专门负责花里胡哨的东西），所以我就想在github再创建一个小博客，作为一个分站。

提示：下面的内容需要配置好node.js环境和git环境（git要和github已经关联好了）

创建仓库

登录你的github，创建一个仓库，起名格式：xxxx.github.io

然后，到你的设置（setting）中，下拉找到 github page，选择主分支为源：

点击上面那个生成的链接，就可以访问了。

Hexo

网站建立

先把官网奉上

hexo是一个快速、简洁且高效的博客框架。

我们在本地创建一个目录，以后这个就是你的网站目录了。

然后打开cmd窗口，使用命令（这里建议使用g全局安装）：

npm install hexo -g

等待安装即可。安装成功后，可以使用hexo -v检测

然后我们使用命令进行目录初始化

hexo init

新建完成后，指定文件夹的目录如下：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml是配置文件，这个文件我们会经常用到，后面也会介绍具体可以配置哪些信息。
source是资源文件夹，用来存放我们的markdown文件。
themes文件夹是用来放置主题的

安装时间会比较长，等待结束后，若看见：INFO Start blogging with Hexo!

恭喜你安装成功。

其中的_config.yml写了关于网站的大部分配置，具体规则请参考官网

有一点要注意：_config.yml中的root一定要指定工程名，否则传到github后就只有html页面，没有css等效果，示例：

root: /luoluo.github.io

输入npm install，安装所需要的组件

使用命令来生成静态文件：

hexo generate

使用命令开启服务器：

hexo server

然后我们登陆本机4000端口，就可以看到初始化界面：

发布网站

与github关联

在_comfig.yml文件的末尾，编辑这个deploy

其中 repository 的值可以从github上得到：

然后我们安装一个第三方工具

npm install hexo-deployer-git --save

这个工具可以在我们执行部署操作的时候，自动初始化 git 仓库，并关联到指定 repo 与 branch ，后续 public 文件夹中自动生成的页面代码将会拷贝至此目录中进行代码管理。

安装完成后，我们就可以来测试一下。

使用命令，部署网站（且部署之前预先生成静态文件）：

hexo deploy -g

然后我们在github的setting中打开github page的url，就可以访问了。

发布文章

我们来发布一篇新文章

hexo new "Hello world"

$ hexo new [layout] <title>
新建一篇文章。如果没有设置 layout 的话，默认使用 _config.yml 中的 default_layout 参数代替。如果标题包含空格的话，请使用引号括起来。
$ hexo new "post title with whitespace"参数
描述
-p, --path
自定义新文章的路径
-r, --replace
如果存在同名文章，将其替换
-s, --slug
文章的 Slug，作为新文章的文件名和发布后的 URL

这样就生成了一篇基本文章，在source下面找到这个markdown文件，编辑它，键入markdown语法就可以添加文章内容。

另外，打开文件修改这些自带的内容就可以给文章分类、分标签：

---
title: Hello world
date: 2020-04-22 22:32:42
tags:
---

示例：

---
title: CentOS7下Tomcat启动慢的原因及解决方案
date: 2017-12-02 21:01:24
comments: true #是否可评论
toc: true #是否显示文章目录
categories: "云服务器" #分类
tags:   #标签- centOS- tomcat
---

在新建文章时，Hexo 会根据 scaffolds 文件夹内相对应的文件 post.md 来建立文章，因此我们可以修改它建立自己的文章模板，可用参数如下：

参数	描述	默认值
`layout`	布局
`title`	标题	文章的文件名
`date`	建立日期	文件建立日期
`updated`	更新日期	文件更新日期
`comments`	开启文章的评论功能	true
`tags`	标签（不适用于分页）
`categories`	分类（不适用于分页）
`permalink`	覆盖文章网址
`keywords`	仅用于 meta 标签和 Open Graph 的关键词（不推荐使用）

一个模板配置示例：

title: {{ title }}
date: {{ date }}
tags:
categories:
comments:

对应：

title: Hello World
date: 2018/6/7 19:45:12
categories:   // 分类
- Diary
tags:        // 标签
- PS3
- Games
comments: false  // 评论功能，默认开启

安装主题

hexo的主题口碑是很好的，我们来挑一个顺眼的安装上吧！

https://hexo.io/themes/

我选择了比较火的next主题

切换到Themes目录，使用命令：

git clone https://github.com/iissnan/hexo-theme-next themes/next

下载好后，启用主题：

theme: next # 启用 NexT 主题

接下来我们使用

hexo s --debug  //开启服务器（调试模式）

可以预览一下本机网站，看看效果，看看能否正常打开

配置主题

下面的内容几乎全部照搬这篇文章

在next主题中也有一个_config.yml，我们打开这个文件来编辑，注意：这不是根目录的那个_config.yml了！

选择 Scheme

Scheme 是 NexT 提供的一种特性，借助于 Scheme，NexT 为你提供多种不同的外观。同时，几乎所有的配置都可以在 Scheme 之间共用。目前 NexT 支持三种 Scheme，他们是：

Muse – 默认 Scheme，这是 NexT 最初的版本，黑白主调，大量留白
Mist – Muse 的紧凑版本，整洁有序的单栏外观
Pisces – 双栏 Scheme，小家碧玉似的清新
搜索 scheme 关键字。你会看到有三行 scheme 的配置，将你需用启用的 scheme 前面注释 # 去除即可。

设置语言

language: zh-Hans

设置菜单

在主题中找到menu字段，因为这边我们主要有两个页面，一个是首页还有是一个是归档页面，About和Contact没有对应页面，所以将About和Contact的路由都改为了首页，即/。

1.第一是菜单项（名称和链接）
设定菜单内容，对应的字段是 menu 。
若你的站点运行在子目录中，请将链接前缀的 / 去掉

menu:home: / # 主页archives: /archives # 归档页#about: /about # 分类页#categories: /categories # 标签页tags: /tags # 关于页面#commonweal: /404.html # 公益 404

2.第二是菜单项的显示文本
设置菜单项的显示文本, 在第一步中设置的菜单的名称并不直接用于界面上的展示。Hexo 在生成的时候将使用这个名称查找对应的语言翻译，并提取显示文本。这些翻译文本放置在 NexT 主题目录下的 languages/{language}.yml （{language} 为你所使用的语言）。
以简体中文为例，若你需要添加一个菜单项，比如 something。那么就需要修改简体中文对应的翻译文件 languages/zh-Hans.yml，在 menu 字段下添加一项：

menu:home: 首页archives: 归档categories: 分类tags: 标签about: 关于search: 搜索commonweal: 公益404something: 有料

3.第三是菜单项对应的图标。设定菜单项的图标，对应的字段是 menu_icons 。
此设定格式是 item name: icon name，其中 item name 与上一步所配置的菜单名字对应，icon name 是 Font Awesome 图标的名字。
而 enable 可用于控制是否显示图标，你可以设置成 false 来去掉图标。

 menu_icons:enable: true# Icon Mapping.home: homeabout: usercategories: thtags: tagsarchives: archivecommonweal: heartbeat

在菜单图标开启的情况下，如果菜单项与菜单未匹配（没有设置或者无效的 ==Font Awesome== 图标名字）的情况下，NexT 将会使用作为图标。

请注意键值（如 home）的大小写要严格匹配

侧栏

可以通过修改主题配置文件中的 sidebar 字段来控制侧栏的行为。侧栏的设置包括两个部分，其一是侧栏的位置，其二是侧栏显示的时机。

1.设置侧栏的位置，修改 sidebar.position 的值，支持的选项有：

left - 靠左放置
right - 靠右放置

目前仅 Pisces Scheme 支持 position 配置。影响版本5.0.0及更低版本。

sidebar:position: left

2.设置侧栏显示的时机，修改 sidebar.display 的值，支持的选项有：

post - 默认行为，在文章页面（拥有目录列表）时显示
always - 在所有页面中都显示
hide - 在所有页面中都隐藏（可以手动展开）
remove - 完全移除

sidebar:display: post

已知侧栏在 use motion: false 的情况下不会展示。影响版本5.0.0及更低版本。

设置头像

将头像放置主题目录下的 source/uploads/ （新建 uploads 目录若不存在）配置为：avatar: /uploads/avatar.png 或者放置在 source/images/ 目录下配置为：avatar: /images/avatar.png

给文章贴标签

首先需要确认全局的配置文件_config.yml中有tag_dir: tags，确认过之后就可以新建tags页面啦。命令为：

$ hexo new page tags

此时会在全局的source文件下新建文件夹tags文件夹，修改tags/index.md文件

title: tags
date: 2018-06-06 12:15:14
type: "tags"

全局设置好标签之后就可以给文章贴标签了，在文章的.md文件中添加：

tags:- tag1- tag2

添加过之后，头部如下：

title: test_md
date: 2018-06-06 12:18:25
tags: tag1

设置文章分类

给文章设置分类与上面介绍的设置标签类似，也需要首先确认一下全局的配置文件_config.yml中有category_dir: categories，接着新建categories文件

 hexo new page categories

此时会在全局的source文件下新建文件夹categories文件夹，修改 categories/index.md 文件

title: 文章分类
date: 2018-06-06 12:19:16
type: "categories"

设置好全局的分类之后，就可以设置文章的分类了，在文章的.md文件中添加：

categories:- category1- category2

添加过之后，头部如下：

title: test_md
date: 2018-06-06 12:20:35
categories: cate1

其他

更换域名

购买一个新域名

在域名商那里进行解析：

A解析，解析到github page的ip地址

ping一下你的github page域名，得到ip地址

接下来到我们进入该仓库中点击 setting 往下滑会看到custom domain 将自己购买的域名填写进去

最后一步就是在我们的本地博客路径下的source文件夹里新建一个CNAME的文件（就是文件，没有txt），里面输入我们的域名

然后执行命令 hexo d 重新部署然后打开我们的域名就可以访问啦

很多人变了域名之后发现页面没有了css样式和js表现，我们可以在页面审查元素发现，原来css等文件请求的地址有问题

是因为_config.yml里面的根目录配置有问题，修改成“/”即可

加一个宠物（看板娘）

首先，安装npm包：

npm install --save hexo-helper-live2d

然后，挑选一个中意的模型

github模型地址

预览模型

以live2d-widget-model-shizuku为例，安装即可：

npm install live2d-widget-model-shizuku

然后，在根目录的_config.yml中添加：

live2d:enable: truescriptFrom: localpluginRootPath: live2dw/pluginJsPath: lib/pluginModelPath: assets/tagMode: falsedebug: falsemodel:use: live2d-widget-model-shizukudisplay:position: rightwidth: 150height: 300mobile:show: true

欢迎访问我的博客：is-hash.com

本篇的分站：helloluoluo.com

商业转载请联系作者获得授权，非商业转载请标明出处，谢谢

Github+Hexo 搭建一个个人博客相关推荐

github+hexo搭建自己的博客网站（六）进阶配置(搜索引擎收录，优化你的url，添加RSS)...
详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clo ...
github+hexo搭建自己的博客网站（五）进阶配置(畅言实现博客的评论)
如何对如何搭建hexo+github可以查看我第一篇入门文章:http://www.cnblogs.com/chengxs/p/7402174.html 详细的可以查看hexo博客的演示:https: ...
github+hexo搭建自己的博客【真正的从0到1】20180122为准
基本步骤 1.github官网申请自己的账户注意:只能用户名称作为github.io博客的二级域名,我的用户名称 lushunde321,所以我的github博客网址是:lushunde321.gi ...
如何搭建一个独立博客——简明Github Pages与Hexo教程
(?)[-] http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-a-blog/ 摘要:这是一篇很详尽的独立博客搭建教程,里面介绍了域名注册.DN ...
基于Hexo+GitHub Page搭建免费个人博客教程
1. Hexo 介绍 Hexo 是基于NodeJs的静态博客框架,简单.轻量,其生成的静态网页可以托管在Github和Heroku上. 超快速度支持Markdown 一键部署丰富的插件 2. 搭建 ...
github page hexo博客gitee_利用Github和hexo搭建个人免费博客
利用Github和hexo搭建个人免费博客详细过程: 概述: 详细的介绍了利用github和hexo搭建免费的博客,内容详细,浅显易懂,容易上手,大家一起进来看看吧! 1.配置Github相关操作: ...
hexo搭建自己的博客并部署至免费的github服务器教程
hexo搭建自己的博客并部署至免费的github服务器教程-mac版本打开终端,输入sudo su -命令进入root用户输入npm install -g hexo-cli (前提是按照了node ...
基于hexo搭建个人免费博客——基本设置和了解
2017年最新基于hexo搭建个人免费博客--基本设置和了解前言前面的文章已经能让大家搭建起自己的博客,并通过网络访问了,通过基础的发布文章和编辑既可以实现博客的运作了,其他的一些包括分页和标签. ...
利用Github免费搭建个人主页(个人博客)
之前闲着, 利用Github搭了个免费的个人主页. 涉及: Github注册 Github搭建博客域名选购绑定域名更多一 Github注册在地址栏输入地址:http://github.co ...

Github+Hexo 搭建一个个人博客

前言：

创建仓库

Hexo

网站建立

发布网站

与github关联

发布文章

安装主题

配置主题

选择 Scheme

设置语言

设置菜单

侧栏

设置头像

给文章贴标签

设置文章分类

其他

更换域名

加一个宠物（看板娘）

Github+Hexo 搭建一个个人博客相关推荐

最新文章

热门文章

Github+Hexo 搭建一个个人博客

前言：

创建仓库

Hexo

网站建立

发布网站

与github关联

发布文章

安装主题

配置主题

选择 Scheme

设置 语言

设置 菜单

侧栏

设置 头像

给文章贴标签

设置文章分类

其他

更换域名

加一个宠物（看板娘）

Github+Hexo 搭建一个个人博客相关推荐

最新文章

热门文章

设置语言

设置菜单

设置头像