使用Github和Hexo搭建个人博客系统

利用Github和Hexo搭建个人博客

作为一名开发人员,写技术博客既是一种对知识的巩固,也是一种分享精神。所以有一个自己的技术博客,对于我们技术人员来说,是很nice的一件事。

1、条件

​ 如果要使用github搭建自己的博客系统,需要有一个 Github账号 ,我们可以注册一个账号。其次需要一个 node开发环境(nodejs、npm),因为 Hexo 框架需要使用node环境搭建。

  • github账号
  • node、npm环境(省略)
  • 本地安装了git(省略)

本次我的实验环境:

  • MacBook Air m1芯片
  • git 2.33.1
  • node v16.13.1
  • npm 8.1.2

2、注册github账号

​ 相信如果是程序员同学,那一定已经拥有一个自己的github账号了,如果是已经拥有github账号的伙伴们可以直接看 2.2小节

2.1 注册账号

​ github注册账号还是比较简单的,需要一个邮箱就行。但是国内访问会比较慢,所以耐心一点就行,这里略过。

2.2 创建项目

​ 创建项目需要注意的地方是仓库的名字,命名为 你的账号.github.io ,之后个人博客访问的域名就是 https://你的账号.github.io

创建github项目

这里我已经创建过,所以提示已经存在。

​ 项目创建好之后,需要本地把我们的项目拉下来,因为博客内容一般都是在本地写好在上传到github的,而且本地还可以启动服务预览博客,以便我们在正式发布之前,调整内容和样式。这里我们使用 git 协议去拉取仓库,就需要配置 ssh key ,因为直接使用账号密码不太安全,相关账号密码需要配置在配置文件。

2.3 配置ssh key

​ 首先连接过的ssh key会在 ~/.ssh 目录下有 xxx.pub文件,就是公钥。但是是首次连接的话,那么就需要配置一下了,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
# 1.查看.ssh文件夹,是否有配置过密钥
ls ~/.ssh
# 2.如果不存在密钥,则需要创建,如下命令直接三个回车就可以
ssh-keygen -t rsa-C "邮箱地址"
# 3.执行完以上步骤之后,会生成两个文件
id_rsa 和 id_rsa.pub
# 4.使用vim打开id_ras.pub,复制内容到github的公钥配置中
# 5.测试是否已经连通
ssh -T git@github.com
看到结果如下则表示连通:Hi 用户名! You've successfully authenticated, but GitHub does not provide shell access.
# 6.还需要配置下公共的用户名和邮箱
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"

2.4 设置gitbhu pages

​ 找到项目的 Settings -> Pages -> Source ,设置branch和root。

设置Github Pages

3、搭建Hexo环境

​ Hexo是一个快速、简介且高效的博客框架,官网:https://hexo.io/zh-cn/ ,可以在网站下学习他的API、文档、插件、主题等。

3.1 搭建环境

