Github+Hexo 搭建一个个人博客

前言:

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

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

 

 

 

 

 


创建仓库

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

然后,到你的设置(setting)中,下拉找到 github page,选择主分支为源:

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

 

 

 


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: 公益404
  something: 有料

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

 menu_icons:
  enable: true
  # Icon Mapping.
  home: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: 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: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-shizuku
  display:
    position: right
    width: 150
    height: 300
  mobile:
    show: true

 

 

 

 

 

 

 

 


 

 

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

 

发表评论