【保姆级】利用Github搭建自己的个人博客

概述

之前闲着没事,就利用Github建了一个个人博客网站,效果还不错,今天就来分享一下.
建立自己个人博客网站的好处:
1.面试装逼,这个不必多说…
2.把平时积累的知识和项目记录下来,方便日后查看使用
3.不受其他博客平台的限制

准备工作

开始之前,先大致介绍一下用到的技术和相关概念

Github是什么:
GitHub是一个利用Git进行版本控制、专门用于存放软件代码与内容的共享虚拟主机服务,很多人都把它称作程序员的同性交友网站,具体为啥这么叫我也不知道

GitHub Pages是什么？
Github Pages设计的初衷是为托管在GitHub上的项目提供介绍页面,开发者们可以通过GitHub Pages为他们的每一个项目创建一个用于介绍该项目的静态网站,不过由于他的空间免费而且稳定,因此用它搭建一个个人博客网站是再好不过了.

Git是什么？
Git是一个开源的分布式版本控制系统,可以有效、高速的处理从很小到非常大的项目版本管理.它的作用
和Svn类似,就是一个版本控制的工具,用它可以将我们写的代码提交到Github上.

Jekyll是什么？
jekyll是一个简单的免费的Blog生成工具,将纯文本转化为静态网站和博客;由于咱们的GitHub Pages生成的是静态页面,每次更新博客都需要手动更改HTML,这就使得每次写博客都变得很麻烦,而用了这个工具以后,它会根据预先设置好的格式来生成博客内容,你就无需关心html代码,只需要把重心放在博客的写作上.

Liquid是什么?
Liquid是一种模板语言,可以在HTML页面中使用它;而他的作用就是使用标记、对象和过滤器的组合来加载一些动态内容.

废话不多说,下面来讲讲大致流程
1.登陆你的个Github账号(注册的话这里就不讲了…)
2.新建一个仓库用来保存个人网站项目
3.把做好的个人网站上传到Github上
4.上传成功后,根据域名来访问你的主页

01、环境准备

在搭建Github博客之前，先准备一下环境（安装下方的顺序来安装，别弄混了）

1.安装git

官方地址：https://git-scm.com/

1、访问git官方地址，下载对应的安装包，进行安装（简单的点击下一步）。

2、安装好之后，鼠标右键可以看到：Git Bash Here，点击后打开了。

3、输入：git –version

出现这个说明git安装成功。

2.安装node.js

官方地址：https://nodejs.org/en/download/

1、访问nodejs官方地址，下载对应的安装包，进行安装（简单的点击下一步）。

2、安装好之后，配置环境变量，并在终端里面输入：node -v

出现这个说明nodejs安装成功~

3.安装Hexo

安装命令：npm install hexo -g

测试是否安装成功，命令：hexo -v

4.安装hexo依赖

命令：npm install –save hexo-deployer-git

02、git配置SSH key
相信看到本文的你应该听过github，并且也注册了自己的github账号，如果现在还没有的可以去github注册一个账号。

为什么要配置SSH key？

目的：可以免密的将本地的源码和资源上传到github，无需要每次都输账号和密码。

先看本地是否配置好SSH key（命令：cd ~/.ssh）

这里我之前就配置了，现在删除配置，重新配置一边，方便读者可以跟着进行配置。

再次查看

可以看到提示：/c/Users/Administrator/.ssh: No such file or directory

备注：

因为ssh配置好之后是保存到 c:/用户/Administrator/.ssh
1.配置ssh
先生成ssh key

ssh-keygen -t rsa -C “邮件地址”

备注：这里的邮件地址是github账号绑定的邮件地址

输入生成命令：ssh-keygen -t rsa -C “邮件地址”后。连续回车三次即可

可以看到在用户文件夹下生成了一个ssh文件夹

接着打开github主页，点击个人设置，点击左侧的SSH and GPG keys，点击New SSH key

将id_rsa.pub复制的内容粘贴到key中，title随便起一个就行

点击 Add SSH key

测试是否成功：

ssh -T git@github.com

输入测试命令后，接着输入yes，出现下面这个提示说明成功

配置账号和密码

$ git config –global user.name “maojunzc” #你的github用户名
$ git config –global user.email “xxx@163.com“ #填写你的github注册邮箱

备注：用户名和邮箱记得改为 自己的

03 搭建个人博客

1.新建博客
开始之前先介绍一下heox的基本命令

hexo new “postName” #新建文章
hexo new page “pageName” #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口（默认端口4000，’ctrl + c’关闭server）
hexo deploy #部署到GitHub
hexo help # 查看帮助
hexo version #查看Hexo的版本
对应的缩写，比如：

hexo n == hexo new

hexo g == hexo generate

新建一个保存博客的存放目录，比如辰哥的是：D:\公众号\0722

进入到本地博客存放目录

初始化 个人博客

命令：hexo init

可以看到博客存放目录出现了如下内容：

生成静态网页
命令：hexo g

预览
命令：hexo s

报错解决：

问题：hexo g报错,line.mathALL is not funciton问题解决
原因：nodejs版本低于12

解决：两种方法

方法1）请将nodejs升级到高于12.0.0的版本

方法2）config.xml中的 highlight->enable的值从true更改为false，这样可以避免异常。

在浏览器这访问：

http://localhost:4000/

这一步可以遇到其他问题可以百度或者查看hexo官方文档，不进行赘述

2.部署到github

新建一个github仓库

给仓库起个名称，注意！注意！注意！

仓库名称格式： 用户名.github.io

我的仓库名称为：maojunzc.github.io

因为这个仓库名称将作为你github博客的访问地址
编辑_config.yml，_config.yml在博客存放目录下

deploy:
type: git
repository: git@github.com:liyunchen/liyunchen.github.io.git
branch: main

repository仓库地址改为自己的

branch看自己的github仓库是master还是main，我的是main，所以就填写main

发布到github

命令：hexo d

在浏览器访问

https://maojunzc.github.io/ （你自己的blog网址）
可以看到成功访问

这个博客地址已经是部署到了公网，感兴趣的读者也可以访问

最后编写博客不进行赘述，自行理解或者百度

编写好之后，开始部署到github

1.生成html文件

hexo g

2.上传到github

hexo d