用github-hexo搭建博客

2020-06-04

准备工作

github账号
安装node.js ,nmp
安装Git

创建github仓库

新建一个名为你的用户名.github.io的仓库，比如说，如果你的github用户名是test，那么你就新建test.github.io的仓库，将来你的网站访问地址就是 http://test.github.io 了（取别的名字也可，但是到时候你的域名就比较长了，所以建议还是用上面的规则建仓库，所以好的用户名很重要啊）

用github-hexo搭建博客-1

我这块出错是因为我已经建了这样的一个库了，所以会失败。然后点击下面的create repository进入下一个界面。

用github-hexo搭建博客-2

用github-hexo搭建博客-3

注意按照设置做好，上面的那个就是你的域名了，在choose a theme选择一个主题，确定之后，进入上面的那个域名，应该可以看到hello world界面，这一步就算是完成了。

配置ssh

由于我们需要提交代码，所以用密码登录还是有点麻烦的，并且不太安全，所以我们创建一个ssh登录

打开cmd命令行

1	ssh-keygen -t rsa -C "邮件地址"

连续三次回车就可以了，然后进入c盘中的user/dell/.ssh下寻找你刚创建的id_rsa.pub文件，打开它，然后复制到github的SSH and GPG keys里面的keys里面，Title随便填。（我没截进去的图，你们自己找吧）

用github-hexo搭建博客-4

然后测试下成功了没有

1	ssh -T git@github.com //注意邮箱地址不用改

如果成功了，会显示下面这句话

Hi 0xTwoNan! You've successfully authenticated, but GitHub does not provide shell access.

然后在配置下（这个无法配置的话可以等到之后下载了git之后在继续配置），不慌。

1 2	git config --global user.name "0xTwoNan"// 你的github用户名，非昵称 git config --global user.email "xxx@qq.com"// 填写你的github注册邮箱

node.js git hexo下载

git网址：https://git-scm.com/

node.js：https://nodejs.org/zh-cn/download/ 下载完成之后可以在cmd命令行中输入npm -v显示出版本号就是下载成功了。

都没啥难的，也没啥注意的，直接下载就好了。

然后打开git下载hexo（鼠标右键，Git Bash Here）

1	npm install -g hexo

之后hexo -v查看是否安装好了。

这一步搞完之后别忘记了上面的，没弄好git的载这快配置了。

hexo本地运行

这之后我们需要在电脑中新建一个文件夹命名随便喜欢就好(以后用来存代码的)，我命名就叫hexo，然后在进入文件夹中，打开git（都是打开Git Bash Here）

1
2
3

hexo init      //初始化（然后你就发现多了一堆文件）
hexo g         //生成
hexo s         //启动

这个图我就不截了，进去就是熟悉且亲切的hello world 了。就是主题有点丑。

官方主题：https://hexo.io/themes/

我用的是yilia的主题，下面是下载还是在git里面输入就好。

1	git clone https://github.com/litten/hexo-theme-yilia.git

然后在你的hexo主文件夹里面就会出现一个hexo-theme-yilia文件，把它复制到你的themes里面修改主文件夹夹里的_config.yml参数，

theme: landscape改为theme: hexo-theme-yilia，
还有在最上面的的Site里面改一下相应的参数。

在最下面的Deployment里面按照如下修改

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repository: git@github.com:0xTwoNan/0xTwoNan.github.io.git  //这个是新版本的的写法
  branch: master

这样是给之后你给gitbug上传代码做准备。

然后就可以重新生成一下hexo g，在看看你的情况hexo s查看网站情况，然后在点击全部文章的时候还需要配置一下，这个你们打开自己跟着配置吧。

部署至github以及一些hexo的用法

按照以上配置完成之后最后在安装一个插件

1	npm install https://github.com/CodeFalling/hexo-asset-image --save //0.05版本

然后

1 2	hexo d -g //将你的代码部署到你的blog上。 hexo news "文章名字" //写新博客，会自动建一个md文件在\source\_posts里面，然后直接在下面写正文。

在主页中一篇文章全部展示太长了，

1	<!--more-->

就可以在那块截断了。

本地无法启动hexo

如果是完全按照这样做的，并且hexo搭建好了，访问不了http://localhost:4000 看一下git给的报错信息，很可能是4000端口被占用了,打开cmd

1
2
3

netstat -aon|findstr "XXXX" //输入想要查看的端口信息
netstat -aon|findstr "4000"
tasklist|findstr "2204"  //最后一行是Pid，想要查看时那个程序占用了就写那个程序，然后终结进程即可

或者在启动博客的时候换个端口

1	hexo s -p 5000 //5000端口打开

还有如果git提示说有漏洞，直接按照它说的修就好了。

坑点

图片无法显示

两个方法，如果你是看我教程做的话，就自动使用的是方法一，不过我建议是使用方法二的，因为其更方便，方法一会造成很多小文件的出现，不推荐使用。

方法一

1
2
3

npm install hexo-deployer-git --save   //错误代码

npm install https://github.com/CodeFalling/hexo-asset-image --save  //正确代码

使用下面的代码在git上运行之后，下载出来的是0.05版的，这样在source/_post文件下新建一个文件夹，把图片放进去，在.md文件里面用！[图片描述]（新建的文件夹/图片名）就可以显示图片了。

下面是运行代码之后显示的，版本我框起来了。其他的什么改js文件，命名我都试过了，都不行，就发现这一个可行的。上面的我也改了，如果按照我上面说的来做，是不会遇到这个问题的了。

用github-hexo搭建博客-5

方法二

微博图床（chrome小插件，现在在firfox也有）

进入应用商店直接下载，下载完之后直接将需要的文件拖入其中，之后我们就可以copy相应的链接使用了，一般使用的是第四个，markdown语法的。

头像

这个纯属是自己没注意，头像的设置是在主题的_config.yml里面的avatar处修改的。

也就是在theme/yilia/_config.yml里面修改的，在yilia/source里的img目录下放入你的头像然后修改为以下样子

1	avatar: /img/avatar.png //avatar.png就是我的头像

参考文章：https://www.cnblogs.com/liuxianan/p/build-blog-website-by-hexo-github.html#hexo%E7%AE%80%E4%BB%8B

参考文章：https://icevil.cn/2020/02/11/%E4%BD%BF%E7%94%A8github-hexo-next%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/

那块有问题也可以看看这两个文章，我也是看着无数人文章搭的。