前言

​ 本篇文章我将为各位提供完整的GitHub博客的搭建方式以及一些在本人搭建博客时遇见的问题以及解决方案。

​ 在文章的开始,我想为大家介绍什么是GitHub?维基百科上是这样说GitHub的:GitHub是一个在线软件源代码托管服务平台,使用Git作为版本控制软件,由开发者Chris Wanstrath、P. J. Hyett和汤姆·普雷斯顿·沃纳使用Ruby on Rails编写而成。GitHub同时提供付费账户和免费账户。这两种账户都可以创建公开或私有的代码仓库,但付费用户拥有更多功能。根据在2009年的Git用户调查,GitHub是最流行的Git访问站点。除了允许个人和组织创建和访问保管中的代码以外,它也提供了一些方便社会化共同软件开发的功能,即一般人口中的社群功能,包括允许用户追踪其他用户、组织、软件库的动态,对软件代码的改动和bug提出评论等。GitHub也提供了图表功能,用于概观显示开发者们怎样在代码库上工作以及软件的开发活跃程度。截至2022年6月,GitHub已经有超过5700万注册用户[6]和1.9亿代码库(包括至少2800万开源代码库),事实上已经成为了世界上最大的代码托管网站和开源社区。

​ 由此可知,GitHub是当今世界上最大的开源源码的交流平台,如果各位想将自己的学习技术以及心得记录下来,GitHub的blog毫无疑问是各位的首选。

本篇文章我将分为六个节点来讲解GitHub博客的搭建以及搭建博客中遇见的问题的解决方法:1.环境的准备,2.配置ssh key方便上传,3.个人博客的搭建和主题的更换,4.如何编写md文件以及博客文章的上传,5.搭建博客中遇见的问题及解决方案,6.总结。

01.环境的准备

1.安装git

​ git官方网址:Git (git-scm.com)

git官网页面

点击downloads处下载,选择自己对应的操作系统的git版本(此处我将以windows x64位版本为各位演示操作)。

git下载界面

安装完成git后即如下图所示,鼠标右键,点击Git Bash here,即可在任意文件位置打开git终端。

git安装完成界面

此时我们需要检验git是否安装成功和完全

git –version //检验git是否安装成功

git安装成功界面

2.安装node.js

​ node.js官网地址:Node.js (nodejs.org)

node.js官网界面

选择自己所对应的操作系统的版本进行下载安装。

安装完成后,我们需要对node.js进行环境变量的配置:

​ 步骤一:在【个人电脑】右键→【属性】→【高级系统设置】→【环境变量】

环境变量设置

​ 步骤二:点击环境变量→查看node.js的环境变量是否添加在了path中

检查nodejs环境变量

如若path中已经包含,不做更改配置完成,如若没有,添加上nodejs的安装位置路径。

检查完环境变量后我们通过git Bash检验node.js是否安装完成。

node -v //检验node.js安装情况

检验nodejs是否安装完成

3.安装hexo

hexo官网:Hexo

npm install hexo -g //git安装hexo命令

hexo安装

接下来检验hexo是否安装成功

hexo -v //检验hexo是否安装成功

hexo安装成功

安装hexo成功之后我们便要安装hexo的依赖(安装在需要根目录下)

npm install –save hexo-deployer-git //安装hexo依赖命令

安装hexo依赖

以上便是博客搭建的所有环境的安装与配置。

02.配置SSH key方便上传

1.检验本地是否配置ssh

cd ~/.ssh //查看本地是否配置过ssh

本地未配置ssh

如上图所示即为本地未配置ssh,那么如何配置ssh呢?

2.配置ssh

步骤一:生成ssh key

ssh-keygen -t rsa -C “你的邮箱地址” //邮箱地址为GitHub账户绑定邮箱

![创建ssh key](./Github个人博客搭建教程/创建ssh key.png)

输入ssh key生成命令后,连续回车三次即可生成关于你的邮箱的ssh key。

步骤二:将用户文件夹下的ssh文件夹中的id_rsa.pub文件中的全部内容复制到剪贴板

步骤三:点击GitHub的个人设置点击SSH and GPG keys,点击New SSh key

github设置ssh

步骤四:配置ssh key(title自己设定,key填入刚刚复制的id_rsa.pub内的全部内容)

配置GitHub的ssh key 配置完成ssh

步骤五:检测是否成功配置

ssh -T git@github.com //检验ssh key是否配置成功

检验是否配置成功

步骤六:配置账户和密码

git config –global user.name “用户名” //GitHub用户名

git config –global user.email “邮箱” #GitHub注册邮箱

配置账户和密码

