Hexo + Github Pages搭建的个人博客

时间:2022-09-04 17:14:56

这个不算是新手的搭建流程,如果你恰巧看见这篇文章,希望你已经安装好node、git等软件,因为第一步的环境搭建准备并没有详写,默认都会了。希望能解决你的问题。

步骤:

一、 搭建环境准备
二、安装hexo
三、配置hexo,将其与github page 联系起来
四、发布文章
五、更换主题及简单配置

一、 搭建环境准备

这里包括node.js的安装、git的安装、git账号注册和新建git项目
注意: 新建项目的时候,项目名称也就是Repository name的格式必须是:yourgithbuName.github.io,这里的yourgithbuName必须和你的github名称保持一致

这个问题下面会说到,因为我没注意,也踩了这个坑了。

二、 安装hexo

cnpm install hexo -g

安装完毕后,不确定是否安装成功,可以通过 hexo -v查询,会出现下面信息:
Hexo + Github Pages搭建的个人博客

之后新建一个空的文件夹,暂且叫mjblog吧,在mjblog文件夹下使用gitbash初始化项目 hexo init
过程中,如果遇到网络不好,可能会出现超时的问题,问是否要尝试删除你新建的文件夹,填n(NO)就好了。
Hexo + Github Pages搭建的个人博客
Start blogging with Hexo! 成功,并且文件夹里多了hexo相关文件.

scaffolds            # 模板文件
source               # 文章的集放点。里面有个一篇默认的hello-world.md
node_modules         # 相关模块包
themes               # 主题包。站点的最终样子会根据主题来生成页面
_config.yml          # 站点配置,例如和github pages相关的配置都在这里填写

执行 hexo s(hexo server),启动本地服务,会出现下面这句提示:
Hexo + Github Pages搭建的个人博客

浏览器打开http://localhost:4000/,就会看到hexo的默认主题页面了。
Hexo + Github Pages搭建的个人博客

三、 配置hexo,将其与github page 联系起来

在mjblog文件夹的下有个_config.yml的文件。打开找到Deployment这个字段(在文末),添加这句的git pages信息。例如下面是我的对应配置。

deploy:
  type: git
  repo: git@github.com:mjtomato/mjliublog.github.io.git
  branch: master

repo这个地址去项目上复制黏贴就行了。
想知道有没有成功,生成部署一下就行了。但这之前,先了解hexo几个常用命令行:

1. hexo generate (hexo g)   #生成静态文件,会在当前目录下生成一个新的叫做public的文件夹
2. hexo server (hexo s)     #启动本地web服务,用于博客的预览
3. hexo deploy (hexo d)     #部署播客到远(比如github, heroku等平台)
4. hexo new "postName"      #新建文章
5. hexo new page "pageName" #新建页面
6. hexo clean               #删除已经生成的静态页面(即public文件夹)

ok,现在就可以执行命令了。
第一步:生成静态资源

hexo g

第二步:部署

hexo d

但很多时候,这两个步骤是可以一块的。

hexo d -g

如果不出意外,这样就可以正常生成部署了。
但是我这边却出现问题:deployer not found: git
Hexo + Github Pages搭建的个人博客
Hexo + Github Pages搭建的个人博客

解决问题:安装一个拓展

cnpm install hexo-deployer-git --save

Hexo + Github Pages搭建的个人博客
之后重新生成部署hexo d -g,按道理来说应该是成功了。但我这里发生一个小插曲。我在部署过程中,也在执行着本地服务:hexo server,所以它一直提示下面这个错误。关闭本地服务那个进程就好了。
Hexo + Github Pages搭建的个人博客
正常情况下会提示:
Deploy done: git

然后按着git提示的网址访问,发现东西是出来的,但是css样式,js代码引入路径都错误了...
Hexo + Github Pages搭建的个人博客

奇了怪了,都是按着教程走,怎么到我这就不行了呢。
刚开始想着是不是我的_config.yml文件配置错了,又重新走了一遍,还是不行。又去翻我的git项目,是不是我哪里写错了,始终没发现问题。
最后对比了好几篇搭建文章,终于发现,我的博客地址格式跟别人的是不一样的,开始以为是改版了没留意到这个问题。别人都是 https://xxx.github.io/, 而我的是这样的:
Hexo + Github Pages搭建的个人博客

原来在建项目的时候,要注意一点:
项目名称也就是Repository name的格式必须是:yourgithbuName.github.io,这里的yourgithbuName必须和你的github名称保持一致
Hexo + Github Pages搭建的个人博客

最终会出现这句话:

Your site is ready to be published at https://mjtomato.github.io/.

Hexo + Github Pages搭建的个人博客

打开上面的网址,出现Welcome to GitHub Pages,说明成功了,主题是和你在GitHub Pages选的是一样的。

接着更新_config.yml里面的配置repo,把之前错误的项目地址改成现在的,再重新生成部署一次,刷新页面,发现变成hexo默认主题了。

成功。https://mjtomato.github.io/

四、 发布文章

其实发布文章和上面部署的步骤基本一致了,这里就从零新建文章到部署到git上走一次。

