# 使用Hexo-Github-Pages搭建个人博客

一直想创建一个自己的博客,来记录一些学习的笔记或者分享一些好玩的东西。但是由于各种原因一直搁置的。爬了一天的坑终于创建好了自己的博客😄。使用的是Hexo配合GithubPages。现在就来记录一下。

  • 先说明几个名称所在的位置或代表的意思
名称 位置
站点根目录 初始化时创建的文件夹
站点配置文件 根目录下的 _config.yml 文件
主题配置文件 站点根目录/themes/next/_config.yml

# 1. 用Hexo在本地搭建一个博客

使用Hexo是需要Node.js

# 1.1 安装Node.js

Node.js官网(opens new window)

检查是否安装成功在CMD中输入

node --version

如果显示版本号则成功

# 1.2 安装git

git官网(opens new window)

git --version

显示版本号则成功

# 1.3 使用npm安装Hexo

安装git后会有一个git bash终端。推荐使用这个来进行后续的命令操作。

npm install -g hexo-cli

# 2. 快速使用

  1. 在任意地方创建一个文件夹并右键打开git bash终端。依次输入:
hexo i blog   // i是init初始化的缩写,blog是项目名,可以任意起名字
cd blog       // 切换到站点根目录
hexo g        // g是generetor的缩写 用于生成网站静态文件到默认设置的 public 文件夹。
hexo s        // s是server的缩写,启动本地服务器,用于本地的预览。成功后再进行部署。

ctrl+c是关闭本地服务器
  1. 在浏览器中localhost:4000查看:

FFGGSs.png(opens new window)

如果显示这个页面就表示已经成功了。这个就是Hexo的默认博客主题。

博客主题可以进行更换,我是用的是Next。

# 3. 更换Next主题

  1. 在站点根目录输入
git clone https://github.com/iissnan/hexo-theme-next themes/next
// 意思是将Next主题放在themes文件夹下
// Next文件夹的路径不能错,不然会不起作用
  1. 打开站点配置文件,找到theme字段,并将默认值 landscape改为next。注意属性和值之间的空格

FFJy4g.png(opens new window)

  1. 在终端中输入
hexo clean // 清楚本地缓存
hexo g     // 重新生成代码
hexo s     // 部署到本地服务器

// 接着在浏览器输入 localhost:4000

FFGlFg.png(opens new window)

如果显示这个界面,就是切换主题成功了。

  1. Next主题有多个可以选择

打开主题配置文件,定位到下图所示位置

FFdwuj.png(opens new window)

  1. 接着重新clean和generator。启动本地服务器,查看效果:

FFG3Wj.png(opens new window)

# 4. 部署到github上

  1. 在github上创建一个仓库,名字必须为 你的名字.github.io

FFwQRU.png(opens new window)

完成后在浏览器输入

你的名字.github.io
// 如:youngle316.github.io
  1. 创建ssh连接电脑和github(请查看网上教程,这里不做介绍)
  2. 将Hexo的代码部署到github上
  • 修改Hexo站点的配置文件

FFw8sJ.png(opens new window)

// 格式要严格按照这个格式写,注意属性和值中间有空格。
// repository后面写的是仓库的ssh
  1. 接着进行部署
// 在主站根目录下
npm install hexo-deployer-git --save  // 安装插件

hexo d    // 进行部署

这时再访问你的网站就会显示你的博客界面

FFwWJf.png(opens new window)

# 5. 博客的美化

博客的美化的点很多,我主要是参考了这两篇文章来进行美化的

参考一(opens new window)

参考二(opens new window)

根据这两篇文章博客大体风格已定,不会有大的更改。这里只记录一下以后可能会需要更改的地方、上面文章没有提到的地方。

# 5.1 更改头像

blog/_config.yml中添加头像地址链接

FFopo6.png(opens new window)

我这里使用的是路过图床(opens new window) ,也可以使用本地的图片。

# 5.2 更改title等内容

blog/_config.yml中进行设置

FFo1Sg.png(opens new window)

# 6. 新建文章

在站点根目录用终端写入命令

hexo new "文章名"

然后就在blog/source/_posts中就可以看见文章了。编辑完之后,用hexo ghexo d就可以部署到github了。

自动创建的.md文档会有如下的开头

title: 使用Hexo+Github Pages搭建个人博客 // 标题 自动生成的
date: 2018-11-24 09:32:19    // 创建日期 自动生成的
tags:     // 标签,自己添加的
- Hexo
- Github
categories:    // 分类, 自己添加的
- Hexo
copyright: true    // 版权信息,自己添加的

// 自己添加的信息。都需要先配置才可以,格式不能改变。具体的方法看上面的参考链接一和二。

# 7. 补充

# 7.1 文章显示 更新于 某年某月某日

FFob7t.png(opens new window)

blog/themes/next/_config.yml中进行设置

FFTec4.png(opens new window)

update_at: false改为true

# 7.2 主页文章显示阅读全文按钮

推荐使用<!--more-->

  • 使用方法: 在.md文档中
// 首页需要显示的内容。。。
<!--more-->
// 正文内容

FFTD4f.png(opens new window)

# 7.3 留言使用的是 LeanCloud 的Valine

使用方法:

  1. LeanCloud官网(opens new window) 注册成功后,创建一个应用,在应用——设置——应用key里面有App IDApp Key

FFThEq.png(opens new window)

  1. blog/themes/next/_config.yml中进行设置,定位到valine

FFT55V.png(opens new window)

填写appidappkey即可。

# 7.4 添加标题插件

  1. Hexo生成的默认文章链接的格式是这样的。如下图所示:

FkIWjJ.png

这种默认配置的缺点很明显,当新建的文件名是中文时,url链接里面也是中文,不容易看且影响seo优化。

  1. 再看优化后的链接格式:

FkI74K.png

(忽略本地服务器,不想提交两次。)

  1. 优化方法
npm install hexo-translate-title --save
  • 使用步骤。具体看官方文档,我这里只讲我使用的步骤

配置根目录下的_config.yml

# 在最后面添加
translate_title:
  translate_way: baidu_no_appid
  is_need_proxy: false

修改根目录下的_config.yml

# 修改原链接格式:permalink: :year/:month/:day/:title/
permalink: blog/:translate_title.html
# 也可以更改为自己的结构
Last Updated: 9/7/2020, 3:04:44 PM