以上即为配置ssh key的完全步骤。

03.个人博客的搭建和主题的更换

1.创建博客存放目录,初始化博客

单独在你想要保存博客的盘符中创建一个博客目录,例如安装hexo依赖的目录中创建一个以你博客命名的文件夹,鼠标右键打开git终端。

hexo init //初始化hexo界面命令

通过hexo init的命令在博客文件夹初始化个人博客

初始化个人博客

hexo g //生成静态网页

hexo s //在本地创建hexo静态页面预览,在上传至github仓库前可以通过此条命令先预览上传的效果

通过hexo s命令生成预览,访问localhost:4000进入预览界面,访问成功,界面如下图所示,此时我们成功的初始化了自己的个人博客

hexo标准静态页面

2.更换博客主题

初始化成功,我们可以在hexo的官网下载其他的主题来更换静态页面的主题,接下来所讲的便是如何更换主题。

hexo主题界面

在这里我将用主题MiccallTheme作为演示如何更换博客

miccalltheme

在hexo主题界面中选中自己心仪的主题,点击进入存储这个主题的GitHub存储库,下载下来的压缩包放在所建博客文件夹中的themes文件夹中解压出来

hexo主题下载完成

回到博客文件夹打开_config.yml配置文件,点击编辑,找到theme所在的位置,将其数值修改为你所下载的主题的文件夹的名字。

修改主题

将_config.yml文件保存,点开git终端,输入hexo clean清除缓存,再输入hexo g 重新部署静态网页,再次输入hexo s生成本地静态页面

新主题本地静态页面

此时我们的博客主题就更换完成了。

3.部署博客到GitHub上

步骤一:新建一个GitHub存储库

打开github新建一个GitHub存储库

创建储存库界面

点击创建,储存库名称命名格式为:用户名.github.io。

储存库创建

步骤二:配置_config.yml配置文件

配置_config.yml配置文件,进入到 _config.yml文件找到deploy进行修改

deploy:
type: git
repository:git@github.cm:用户名/用户名.github.io.git
branch: main //看自己设置的是master还是main

配置

步骤三:发布到GitHub

通过hexo d命名将本地数据部署到远端服务器(例如:GitHub)

将博客部署至GitHub

访问http://huameigao.github.io,访问成功,证明博客已经上传至了GitHub。

部署成功

04.编写md文件以及博客的上传

1.如何编写md文件

什么是md文件?

md即markdown,Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式。一般我们会使用Typora软件来编写md文件。以下我给出了软件的下载地址以及官方教程。

Typora官网:Typora 官方中文站 (typoraio.cn)

markdowm官方教程:Markdown 官方教程

2.上传博客

编辑_config.yml配置文件找到post_asset_folder: false的值修改为true,这样做的目的是在生成博客文章md文件时同时生成一个同名文件夹以存储图片

生成图片文件夹

通过hexo new命令生成一个新的博客文章

hexo new ‘博客文章标题’

生成成功

使用md语法编辑博客文章后,再次使用hexo g部署到静态页面上后,即可通过hexo d上传至github。

05.搭建博客中遇见的问题及解决方案

问题一:博客文章图片不显示

常见情况:路径错误

​ 如若出现路径错误导致图片显示不出来,一般情况下是图片的路径被设为了绝对路径,改为相对路径即可,如果你使用的是Typora编辑md文件,可以进入到 文件–>偏好设置–>图像,勾选对本地位置的图片应用上述规则和优先使用相对路径。

其他情况:本地图片无法显示

本地图片无法显示:(89条消息) hexo引用本地图片无法显示_Ericam_的博客-CSDN博客_hexo背景图引用本地

问题二:Error: Spawn failed

解决方案:(89条消息) Hexo部署出现错误err: Error: Spawn failed解决方式_wei-xiansen的博客-CSDN博客_err: error: spawn failed

问题三:hexo d报错

解决方案:[(89条消息) 解决hexo d命令报错 ERROR Deployer not found: git_Java_Mike的博客-CSDN博客_hexo d报错](https://blog.csdn.net/Java_Mike/article/details/96456318?ops_request_misc=%7B%22request%5Fid%22%3A%22167316060216800215046500%22%2C%22scm%22%3A%2220140713.130102334..%22%7D&request_id=167316060216800215046500&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-96456318-null-null.142^v70^one_line,201^v4^add_ask&utm_term=ERROR Deployer not found%3A git&spm=1018.2226.3001.4187)

06.总结

本文从环境的安装到博客的搭建,清晰明了的说明了如何从无到有在GitHub上搭建一个博客,希望本文能够在各位搭建自己博客时成为参考之一。