注意: 由于mac系统新版本对 /usr/* 做了权限限制,无法写入,所以我们需要修改下默认的npm全局依赖包的位置。

1
2
3
4
5
6
# 0.修改npm全局依赖仓库位置,并设置到环境变量
mkdir ~/.npm-global
# 1.将新位置加入到环境变量,在./bash_profile中加入以下内容
export PATH=~/.npm-global/bin:$PATH
# 2.修改 .zshrc (因为我用的zsh),加入以下内容
source ~/.bash_profile

​ 接下来我们搭建hexo环境:

1
2
3
4
5
# 1.安装hexo-cli工具(全局)
npm install -g hexo-cli
# 2.安装hexo(可局部安装,我就是安装在了我的博客项目中)
cd ~/projects/dmaker1993@github.io
npm install hexo

3.2 初始化Hexo

​ 我们要使用 hexo 命令初始化一个hexo博客写作环境,相当于是hexo的基本框架:

1
2
3
4
5
6
7
8
9
10
11
# 1.将项目拉到本地某个文件夹,我的是 /Users/adu/IdeaProjects/dmaker1993.github.io
cd /Users/adu/IdeaProjects/
git clone git@dmaker1993@dmaker1993.github.io.git
# 2.进入项目中,初始化hexo框架
cd dmaker1993.github.io
hexo init
# 3.构建demo博客,生成静态文件
hexo generate
# 4.启动本地环境,查看demo
hexo server
# 5.访问localhost:4000

​ 初始化之后的目录结构如下:

hexo目录结构

1
2
3
4
5
6
7
8
.
├── _config.yml # 网站的配置信息,可以配置网站的绝大部分信息
├── package.json # 应用程序的信息,可以不关注
├── scaffolds # 模版文件夹,我们在创建新文章时,可以指定某一个模板来生成新文章(.md文档)
├── source # 存放用户资源文件的地方,同时这里也会存放我们的博客、标签、目录等内容,这里的.md和html文件会被编译到public文件夹
| ├── _drafts # 草稿文件
| └── _posts # 博客文件,这里的博客文件会被编译到public文件夹中
└── themes # 主题文件夹,hexo会根据主题生成博客静态页面

3.3 选择主题

​ 经过 3.2步骤 之后,我们就已经搭建好了一个hexo环境,然后就可以写博客了。但是默认的信息比如 博客名称所有者 等等信息,需要都替换成我们自己的,也就是做一些配置的修改,我们直接修改项目根目录下的 _config.yml 文件, 以下是一些hexo配置信息的修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
title: 网站标题
subtitle: 网站副标题
description: 网站描述
keywords: 网站的关键词。支持多个关键词
author: 作者姓名
language: 语言,对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hans和 zh-CN。
timezone: 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York, Japan, UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai。
url: 网址, 必须以 http:// https:// 开头
theme: 主题,这个是关键,我们可以在网上找一些好看主题
deploy:
type: git
repo: 仓库地址
branch: 分支,一般是master

​ 上述的 theme 就是主题的名字,我们可以到hexo官方提供的列表中选择一个自己喜欢的:https://hexo.io/themes/。我用的是 hexo-theme-melody 这个主题,他的文档也比较全,下面是一些展示:

dmaker1993博客首页
damper993博客内容详情页

​ 更多的可以去看看我的博客:https://dmaker1993.github.io/

3.4 主题下载和配置

​ 在搭建的过程中也是直接看的文档,比较简单,如果有什么问题可以给我留言哦。首先下载主题,因为我下载的hexo是最新的,所以我直接使用npm安装。

1)主题下载

1
npm install hexo-theme-melody

​ 下载之后,我们就可以在 node_modules 目录下找到这个主题的依赖:

hexo主题目录结构

2)设置主题

​ 找到项目跟目录下的 _config.yml ,修改其中的 theme 值为 melody

1
theme: melody # 将主题设置成melody

3)配置

​ 先安装两个渲染插件:

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

​ 然后将 node_modules/hexo-theme-melody/_config.yml 文件复制到项目根目录下,并改名为 _config.melody.yml ,修改其中的一些配置信息,比如我的配置(_config.melody.yml)是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 配置语言的
language: zh-Hans
# 配置菜单的( ':'之前的是展示的名字,之后的是博客中关联的)
menu:
首页: /
归档: /archives
标签: /tags
分类: /categories
#XXX: /xxx
# 社交信息,可以挂一写自己的github,微博什么的
social:
#icon_name fa: url
#icon_name fab: url
github fa: https://github.com/Dmaker1993
weibo fa: https://blog.csdn.net/DMaker1993
# footer设置
since: 2021

全部的主题配置在这里:https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/theme-config.html

4)测试

​ 都配置好之后,我们就可以看一下效果了,执行如下命令:

1
2
3
4
5
6
# 清理
hexo clear
# 构建。hexo generate 简写为:hexo g
hexo g
# 启动服务。hexo server 简写:hexo s
hexo s

​ 正常是一片 Hello World 的demo文章,这里我们就都配置好了,下面我们就可以开始写博客了。

4、写博客

​ 这个过程大概就是:生成博客文档、填充博客内容、构建博客页面、发布。等待几分钟之后,我们在自己的 github.io 页面中就能够看到了。下面我们看一下具体步骤:

1
2
3
4
5
6
7
8
9
10
11
12
# 1.生成博客文档,主要是生成一些hexo必要的配置
hexo new [layout] "博客名称"
## 这个命令会生成 ./source/_posts/博客名称.md 文档
## layout表示模板名称,默认使用post,在./scaffolds中可以看到所有的模版
# 2.写博客,我一般会用 typora 写mk文档
# 3.将写好的mk文档复制到刚才生成的文档中,注意不要覆盖掉之前的配置,比如 title、categories等
# 4.构建
hexo g
# 5.本地预览
hexo s
# 6.发布,就是将本地的代码上传到github,这个过程是完全覆盖现在github上的内容的,所以一定要先拉下来。
hexo d

创建新博客
创建结果
创建博客默认内容

​ 这里需要看一下最后一步 发布 过程,第一次如果发布失败,可能需要安装插件 hexo-deployer-git

1
npm install hexo-deployer-git --save

​ 然后确认下 _config.yml 中git配置是否正确:

1
2
3
4
deploy:
type: git
repo: <repository url> #https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io
branch: [branch] 默认maste

​ 以上配置之后,在使用 hexo d 命令发布,等待几分钟,在 您的账号.github.io 中便可以看到内容。

注意:因为发布过程是直接覆盖github内容,所以在写博客之前,先将github内容拉到本地,然后在发布!!!

5、总结

​ 综合以上内容,安装nodejs、npm、hexo,再有一个github账号,我们就可以免费拥有一个自己的博客系统啦~其实搭建的过程中还是会遇到很多困难,但是跟着看文档就都可以解决掉。而且 hexohexo-theme-melody 文档都支持中文,更方便了,赶紧搞起~

参考:

  1. https://hexo.io/zh-cn/docs
  2. https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html
  3. https://molunerfinn.com/hexo-theme-melody-doc/zh-Hans/quick-start.html
  4. https://dmaker1993.github.io/

欢迎浏览我的更多文章:一名不愿透露姓名的程序员 或者 https://dmaker1993.github.io

最后:因小的才疏学浅,如有问题,请不吝指出,感谢感谢~

文章作者: secret
文章链接: https://dmaker1993.github.io/2021/12/27/使用Github和Hexo搭建个人博客系统/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 许可协议。转载请注明来自 一名不愿透露姓名的程序员