Hexo + Github Pages搭建的个人博客

最新推荐文章于 2024-11-05 22:28:22 发布

Rose_136312112

最新推荐文章于 2024-11-05 22:28:22 发布

阅读量191

点赞数

文章标签： git markdown 人工智能

原文链接：http://www.cnblogs.com/MJyaaatou/p/9355648.html

版权

这个不算是新手的搭建流程，如果你恰巧看见这篇文章，希望你已经安装好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查询，会出现下面信息：
pic_1

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

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

执行 hexo s(hexo server)，启动本地服务，会出现下面这句提示：
pic_3

浏览器打开http://localhost:4000/，就会看到hexo的默认主题页面了。
pic_4

三、配置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
pic_6
pic_7

解决问题：安装一个拓展

cnpm install hexo-deployer-git --save

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

然后按着git提示的网址访问，发现东西是出来的，但是css样式，js代码引入路径都错误了...
git_2

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

原来在建项目的时候，要注意一点：
项目名称也就是Repository name的格式必须是：yourgithbuName.github.io，这里的yourgithbuName必须和你的github名称保持一致
git_3

最终会出现这句话：

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

git_4

打开上面的网址，出现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

pic_10

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

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

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

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

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

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

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

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

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

url: # /images/avatar.gif

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

url: /images/avatar.jpg

pic_13

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

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

添加百度统计

注册一个百度统计账号
新增自己的网站

例如我的：
网站域名: mjtomato.github.io
网站首页：https://mjtomato.github.io/
填完这两个点确定就可以了
获取百度统计id
在代码管理 > 代码获取页面有段统计代码

复制我用红色覆盖那个统计id
修改baidu_analytics字段
在主题包下的配置文件里找到baidu_analytics字段，将复制的统计id设置成它的值。