一.基本工具准备
1.首先你得有一个GitHub账号吧!没有的话去GitHub官网https://github.com/注册就行,在如下界面注册,具体的注册步骤自己动动小手去实现吧!
2.git的基本工具的下载,下载的地址如下https://git-scm.com/downloads ,如果不会的话可以参考下面的博客https://blog.csdn.net/orange228/article/details/79365795进行安装,具体我就不再叙述啦!
ps ~~安装Git和配置好Git环境,安装成功的象征就是在电脑上任何位置鼠标右键能够出现如下两个选择:
3.接着就是node.js工具的安装啦!直接去官网https://nodejs.org/en/下载就行啦,下载完成后进行安装,一直下一步就行啦!具体步骤就是这么简单,详细也不用我详细叙述啦!我下载的为8.12.0 LTS版本的.
中间小结:安装完成后先用cmd来测试一下安装成功与否:具体命令如下: git --version , 与 node -v 与 npm -v
出现上面的信息也就安装成功啦!
4.在GitHub上面新建一个仓库,如下图:在头像的三角下面啦!
ps~~~项目必须要遵守格式:账户名.github.io,不然接下来会有很多麻烦。并且需要勾选Initialize this repository with a README
点击Create repository就行啦然后来到这个界面先不用管它啦!由于我前面建了个项目,所以我的项目名多加了个o,亲们忽略即可!
5.安装Hexo,在自己认为合适的地方创个文件夹,我是在G:\testhexo建了一个testhexo的文件夹。然后通过命令行进入到该文件夹里面
输入 npm install hexo -g,开始安装Hexo
安装完成后,输入 hexo -v,检查hexo是否安装成功
输入 hexo init ,初始化该文件夹(有点漫长的等待。。。)
看到后面的“Start blogging with Hexo!”,激动有木有!!!!!基本上就行啦!!! 然后在你的文件夹中会生成以下的文件:
就在就是输入 npm install ,安装所需要的组件
输入 hexo g,首次体验Hexo
输入hexo s,开启服务器,访问该网址,正式体验Hexo
如果出现下图就成功啦!
如果你嫌这个默认的主题太丑了,去hexo主题官网https://hexo.io/themes/ ,如果你看中哪一款从GitHub上面克隆下来即可啦!
要看效果点击图就行啦!要克隆GitHub源码,点击上面蓝色的字体即可
在你的项目文件那右键,点击 Git Bash Here ,进去输入 git clone https://github.com/ShanaMaid/hexo-theme-shana.git 克隆到本地即可,然后把你下载下来的主题移到themes里面去即可.
二.中间的一些事情
1.更改皮肤
打开你文件,有个总配置, _config.yml
中有关deploy的部分:
正确写法:(记得下面是有空格的)
deploy:
type: git
repository: [email protected]:fly-tong/fly-tong.github.io.git
branch: master
错误写法:
deploy:
type: github
repository: https://github.com/liuxianan/liuxianan.github.io.git
branch: master
后面一种写法是hexo2.x的写法,现在已经不行了,无论是哪种写法,此时直接执行hexo d
的话一般会报如下错误:
Deployer not found: github 或者 Deployer not found: git
原因是还需要安装一个插件, 此时你的文件里面是没有.deploy_git这个文件的,即是上传上去也会在GitHub pages 哪里报错:
npm install hexo-deployer-git --save
最终你要上传到GitHub上面的文件一定有下面基本的文件的
如果没有.deploy_git文件运行:
hexo d
不然GitHub仓库中setting中的GitHub pages会报语法错误
三.项目发布到GitHub上面
1.首先要通过命令 git init 把这个文件夹变成Git可管理的仓库
这时你会发现TEST里面多了个.git文件夹,它是Git用来跟踪和管理版本库的。如果你看不到,是因为它默认是隐藏文件,那你就需要设置一下让隐藏文件可见。ps ~~前面你可能看到我已经生成了.git文件啦,那是我连接过GitHub啦!
2.将项目加到缓存中 git add 或 git add .
这时候你就可以把你的项目粘贴到这个本地Git仓库里面(粘贴后你可以通过git status来查看你当前的状态),然后通过git add把项目添加到仓库(或git add . 把该目录下的所有文件添加到仓库,注意点是用空格隔开的)。在这个过程中你其实可以一直使用git status来查看你当前的状态。ps ~~~ 反正我用git add 不行,得用git add . 才有用,有点坑.搞得我重新弄了一遍.没加之前为红色的,如下:
添加之后为绿色的啦!
3.用 git commit -m "里面为你的注释"把项目提交到仓库
-m后面引号里面是本次提交的注释内容,这个可以不写,但最好写上,不然会报错,我就报错了,详情自行Google。 好了,我们本地Git仓库这边的工作做完了,下面就到了连接远程仓库(也就是连接Github)
由于本地Git仓库和Github仓库之间的传输是通过SSH加密的,所以连接时需要设置一下:如果你以前连接过就可以不需要设置啦!下面我们来看没第一次远程连接要做的是情.
$ git config --global user.name "name" : 设置用户名(写上用户名)
$ git config --global user.email "[email protected]" : 设置邮箱(引号里面写上注册时的邮箱)
4.创建远程版本库
- 创建 SSH Key $ ssh-keygen -t rsa -C "your email" 在用户主目录里找到.ssh 目录, 里面有 id_rsa 和 id_rsa.pub
- 登录Github,找到右上角的图标,打开点进里面的Settings,再选中里面的SSH and GPG KEYS,点击右上角的New SSH key,然后Title里面随便填,再把刚才id_rsa.pub里面的内容复制到Title下面的Key内容框里面,最后点击Add SSH key,这样就完成了SSH Key的加密。具体步骤也可看下面:
- 验证是否成功 $ ssh -T [email protected]
若返回Hi xxx! You've successfully authenticated, but GitHub does not provide
shell access.就成功啦!
5.关联好之后我们就可以把本地库的所有内容推送到远程仓库(也就是Github)上了
$ git push -u origin master
由于新建的远程仓库是空的,所以要加上-u这个参数,等远程仓库里面有了内容之后,下次再从本地库上传内容的时候只需下面这样就可以了:
$ git push origin master
如果报了不存在那么先清空:
$ git remote rm origin
$ git remote add origin 你的远程地址
$ git push -u origin master
git push -u origin +master //实在不行强制提交就是干
上传项目的过程可能需要等一段时间,完成之后是这样的:
这时候你再重新刷新你的Github页面进入刚才新建的那个仓库里面就会发现项目已经成功上传了:
另外,这里有个坑需要注意一下,就是在上面第七步创建远程仓库的时候,如果你勾选了Initialize this repository with a README(就是创建仓库的时候自动给你创建一个README文件),那么到了第九步你将本地仓库内容推送到远程仓库的时候就会报一个failed to push some refs to failed to push some refs to '[email protected]:fly-tong/fly-tong.github.io.git'的错。如下:
这是由于你新创建的那个仓库里面的README文件而你的本地仓库目录中没有这个文件,这时我们可以通过以下命令先将内容合并以下:
$ git pull --rebase origin master
然后运行如下:这时你再push就能成功了。
是不是超级神奇呢!
其实上面的步骤也就是我叫你创建一个新的仓库不动那里面的操作啦!
接着在仓库的设置里面
找到GitHub Pages 里面生成了你的个人博客的网站,如下:
如果GitHub pages显示的页面有乱码或其他错误,而用hexo运行,在4000端口访问的没问题,用下面的方式刷新一下:此处省去一万次上传更新GitHub;
hexo clean
hexo g
hexo s
如果你的这里报错了,一定是你的上传的文件有问题,在检查检查,这是我搭建好的个人模块的效果网站.https://fly-tong.github.io/
四.小总结
其实这个博客我也搭建了几天了,每次都会有错误,所以还望各位博友能够耐心搭建啊,毕竟有个自己个人博客也是件棒棒哒的事啦!!!基本上我踩完了所以的坑了,如果过程中遇到问题可以留下你的评论!!!
五.发布博客
个人博客搭建好了,该如何发布自己的博客呢???详情请见我的下一篇博客:发布自己博客,非常清晰!!!