顺序是:新建文章>本地web查看>删除之前的静态资源 hexo clean>生成新的静态资源 hexo g>部署到git上git d(后面两步可以合并成:生成部署资源 hexo d -g)

1. 新建文章
可以在source>_posts直接右键新建一个markdown格式的文件,也可以通过命令行方式新建。

hexo new "testName"

就会发现_post文件夹里多了一个testName文件。
里面默认有三个属性:

---
title: testName                 #testName 就是new时候的名字
date: 2018-07-15 14:41:17       #默认带上新建文件夹的时间
tags:                           #文章的标签,可自己添加分类
---
这里就是写文章内容的地方了。

2. 删除之前的静态资源 hexo clean
一般这一步正常情况下不执行也可以,但是当 hexo d -g 执行完,发现有问题的时候或者是不成功时,就很有必要先清除一下不完整public文件或者是清除一下缓存了,这里是会删除整个public文件的。然后再重新执行一次 hexo d -g ,直至成功。

3. 生成部署 hexo d -g
执行完hexo d -g , 没问题的话,刷新自己的页面,就会看见新添加的文章了。

五、更换主题及简单配置

1. 安装主题
主题选择里有很多不同风格选择,我选的是比较冷淡风的next主题
在目录下打开gitbash,输入下面命令行

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

Hexo + Github Pages搭建的个人博客

下载完毕之后会在themes文件夹下看见多了一个next文件,这个就是next主题包了。

2. 启用next主题
打开目录下的_config.yml文件,找到theme字段,将原来的landscape换成next。
再重启下本地服务 hexo s 就可以看到新的主题已经更换了。
Hexo + Github Pages搭建的个人博客
ps: 没错,这里你会发现我的名称、描述、作者都改成自己的了,这个是在站点配置文件_config.yml里修改的。(就在文件开头)

# Site
title: MJBlog                    # 你的博客名字
subtitle:                        # 副标题
description: 慢慢尝试,总会有的!  # 描述
author: jiaminLiu                # 作者名称
language: zh-Hans                # 站点语言
timezone:                        # 时区

修改更新、重启本地服务就好啦~~

3. 更改next主题配置
每个主题包下面都有个和站点目录下同名的_config.yml文件,修改主题包下的配置会对应修改主题展示。包括了主题设计、站点语言、站点菜单等等。
下面我按自己的需要对应修改:(以下说的_config.yml文件都是指主题包下面的)

  1. 主题设计
    搜索Schemes,在下面发现有四种选择,每个都看了一下,最后我选的是Gemini,其实Gemini和Pisces好像没差。
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

但是呢,这里有个问题,选择这个主题设计之后,你会发现页面上的菜单都变成德语了??
Hexo + Github Pages搭建的个人博客
查了下原因,原来是Hexo 在生成主题的时候将使用你选择的主题设计去查找对应的语言翻译,并提取显示文本。这些翻译包在主题包下的language文件夹里。
像我选的Gemini对应的语言翻译是de.yml。于是,我将de.yml中德语都改成中文了(最简单做法,找到zh-CN.yml那份,然后复制过去覆盖原来的,就搞定了,耶!)

  1. 站点语言
    上一步完成之后,发现整个页面又变成英文了。这个又为啥啊??而且我的站点配置里也已说明是中文了。
    原来这个主题默认翻译是英文的,不信可以看看default.yml这个文件,里面就只写着en.yml。所以我们还需要把主题包下面的language字段的值改为zh-Hans

  2. 设置头像
    搜索Sidebar Avatar,找到avatar,下面有个url字段,默认是这样的
url: # /images/avatar.gif

需要将它打开,就是去掉#号。默认是个灰色的头像,可以找个自己喜欢的图片放到source/images/下面
我的改成这样

url: /images/avatar.jpg

Hexo + Github Pages搭建的个人博客

暂时我需要修改的就这么多了,更多配置,可以查看官方文档

以上就是Hexo + Github Pages搭建的个人博客简单版。暂时使用是没问题的啦。其他的功能,例如站点统计,阅读次数统计等之后再添加。


添加百度统计

  1. 注册一个 百度统计 账号
  2. 新增自己的网站
    Hexo + Github Pages搭建的个人博客
    例如我的:
    网站域名: mjtomato.github.io
    网站首页:https://mjtomato.github.io/
    填完这两个点确定就可以了
  3. 获取百度统计id
    代码管理 > 代码获取页面有段统计代码
    Hexo + Github Pages搭建的个人博客
    复制我用红色覆盖那个统计id
  4. 修改baidu_analytics字段
    在主题包下的配置文件里找到baidu_analytics字段,将复制的统计id设置成它的值。

搞定~~~

阅读数统计
next主题作为github上星数最多的hexo主题,当然已经有人造好*了。而且next主题已经合并这个功能了,所以我们只需要配置_config.yml就可以了,请参考配置LeanCloud

照着上面步骤完成之后,刷新自己的页面,发现文章内的阅读数出错了
Hexo + Github Pages搭建的个人博客
点击控制台的链接进去,按着提示完成即可传送门